@syncfusion/ej2-popups - npm Package Compare versions

Comparing version 20.4.51-85815 to 20.4.51-85816

package.json

@@ -93,4 +93,4 @@ {
     "typings": "index.d.ts",
-    "version": "20.4.51-85815",
+    "version": "20.4.51-85816",
     "sideEffects": false
   }

src/tooltip/tooltip-model.d.ts

@@ -52,4 +52,5 @@ import { Component, Property, ChildProperty, Event, BaseEventArgs, append, compile } from '@syncfusion/ej2-base';
import { EventHandler, EmitType, Touch, TapEventArgs, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';
import { isNullOrUndefined, getUniqueID, formatUnit, select, selectAll } from '@syncfusion/ej2-base';
import { attributes, closest, removeClass, addClass, remove } 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';
      *
+     * @aspType string
      */
-    content?: string | HTMLElement;
+    content?: string | HTMLElement | Function;
 
@@ -133,2 +134,3 @@ /**
      *  to know more about this property with demo.
+     * 
      * {% codeBlock src="tooltip/tippointerposition/index.md" %}{% endcodeBlock %}
@@ -144,2 +146,3 @@ *
      * If it is in touch device, it will show the Tooltip content when tap and holding on the target element.
+     * 
      * {% codeBlock src="tooltip/openson/index.md" %}{% endcodeBlock %}
@@ -156,2 +159,3 @@ * {% codeBlock src="tooltip/opensOn-api/index.ts" %}{% endcodeBlock %}
      *  to know more about this property with demo.
+     * 
      * {% codeBlock src="tooltip/mousetrail/index.md" %}{% endcodeBlock %}
@@ -168,2 +172,3 @@ * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      *  to know more about this property with demo.
+     * 
      * {% codeBlock src="tooltip/issticky/index.md" %}{% endcodeBlock %}
@@ -179,2 +184,3 @@ *
      *  to know more about this property with demo.
+     * 
      * {% codeBlock src="tooltip/animation/index.md" %}{% endcodeBlock %}
@@ -217,2 +223,12 @@ * {% codeBlock src="tooltip/animation-api/index.ts" %}{% endcodeBlock %}
     /**
+     * Allows additional HTML attributes such as tabindex, title, name, etc. to root element of the Tooltip popup, and
+     * accepts n number of attributes in a key-value pair format.
+     * 
+     * {% codeBlock src='tooltip/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
+    /**
      * We can trigger `beforeRender` event before the Tooltip and its contents are added to the DOM.
@@ -235,2 +251,3 @@ * When one of its arguments `cancel` is set to true, the Tooltip can be prevented from rendering on the page.
      *  set customized styles in it and so on.
+     * 
      * {% codeBlock src="tooltip/beforeOpen/index.md" %}{% endcodeBlock %}
@@ -244,2 +261,3 @@ *
      * We can trigger `afterOpen` event after the Tooltip Component gets opened.
+     * 
      * {% codeBlock src="tooltip/afterOpen/index.md" %}{% endcodeBlock %}
@@ -253,2 +271,3 @@ *
      * We can trigger `beforeClose` event before the Tooltip hides from the screen. If returned false, then the Tooltip is no more hidden.
+     * 
      * {% codeBlock src="tooltip/beforeClose/index.md" %}{% endcodeBlock %}
@@ -262,2 +281,3 @@ *
      * We can trigger `afterClose` event when the Tooltip Component gets closed.
+     * 
      * {% codeBlock src="tooltip/afterClose/index.md" %}{% endcodeBlock %}
@@ -271,2 +291,3 @@ *
      * We can trigger `beforeCollision` event for every collision fit calculation.
+     * 
      * {% codeBlock src="tooltip/beforeCollision/index.md" %}{% endcodeBlock %}
@@ -283,3 +304,2 @@ *
      */
-    /* eslint-disable */
     created?: EmitType<Object>;
@@ -292,5 +312,4 @@
      */
-    /* eslint-disable */
     destroyed?: EmitType<Object>;
 
 }

src/tooltip/tooltip.d.ts

@@ -7,2 +7,9 @@ import { Component, ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
  * Set of open modes available for Tooltip.
+ * ```props
+ * Auto :- The tooltip opens automatically when the trigger element is hovered over.
+ * Hover :- The tooltip opens when the trigger element is hovered over.
+ * Click :- The tooltip opens when the trigger element is clicked.
+ * Focus :- The tooltip opens when the trigger element is focused.
+ * Custom :- The tooltip opens when the trigger element is triggered by a custom event.
+ * ```
  */
@@ -12,2 +19,16 @@ export declare type OpenMode = 'Auto' | 'Hover' | 'Click' | 'Focus' | 'Custom';
  * Applicable positions where the Tooltip can be displayed over specific target elements.
+ * ```props
+ * TopLeft :- The tooltip is positioned at the top-left corner of the trigger element.
+ * TopCenter :- The tooltip is positioned at the top-center of the trigger element.
+ * TopRight :- The tooltip is positioned at the top-right corner of the trigger element.
+ * BottomLeft :- The tooltip is positioned at the bottom-left corner of the trigger element.
+ * BottomCenter :- The tooltip is positioned at the bottom-center of the trigger element.
+ * BottomRight :- The tooltip is positioned at the bottom-right corner of the trigger element.
+ * LeftTop :- The tooltip is positioned at the left-top corner of the trigger element.
+ * LeftCenter :- The tooltip is positioned at the left-center of the trigger element.
+ * LeftBottom :- The tooltip is positioned at the left-bottom corner of the trigger element.
+ * RightTop :- The tooltip is positioned at the right-top corner of the trigger element.
+ * RightCenter :- The tooltip is positioned at the right-center of the trigger element.
+ * RightBottom :- The tooltip is positioned at the right-bottom corner of the trigger element.
+ * ```
  */
@@ -17,2 +38,8 @@ export declare type Position = 'TopLeft' | 'TopCenter' | 'TopRight' | 'BottomLeft' | 'BottomCenter' | 'BottomRight' | 'LeftTop' | 'LeftCenter' | 'LeftBottom' | 'RightTop' | 'RightCenter' | 'RightBottom';
  * Applicable tip positions attached to the Tooltip.
+ * ```props
+ * Auto :- The tip pointer position is automatically calculated based on the available space.
+ * Start :- The tip pointer is positioned at the start of the tooltip.
+ * Middle :- The tip pointer is positioned at the middle of the tooltip.
+ * End :- The tip pointer is positioned at the end of the tooltip.
+ * ```
  */
@@ -22,2 +49,19 @@ export declare type TipPointerPosition = 'Auto' | 'Start' | 'Middle' | 'End';
  * Animation effects that are applicable for Tooltip.
+ * ```props
+ * FadeIn :- A fade-in animation effect where the tooltip gradually increases in opacity from 0 to full.
+ * FadeOut :- A fade-out animation effect where the tooltip gradually decreases in opacity from full to 0.
+ * FadeZoomIn :- A fade-in animation effect combined with a zoom-in effect.
+ * FadeZoomOut :- A fade-out animation effect combined with a zoom-out effect.
+ * FlipXDownIn :- A flip-down animation effect where the tooltip starts upside down and flips down to become fully visible.
+ * FlipXDownOut :- A flip-down animation effect where the tooltip starts fully visible and flips down to become invisible.
+ * FlipXUpIn :- A flip-up animation effect where the tooltip starts upside down and flips up to become fully visible.
+ * FlipXUpOut :- A flip-up animation effect where the tooltip starts fully visible and flips up to become invisible.
+ * FlipYLeftIn :- A flip-left animation effect where the tooltip starts from the right side and flips left to become fully visible.
+ * FlipYLeftOut :- A flip-left animation effect where the tooltip starts from the left side and flips left to become invisible.
+ * FlipYRightIn :- A flip-right animation effect where the tooltip starts from the left side and flips right to become fully visible.
+ * FlipYRightOut :- A flip-right animation effect where the tooltip starts from the right side and flips right to become invisible.
+ * ZoomIn :- zoom-in animation effect where the tooltip starts small and gradually grows in size to become fully visible.
+ * ZoomOut :- A zoom-out animation effect where the tooltip starts full size and gradually decreases in size to become invisible.
+ * None :- No animation effect, the tooltip simply appears or disappears without any animation.
+ * ```
  */
@@ -141,4 +185,5 @@ export declare type Effect = 'FadeIn' | 'FadeOut' | 'FadeZoomIn' | 'FadeZoomOut' | 'FlipXDownIn' | 'FlipXDownOut' | 'FlipXUpIn' | 'FlipXUpOut' | 'FlipYLeftIn' | 'FlipYLeftOut' | 'FlipYRightIn' | 'FlipYRightOut' | 'ZoomIn' | 'ZoomOut' | 'None';
      *
+     * @aspType string
      */
-    content: string | HTMLElement;
+    content: string | HTMLElement | Function;
     /**
@@ -213,2 +258,3 @@ * It is used to set the container element in which the Tooltip’s pop-up will be appended. It accepts value as both string and HTML Element.
      *  to know more about this property with demo.
+     *
      * {% codeBlock src="tooltip/tippointerposition/index.md" %}{% endcodeBlock %}
@@ -223,2 +269,3 @@ *
      * If it is in touch device, it will show the Tooltip content when tap and holding on the target element.
+     *
      * {% codeBlock src="tooltip/openson/index.md" %}{% endcodeBlock %}
@@ -234,2 +281,3 @@ * {% codeBlock src="tooltip/opensOn-api/index.ts" %}{% endcodeBlock %}
      *  to know more about this property with demo.
+     *
      * {% codeBlock src="tooltip/mousetrail/index.md" %}{% endcodeBlock %}
@@ -245,2 +293,3 @@ * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      *  to know more about this property with demo.
+     *
      * {% codeBlock src="tooltip/issticky/index.md" %}{% endcodeBlock %}
@@ -255,2 +304,3 @@ *
      *  to know more about this property with demo.
+     *
      * {% codeBlock src="tooltip/animation/index.md" %}{% endcodeBlock %}
@@ -288,2 +338,13 @@ * {% codeBlock src="tooltip/animation-api/index.ts" %}{% endcodeBlock %}
     /**
+     * Allows additional HTML attributes such as tabindex, title, name, etc. to root element of the Tooltip popup, and
+     * accepts n number of attributes in a key-value pair format.
+     *
+     * {% codeBlock src='tooltip/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
      * We can trigger `beforeRender` event before the Tooltip and its contents are added to the DOM.
@@ -305,2 +366,3 @@ * When one of its arguments `cancel` is set to true, the Tooltip can be prevented from rendering on the page.
      *  set customized styles in it and so on.
+     *
      * {% codeBlock src="tooltip/beforeOpen/index.md" %}{% endcodeBlock %}
@@ -313,2 +375,3 @@ *
      * We can trigger `afterOpen` event after the Tooltip Component gets opened.
+     *
      * {% codeBlock src="tooltip/afterOpen/index.md" %}{% endcodeBlock %}
@@ -321,2 +384,3 @@ *
      * We can trigger `beforeClose` event before the Tooltip hides from the screen. If returned false, then the Tooltip is no more hidden.
+     *
      * {% codeBlock src="tooltip/beforeClose/index.md" %}{% endcodeBlock %}
@@ -329,2 +393,3 @@ *
      * We can trigger `afterClose` event when the Tooltip Component gets closed.
+     *
      * {% codeBlock src="tooltip/afterClose/index.md" %}{% endcodeBlock %}
@@ -337,2 +402,3 @@ *
      * We can trigger `beforeCollision` event for every collision fit calculation.
+     *
      * {% codeBlock src="tooltip/beforeCollision/index.md" %}{% endcodeBlock %}
@@ -378,4 +444,4 @@ *
     private renderCloseIcon;
-    private addDescribedBy;
-    private removeDescribedBy;
+    private addDataTooltipId;
+    private removeDataTooltipId;
     private tapHoldHandler;
@@ -436,3 +502,2 @@ private touchEndHandler;
     private wireEvents;
-    private updateTarget;
     private getTriggerList;
@@ -439,0 +504,0 @@ private wireFocusEvents;

src/tooltip/tooltip.js

@@ -101,3 +101,2 @@ var __extends = (this && this.__extends) || (function () {
         addClass([this.element], ROOT);
-        this.element.setAttribute('tabindex', '0');
     };
@@ -175,3 +174,3 @@ Tooltip.prototype.formatPosition = function () {
     Tooltip.prototype.closePopupHandler = function () {
-        if (this.isReact && !(this.opensOn === "Click" && typeof (this.content) === 'function')) {
+        if (this.isReact && !(this.opensOn === 'Click' && typeof (this.content) === 'function')) {
             this.clearTemplate(['content']);
@@ -343,3 +342,2 @@ }
                 }
-                // eslint-disable-next-line
                 var tempFunction = compile(this.content);
@@ -360,3 +358,2 @@ var tempArr = tempFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);
             else {
-                // eslint-disable-next-line
                 var templateFunction = compile(this.content);
@@ -384,24 +381,7 @@ var tempArr = templateFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);
     };
-    Tooltip.prototype.addDescribedBy = function (target, id) {
-        var describedby = (target.getAttribute('aria-describedby') || '').split(/\s+/);
-        if (describedby.indexOf(id) < 0) {
-            describedby.push(id);
-        }
-        attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });
+    Tooltip.prototype.addDataTooltipId = function (target, id) {
+        attributes(target, { 'data-tooltip-id': id });
     };
-    Tooltip.prototype.removeDescribedBy = function (target) {
-        var id = target.getAttribute('data-tooltip-id');
-        var describedby = (target.getAttribute('aria-describedby') || '').split(/\s+/);
-        var index = describedby.indexOf(id);
-        if (index !== -1) {
-            describedby.splice(index, 1);
-        }
+    Tooltip.prototype.removeDataTooltipId = function (target) {
         target.removeAttribute('data-tooltip-id');
-        var orgdescribedby = describedby.join(' ').trim();
-        if (orgdescribedby) {
-            target.setAttribute('aria-describedby', orgdescribedby);
-        }
-        else {
-            target.removeAttribute('aria-describedby');
-        }
     };
@@ -417,3 +397,2 @@ Tooltip.prototype.tapHoldHandler = function (evt) {
         }
-        // eslint-disable-next-line
         var close = function () {
@@ -458,3 +437,2 @@ _this.close();
         }
-        // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input
         this.showTooltip(target, this.animation.open, e);
@@ -483,3 +461,2 @@ };
         };
-        // eslint-disable-next-line
         var observeCallback = function (beforeRenderArgs) {
@@ -507,2 +484,12 @@ _this.beforeRenderCallback(beforeRenderArgs, target, e, showAnimation);
                 });
+                if (Object.keys(this.htmlAttributes).length !== 0) {
+                    for (var attr in this.htmlAttributes) {
+                        if (attr === "class") {
+                            this.tooltipEle.classList.add(this.htmlAttributes["" + attr]);
+                        }
+                        else {
+                            this.tooltipEle.setAttribute(attr, this.htmlAttributes["" + attr]);
+                        }
+                    }
+                }
                 this.tooltipBeforeRender(target, this);
@@ -514,3 +501,3 @@ this.tooltipAfterRender(target, e, showAnimation, this);
                     this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);
-                    this.addDescribedBy(target, this.ctrlId + '_content');
+                    this.addDataTooltipId(target, this.ctrlId + '_content');
                     this.renderContent(target);
@@ -554,3 +541,3 @@ PopupAnimation.stop(this.tooltipEle);
             removeClass([ctrlObj.tooltipEle], HIDE_POPUP);
-            ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');
+            ctrlObj.addDataTooltipId(target, ctrlObj.ctrlId + '_content');
             ctrlObj.renderContent(target);
@@ -579,3 +566,2 @@ addClass([ctrlObj.tooltipEle], POPUP_OPEN);
             }
-            // eslint-disable-next-line
             var observeCallback = function (observedArgs) {
@@ -596,3 +582,2 @@ ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);
         else {
-            // eslint-disable-next-line
             var openAnimation_1 = {
@@ -608,3 +593,2 @@ name: showAnimation.effect,
             if (this.openDelay > 0) {
-                // eslint-disable-next-line
                 var show = function () {
@@ -704,8 +688,8 @@ if (_this.mouseTrail) {
         var eleOffset = { left: elePos.left, top: elePos.top };
-        var left = this.isBodyContainer ?
-            fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: false }, eleOffset).left : eleOffset.left;
+        var position = this.isBodyContainer ?
+            fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: true }, eleOffset) : eleOffset;
         this.tooltipEle.style.display = 'block';
         if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {
             var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);
-            var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);
+            var arrowleft = parseInt(arrowEle.style.left, 10) - (position.left - elePos.left);
             if (arrowleft < 0) {
@@ -720,3 +704,4 @@ arrowleft = 0;
         this.tooltipEle.style.display = '';
-        eleOffset.left = left;
+        eleOffset.left = position.left;
+        eleOffset.top = position.top;
         return eleOffset;
@@ -736,3 +721,2 @@ };
             clearTimeout(this.showTimer);
-            // eslint-disable-next-line
             var hide = function () {
@@ -781,3 +765,2 @@ if (_this.closeDelay && _this.tooltipEle && _this.isTooltipOpen) {
         this.isHidden = true;
-        // eslint-disable-next-line
         var closeAnimation = {
@@ -802,3 +785,3 @@ name: hideAnimation.effect,
         }
-        this.removeDescribedBy(target);
+        this.removeDataTooltipId(target);
     };
@@ -891,2 +874,9 @@ Tooltip.prototype.clear = function () {
     Tooltip.prototype.keyDown = function (event) {
+        if (!isNullOrUndefined(this.targetsList) && !isNullOrUndefined(this.target)) {
+            var target = [].slice.call(selectAll(this.target, this.element));
+            if (target.length !== this.targetsList.length) {
+                this.unwireEvents(this.opensOn);
+                this.wireEvents(this.opensOn);
+            }
+        }
         if (this.tooltipEle && event.keyCode === 27) {
@@ -948,3 +938,2 @@ this.close();
                 this.wireFocusEvents();
-                EventHandler.add(this.element, 'DOMNodeInserted', this.updateTarget, this);
             }
@@ -972,11 +961,2 @@ if (opensOn === 'Click') {
     };
-    Tooltip.prototype.updateTarget = function (e) {
-        if (!isNullOrUndefined(this.targetsList) && !isNullOrUndefined(this.target)) {
-            var target = [].slice.call(selectAll(this.target, this.element));
-            if (target.length !== this.targetsList.length) {
-                this.unwireEvents(this.opensOn);
-                this.wireEvents(this.opensOn);
-            }
-        }
-    };
     Tooltip.prototype.getTriggerList = function (trigger) {
@@ -990,9 +970,13 @@ if (trigger === 'Auto') {
         if (!isNullOrUndefined(this.target)) {
-            var targetList = [].slice.call(selectAll(this.target, this.element));
-            this.targetsList = targetList;
-            for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {
-                var target = targetList_2[_i];
-                target.setAttribute('tabindex', '0');
-                EventHandler.add(target, 'focus', this.targetHover, this);
+            if (this.element.nodeName !== "BODY") {
+                EventHandler.add(this.element, 'focusin', this.targetHover, this);
             }
+            else {
+                var targetList = [].slice.call(selectAll(this.target, this.element));
+                this.targetsList = targetList;
+                for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {
+                    var target = targetList_2[_i];
+                    EventHandler.add(target, 'focus', this.targetHover, this);
+                }
+            }
         }
@@ -1009,2 +993,5 @@ else {
                 }
+                if (e.type === 'focusin') {
+                    EventHandler.add(target, 'focusout', this.onMouseOut, this);
+                }
                 if (e.type === 'mouseover') {
@@ -1021,3 +1008,2 @@ EventHandler.add(target, 'mouseleave', this.onMouseOut, this);
             }
-            target.setAttribute("tabindex", "0");
         }
@@ -1043,3 +1029,2 @@ };
                 this.unwireFocusEvents();
-                EventHandler.remove(this.element, 'DOMNodeInserted', this.updateTarget);
             }
@@ -1068,8 +1053,12 @@ if (opensOn === 'Click') {
         if (!isNullOrUndefined(this.target)) {
-            var targetList = [].slice.call(selectAll(this.target, this.element));
-            for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {
-                var target = targetList_3[_i];
-                target.removeAttribute('tabindex');
-                EventHandler.remove(target, 'focus', this.targetHover);
+            if (this.element.nodeName === 'BODY') {
+                EventHandler.remove(this.element, 'focusin', this.targetHover);
             }
+            else {
+                var targetList = [].slice.call(selectAll(this.target, this.element));
+                for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {
+                    var target = targetList_3[_i];
+                    EventHandler.remove(target, 'focus', this.targetHover);
+                }
+            }
         }
@@ -1087,2 +1076,3 @@ else {
                     EventHandler.remove(target, 'blur', this.onMouseOut);
+                    EventHandler.remove(target, 'focusout', this.onMouseOut);
                 }
@@ -1283,2 +1273,7 @@ if (opensOn === 'Hover' && !Browser.isDevice) {
         this.popupObj = null;
+        var currentTarget = selectAll('[data-tooltip-id= "' + this.ctrlId + '_content"]', this.element);
+        for (var _i = 0, currentTarget_1 = currentTarget; _i < currentTarget_1.length; _i++) {
+            var target = currentTarget_1[_i];
+            this.restoreElement(target);
+        }
     };
@@ -1346,2 +1341,5 @@ __decorate([
     __decorate([
+        Property('')
+    ], Tooltip.prototype, "htmlAttributes", void 0);
+    __decorate([
         Event()
@@ -1348,0 +1346,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

3972659

increased by0.2%

Lines of code

60357

increased by0.22%

No dependency changes