@syncfusion/ej2-popups - npm Package Compare versions

Comparing version 17.3.34 to 17.4.39

dist/global/index.d.ts

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

package.json

 {
   "_from": "@syncfusion/ej2-popups@*",
-  "_id": "@syncfusion/ej2-popups@17.3.29",
+  "_id": "@syncfusion/ej2-popups@17.2.48",
   "_inBundle": false,
-  "_integrity": "sha512-ntgKioL0rc+7G4xkqvBy81ZfBTm/QsIYMqds/z9ctMnd6BRwC+QHp07hSHtV/DwzKmDzzMS2qDDS8idgWz3jNw==",
+  "_integrity": "sha512-Ayy/CnK0zoDQugOJ9yq0xo04Rj2WAgoM3r3jWl7E76DESQlezL97Nm9tugMOzUcO0YaZ6xzld61d8Z8J70xmCg==",
   "_location": "/@syncfusion/ej2-popups",
@@ -24,3 +24,2 @@ "_phantomChildren": {},
     "/@syncfusion/ej2-calendars",
-    "/@syncfusion/ej2-circulargauge",
     "/@syncfusion/ej2-diagrams",
@@ -33,4 +32,2 @@ "/@syncfusion/ej2-documenteditor",
     "/@syncfusion/ej2-inputs",
-    "/@syncfusion/ej2-lineargauge",
-    "/@syncfusion/ej2-maps",
     "/@syncfusion/ej2-navigations",
@@ -47,4 +44,4 @@ "/@syncfusion/ej2-notifications",
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-popups/-/ej2-popups-17.3.29.tgz",
-  "_shasum": "e78cca6c4b403474862a1aa715db9698e0459b08",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-popups/-/ej2-popups-17.2.48.tgz",
+  "_shasum": "0fc4a221363bd216a0b5563cb077ecba0b9355c9",
   "_spec": "@syncfusion/ej2-popups@*",
@@ -60,4 +57,4 @@ "_where": "/jenkins/workspace/ation_hotfix_17.2.0.34_Vol2-DDPJ6C2YEWTWLLKKNA7AG2JBE6DYTCTNGMHGORWGAYAVCL6L7OLQ/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.3.27",
-    "@syncfusion/ej2-buttons": "~17.3.27"
+    "@syncfusion/ej2-base": "~17.4.39",
+    "@syncfusion/ej2-buttons": "~17.4.39"
   },
@@ -97,4 +94,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "17.3.34",
+  "version": "17.4.39",
   "sideEffects": false
 }

src/dialog/dialog-model.d.ts

@@ -1,3 +0,3 @@
-import { Component, Property, Event, Collection, L10n, Browser, EmitType, Complex, compile, createElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, isBlazor } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, append } from '@syncfusion/ej2-base';import { EventHandler, updateBlazorTemplate, BlazorDragEventArgs } from '@syncfusion/ej2-base';import { Draggable } from '@syncfusion/ej2-base';import { Popup, PositionData, getZindexPartial } from '../popup/popup';import { PositionDataModel } from '../popup/popup-model';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';import { createResize, removeResize, setMinHeight } from '../common/resize';
-import {ButtonType,DialogEffect,BeforeOpenEventArgs,OpenEventArgs,BeforeCloseEventArgs,CloseEventArgs} from "./dialog";
+import { Component, Property, Event, Collection, L10n, Browser, EmitType, Complex, compile, createElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, isBlazor } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, append } from '@syncfusion/ej2-base';import { EventHandler, updateBlazorTemplate, BlazorDragEventArgs } from '@syncfusion/ej2-base';import { Draggable, SanitizeHtmlHelper, extend } from '@syncfusion/ej2-base';import { Popup, PositionData, getZindexPartial } from '../popup/popup';import { PositionDataModel } from '../popup/popup-model';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';import { createResize, removeResize, setMinHeight } from '../common/resize';
+import {ButtonType,DialogEffect,BeforeSanitizeHtmlArgs,BeforeOpenEventArgs,OpenEventArgs,BeforeCloseEventArgs,CloseEventArgs} from "./dialog";
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -95,2 +95,8 @@
     /**
+     * Defines whether to allow the cross-scripting site or not.
+     * @default true
+     */
+    enableHtmlSanitizer?: boolean;
+
+    /**
      * Specifies the value that represents whether the close icon is shown in the dialog component.
@@ -255,2 +261,9 @@ * @default false
     /**
+     * Event triggers before sanitize the value.
+     * @event 
+     * @blazorProperty 'OnSanitizeHtml'
+     */
+    beforeSanitizeHtml?: EmitType<BeforeSanitizeHtmlArgs>;
+
+    /**
      * Event triggers when the dialog is being opened.
@@ -257,0 +270,0 @@ * If you cancel this event, the dialog remains closed.

src/dialog/dialog.d.ts

@@ -7,2 +7,28 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
 export declare type ButtonType = 'Button' | 'Submit' | 'Reset';
+export interface SanitizeSelectors {
+    /** Returns the tags. */
+    tags?: string[];
+    /** Returns the attributes. */
+    attributes?: SanitizeRemoveAttrs[];
+}
+export interface BeforeSanitizeHtmlArgs {
+    /** 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}
+     */
+    helper?: Function;
+    /** 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;
+}
+export interface SanitizeRemoveAttrs {
+    /** Defines the attribute name to sanitize */
+    attribute?: string;
+    /** Defines the selector that sanitize the specified attributes within the selector */
+    selector?: string;
+}
 export declare class ButtonProps extends ChildProperty<ButtonProps> {
@@ -294,2 +320,7 @@ /**
     /**
+     * Defines whether to allow the cross-scripting site or not.
+     * @default true
+     */
+    enableHtmlSanitizer: boolean;
+    /**
      * Specifies the value that represents whether the close icon is shown in the dialog component.
@@ -435,2 +466,8 @@ * @default false
     /**
+     * Event triggers before sanitize the value.
+     * @event
+     * @blazorProperty 'OnSanitizeHtml'
+     */
+    beforeSanitizeHtml: EmitType<BeforeSanitizeHtmlArgs>;
+    /**
      * Event triggers when the dialog is being opened.
@@ -544,2 +581,6 @@ * If you cancel this event, the dialog remains closed.
     private setTemplate;
+    /**
+     * @hidden
+     */
+    sanitizeHelper(value: string): string;
     private blazorTemplate;
@@ -546,0 +587,0 @@ private setMaxHeight;

src/tooltip/tooltip-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, ChildProperty, Event, BaseEventArgs, append, compile, isBlazor } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Touch, TapEventArgs, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';import { isNullOrUndefined, getUniqueID, formatUnit } from '@syncfusion/ej2-base';import { attributes, closest, removeClass, addClass, remove, updateBlazorTemplate, resetBlazorTemplate } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base';import { Popup } from '../popup/popup';import { OffsetPosition, calculatePosition } from '../common/position';import { isCollide, fit } from '../common/collision';
+import { Component, Property, ChildProperty, Event, BaseEventArgs, append, compile, isBlazor } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Touch, TapEventArgs, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';import { isNullOrUndefined, getUniqueID, formatUnit } from '@syncfusion/ej2-base';import { attributes, closest, removeClass, addClass, remove, updateBlazorTemplate, resetBlazorTemplate } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Complex, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Popup } from '../popup/popup';import { OffsetPosition, calculatePosition } from '../common/position';import { isCollide, fit } from '../common/collision';
 import {TooltipAnimationSettings,Position,TipPointerPosition,TooltipEventArgs} from "./tooltip";
@@ -49,2 +49,3 @@ import {ComponentModel} from '@syncfusion/ej2-base';
      * {% codeBlock src="tooltip/content-api/index.ts" %}{% endcodeBlock %}
+     * @blazorType object
      */
@@ -162,2 +163,8 @@ content?: string | HTMLElement;
     /**
+     * Defines whether to allow the cross-scripting site or not.
+     * @default false
+     */
+    enableHtmlSanitizer?: boolean;
+
+    /**
      * We can trigger `beforeRender` event before the Tooltip and its contents are added to the DOM.
@@ -164,0 +171,0 @@ * When one of its arguments `cancel` is set to true, the Tooltip can be prevented from rendering on the page.

src/tooltip/tooltip.d.ts

@@ -105,2 +105,6 @@ import { Component, ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
     private isBlazorTemplate;
+    private isBlazorTooltip;
+    private contentTargetValue;
+    private contentEvent;
+    private contentAnimation;
     /**
@@ -126,2 +130,3 @@ * It is used to set the width of Tooltip component which accepts both string and number values.
      * {% codeBlock src="tooltip/content-api/index.ts" %}{% endcodeBlock %}
+     * @blazorType object
      */
@@ -225,2 +230,7 @@ content: string | HTMLElement;
     /**
+     * Defines whether to allow the cross-scripting site or not.
+     * @default false
+     */
+    enableHtmlSanitizer: boolean;
+    /**
      * We can trigger `beforeRender` event before the Tooltip and its contents are added to the DOM.
@@ -308,2 +318,5 @@ * When one of its arguments `cancel` is set to true, the Tooltip can be prevented from rendering on the page.
     private beforeRenderCallback;
+    private contentUpdated;
+    private beforeRenderBlazor;
+    private afterRenderBlazor;
     private beforeOpenCallback;
@@ -310,0 +323,0 @@ private needTemplateReposition;

src/tooltip/tooltip.js

@@ -24,3 +24,3 @@ var __extends = (this && this.__extends) || (function () {
 import { attributes, closest, removeClass, addClass, remove, updateBlazorTemplate, resetBlazorTemplate } from '@syncfusion/ej2-base';
-import { NotifyPropertyChanges, Complex } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, Complex, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { Popup } from '../popup/popup';
@@ -53,2 +53,3 @@ import { calculatePosition } from '../common/position';
 var POPUP_LIB = 'e-lib';
+var HIDE_POPUP = 'e-hidden';
 var Animation = /** @class */ (function (_super) {
@@ -86,7 +87,14 @@ __extends(Animation, _super);
     function Tooltip(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        _this.isBlazorTooltip = false;
+        _this.contentTargetValue = null;
+        _this.contentEvent = null;
+        _this.contentAnimation = null;
+        return _this;
     }
     Tooltip.prototype.initialize = function () {
         this.formatPosition();
-        addClass([this.element], ROOT);
+        if (!(isBlazor() && this.isServerRendered)) {
+            addClass([this.element], ROOT);
+        }
     };
@@ -104,6 +112,14 @@ Tooltip.prototype.formatPosition = function () {
         this.setTipClass(this.position);
-        var tip = this.createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });
-        tip.appendChild(this.createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));
-        tip.appendChild(this.createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));
-        this.tooltipEle.appendChild(tip);
+        if (!(isBlazor() && this.isServerRendered)) {
+            var tip = this.createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });
+            tip.appendChild(this.createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));
+            tip.appendChild(this.createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));
+            this.tooltipEle.appendChild(tip);
+        }
+        else {
+            var tip = this.tooltipEle.querySelector('.' + ARROW_TIP);
+            addClass([tip.querySelector('.' + ARROW_TIP_OUTER)], this.tipClass);
+            addClass([tip.querySelector('.' + ARROW_TIP_INNER)], this.tipClass);
+            this.tooltipEle.appendChild(tip);
+        }
     };
@@ -127,13 +143,20 @@ Tooltip.prototype.setTipClass = function (position) {
         this.tooltipEle.classList.remove(POPUP_LIB);
-        this.popupObj = new Popup(this.tooltipEle, {
-            height: this.height,
-            width: this.width,
-            position: {
-                X: elePos.left,
-                Y: elePos.top
-            },
-            enableRtl: this.enableRtl,
-            open: this.openPopupHandler.bind(this),
-            close: this.closePopupHandler.bind(this)
-        });
+        if (isBlazor() && this.isServerRendered) {
+            this.popupObj = new Popup(this.tooltipEle, {
+                position: { X: elePos.left, Y: elePos.top },
+                open: this.openPopupHandler.bind(this),
+                close: this.closePopupHandler.bind(this),
+                enableRtl: this.enableRtl
+            });
+        }
+        else {
+            this.popupObj = new Popup(this.tooltipEle, {
+                height: this.height,
+                width: this.width,
+                position: { X: elePos.left, Y: elePos.top },
+                enableRtl: this.enableRtl,
+                open: this.openPopupHandler.bind(this),
+                close: this.closePopupHandler.bind(this)
+            });
+        }
     };
@@ -154,3 +177,3 @@ Tooltip.prototype.getTooltipPosition = function (target) {
     Tooltip.prototype.openPopupHandler = function () {
-        if (this.needTemplateReposition() && !this.mouseTrail) {
+        if (!this.mouseTrail && this.needTemplateReposition()) {
             this.reposition(this.findTarget());
@@ -263,12 +286,14 @@ }
             }
-            var tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;
-            if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {
-                leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';
+            if (target) {
+                var tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;
+                if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {
+                    leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';
+                }
+                else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {
+                    leftValue = POINTER_ADJUST + 'px';
+                }
+                else {
+                    leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';
+                }
             }
-            else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {
-                leftValue = POINTER_ADJUST + 'px';
-            }
-            else {
-                leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';
-            }
         }
@@ -307,16 +332,21 @@ else {
         if (!isNullOrUndefined(this.content)) {
-            tooltipContent.innerHTML = '';
-            if (this.content instanceof HTMLElement) {
-                tooltipContent.appendChild(this.content);
-            }
-            else if (typeof this.content === 'string' && this.content.indexOf('<div>Blazor') < 0) {
-                tooltipContent.innerHTML = this.content;
-            }
-            else {
-                var templateFunction = compile(this.content);
-                append(templateFunction({}, null, null, this.element.id + 'content'), tooltipContent);
-                if (typeof this.content === 'string' && this.content.indexOf('<div>Blazor') >= 0) {
-                    this.isBlazorTemplate = true;
-                    updateBlazorTemplate(this.element.id + 'content', 'Content', this);
+            if (this.isBlazorTooltip || !(isBlazor() && this.isServerRendered)) {
+                tooltipContent.innerHTML = '';
+                if (this.content instanceof HTMLElement) {
+                    tooltipContent.appendChild(this.content);
                 }
+                else if (typeof this.content === 'string' && this.content.indexOf('<div>Blazor') < 0) {
+                    if (this.enableHtmlSanitizer) {
+                        this.setProperties({ content: SanitizeHtmlHelper.sanitize(this.content) }, true);
+                    }
+                    tooltipContent.innerHTML = this.content;
+                }
+                else {
+                    var templateFunction = compile(this.content);
+                    append(templateFunction({}, null, null, this.element.id + 'content'), tooltipContent);
+                    if (typeof this.content === 'string' && this.content.indexOf('<div>Blazor') >= 0) {
+                        this.isBlazorTemplate = true;
+                        updateBlazorTemplate(this.element.id + 'content', 'Content', this);
+                    }
+                }
             }
@@ -424,3 +454,3 @@ }
     Tooltip.prototype.beforeRenderCallback = function (beforeRenderArgs, target, e, showAnimation) {
-        var _this = this;
+        var isBlazorTooltipRendered = false;
         if (beforeRenderArgs.cancel) {
@@ -433,48 +463,101 @@ this.isHidden = true;
             if (isNullOrUndefined(this.tooltipEle)) {
-                this.ctrlId = this.element.getAttribute('id') ?
-                    getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');
-                this.tooltipEle = this.createElement('div', {
-                    className: TOOLTIP_WRAP + ' ' + POPUP_ROOT + ' ' + POPUP_LIB, attrs: {
-                        role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'
-                    }, styles: 'width:' +
-                        formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'
-                });
-                if (this.cssClass) {
-                    addClass([this.tooltipEle], this.cssClass.split(' '));
+                if (isBlazor() && this.isServerRendered) {
+                    this.contentTargetValue = target;
+                    this.contentEvent = e;
+                    this.contentAnimation = showAnimation;
+                    var args = { 'enableTooltip': 'true' };
+                    // tslint:disable
+                    this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);
+                    // tslint:enable
+                    isBlazorTooltipRendered = true;
                 }
-                if (Browser.isDevice) {
-                    addClass([this.tooltipEle], DEVICE);
+                else {
+                    this.ctrlId = this.element.getAttribute('id') ?
+                        getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');
+                    this.tooltipEle = this.createElement('div', {
+                        className: TOOLTIP_WRAP + ' ' + POPUP_ROOT + ' ' + POPUP_LIB, attrs: {
+                            role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'
+                        }, styles: 'width:' +
+                            formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'
+                    });
+                    if (this.cssClass) {
+                        addClass([this.tooltipEle], this.cssClass.split(' '));
+                    }
+                    this.beforeRenderBlazor(target, this);
                 }
-                if (this.width !== 'auto') {
-                    this.tooltipEle.style.maxWidth = formatUnit(this.width);
+                if (!isBlazorTooltipRendered) {
+                    this.afterRenderBlazor(target, e, showAnimation, this);
                 }
-                this.tooltipEle.appendChild(this.createElement('div', { className: CONTENT }));
-                document.body.appendChild(this.tooltipEle);
-                this.addDescribedBy(target, this.ctrlId + '_content');
-                this.renderContent(target);
-                addClass([this.tooltipEle], POPUP_OPEN);
-                if (this.showTipPointer) {
-                    this.renderArrow();
-                }
-                this.renderCloseIcon();
-                this.renderPopup(target);
             }
             else {
-                this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);
-                this.addDescribedBy(target, this.ctrlId + '_content');
-                this.renderContent(target);
-                PopupAnimation.stop(this.tooltipEle);
-                this.reposition(target);
+                if (isBlazor() && this.isServerRendered) {
+                    addClass([this.tooltipEle], POPUP_OPEN);
+                    document.body.appendChild(this.tooltipEle);
+                    this.renderCloseIcon();
+                    this.renderPopup(target);
+                }
+                if (target) {
+                    this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);
+                    this.addDescribedBy(target, this.ctrlId + '_content');
+                    this.renderContent(target);
+                    PopupAnimation.stop(this.tooltipEle);
+                    this.reposition(target);
+                    this.afterRenderBlazor(target, e, showAnimation, this);
+                }
             }
-            removeClass([this.tooltipEle], POPUP_OPEN);
-            addClass([this.tooltipEle], POPUP_CLOSE);
-            this.tooltipEventArgs = e ? { type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle } :
-                { type: null, cancel: false, target: target, event: null, element: this.tooltipEle };
-            if (this.needTemplateReposition() && !this.mouseTrail) {
-                this.tooltipEle.style.display = 'none';
+        }
+    };
+    ;
+    Tooltip.prototype.contentUpdated = function (args) {
+        if (isNullOrUndefined(this.tooltipEle)) {
+            if (isBlazor() && this.isServerRendered) {
+                this.ctrlId = this.element.id;
+                this.tooltipEle = document.querySelector('#' + this.ctrlId + '_content');
+                this.beforeRenderBlazor(this.contentTargetValue, this);
+                this.afterRenderBlazor(this.contentTargetValue, this.contentEvent, this.contentAnimation, this);
+                this.contentTargetValue = this.contentEvent = this.contentAnimation = null;
             }
+        }
+    };
+    ;
+    Tooltip.prototype.beforeRenderBlazor = function (target, ctrlObj) {
+        if (target) {
+            if (Browser.isDevice) {
+                addClass([ctrlObj.tooltipEle], DEVICE);
+            }
+            if (ctrlObj.width !== 'auto') {
+                ctrlObj.tooltipEle.style.maxWidth = formatUnit(ctrlObj.width);
+            }
+            if (!(isBlazor() && this.isServerRendered)) {
+                ctrlObj.tooltipEle.appendChild(ctrlObj.createElement('div', { className: CONTENT }));
+            }
+            document.body.appendChild(ctrlObj.tooltipEle);
+            removeClass([ctrlObj.tooltipEle], HIDE_POPUP);
+            ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');
+            ctrlObj.renderContent(target);
+            addClass([ctrlObj.tooltipEle], POPUP_OPEN);
+            if (ctrlObj.showTipPointer) {
+                ctrlObj.renderArrow();
+            }
+            ctrlObj.renderCloseIcon();
+            ctrlObj.renderPopup(target);
+            ctrlObj.adjustArrow(target, ctrlObj.position, ctrlObj.tooltipPositionX, ctrlObj.tooltipPositionY);
+            PopupAnimation.stop(ctrlObj.tooltipEle);
+            ctrlObj.reposition(target);
+        }
+    };
+    Tooltip.prototype.afterRenderBlazor = function (target, e, showAnimation, ctrlObj) {
+        if (target) {
+            removeClass([ctrlObj.tooltipEle], POPUP_OPEN);
+            addClass([ctrlObj.tooltipEle], POPUP_CLOSE);
+            ctrlObj.tooltipEventArgs = e ?
+                { type: e.type, cancel: false, target: target, event: e, element: ctrlObj.tooltipEle } :
+                { type: null, cancel: false, target: target, event: null, element: ctrlObj.tooltipEle };
+            if (ctrlObj.needTemplateReposition() && !ctrlObj.mouseTrail) {
+                ctrlObj.tooltipEle.style.display = 'none';
+            }
             var observeCallback = function (observedArgs) {
-                _this.beforeOpenCallback(observedArgs, target, showAnimation, e);
+                ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);
             };
-            this.trigger('beforeOpen', this.tooltipEventArgs, observeCallback.bind(this));
+            ctrlObj.trigger('beforeOpen', ctrlObj.tooltipEventArgs, observeCallback.bind(ctrlObj));
         }
@@ -520,3 +603,3 @@ };
             && typeof tooltip.viewContainerRef !== 'string'
-            || isBlazor() && this.isBlazorTemplate;
+            || (isBlazor() && this.isServerRendered) && this.isBlazorTemplate;
     };
@@ -656,5 +739,14 @@ Tooltip.prototype.checkCollision = function (target, x, y) {
             }
-            if (this.tooltipEle) {
+            if (isBlazor() && this.isServerRendered && this.tooltipEle) {
+                this.tooltipEle.style.display = 'none';
+                this.tooltipEle = null;
+                var args = { 'enableTooltip': 'false' };
+                // tslint:disable
+                this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);
+                // tslint:enable
                 remove(this.tooltipEle);
             }
+            else if (this.tooltipEle) {
+                remove(this.tooltipEle);
+            }
             this.tooltipEle = null;
@@ -911,17 +1003,48 @@ this.popupObj = null;
                 case 'width':
-                    if (this.tooltipEle && targetElement) {
-                        this.tooltipEle.style.width = formatUnit(newProp.width);
-                        this.reposition(targetElement);
+                    if (this.tooltipEle) {
+                        if (targetElement) {
+                            this.tooltipEle.style.width = formatUnit(newProp.width);
+                            this.reposition(targetElement);
+                        }
                     }
+                    else if (isBlazor() && this.isServerRendered) {
+                        var args = { 'width': formatUnit(newProp.width) };
+                        // tslint:disable
+                        this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);
+                        // tslint:enable
+                        if (targetElement) {
+                            this.reposition(targetElement);
+                        }
+                    }
                     break;
                 case 'height':
-                    if (this.tooltipEle && targetElement) {
-                        this.tooltipEle.style.height = formatUnit(newProp.height);
-                        this.reposition(targetElement);
+                    if (this.tooltipEle) {
+                        if (targetElement) {
+                            this.tooltipEle.style.height = formatUnit(newProp.height);
+                            this.reposition(targetElement);
+                        }
                     }
+                    else if (isBlazor() && this.isServerRendered) {
+                        var args = { 'height': formatUnit(newProp.height) };
+                        // tslint:disable
+                        this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);
+                        // tslint:enable
+                        if (targetElement) {
+                            this.reposition(targetElement);
+                        }
+                    }
                     break;
                 case 'content':
                     if (this.tooltipEle) {
+                        if (isBlazor() && this.isServerRendered) {
+                            this.isBlazorTooltip = true;
+                        }
                         this.renderContent();
                     }
+                    else if (isBlazor() && this.isServerRendered) {
+                        var args = { 'content': newProp.content };
+                        // tslint:disable
+                        this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);
+                        // tslint:enable
+                    }
                     break;
@@ -966,2 +1089,8 @@ case 'opensOn':
                     }
+                    else if (isBlazor() && this.isServerRendered) {
+                        var args = { 'cssClass': newProp.cssClass };
+                        // tslint:disable
+                        this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);
+                        // tslint:enable
+                    }
                     break;
@@ -1085,2 +1214,5 @@ case 'enableRtl':
     __decorate([
+        Property(false)
+    ], Tooltip.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
         Event()
@@ -1087,0 +1219,0 @@ ], Tooltip.prototype, "beforeRender", void 0);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2641075

increased by4.89%

Lines of code

30581

increased by2.88%

Dependency changes

• + Added@syncfusion/ej2-base@17.4.51(transitive)

• + Added@syncfusion/ej2-buttons@17.4.51(transitive)

• + Added@syncfusion/ej2-icons@17.4.51(transitive)

• - Removed@syncfusion/ej2-base@17.3.27(transitive)

• - Removed@syncfusion/ej2-buttons@17.3.27(transitive)

• - Removed@syncfusion/ej2-icons@17.3.27(transitive)

• Updated@syncfusion/ej2-base@~17.4.39

• Updated@syncfusion/ej2-buttons@~17.4.39