@syncfusion/ej2-popups - npm Package Compare versions

Comparing version 20.4.53 to 21.1.35

CHANGELOG.md

@@ -5,34 +5,20 @@ # Changelog
 
-### Dialog
+### Tooltip
 
-#### Bug Fixes
+#### New Features
 
-- `#I441169` - Now, the Dialog Component `ESC` key works properly.
+- `#I434633` - Provided the htmlAttributes support for the Tooltip component which allows to add attributes for the root element of Tooltip popup.
 
-## 20.4.52 (2023-02-28)
+#### Breaking Changes
 
-### Dialog
+- The tooltip target's tabindex and aria-describedby attributes, which were handled by the built-in source, were removed. Now, you can add these attributes directly to a target element.
 
-#### Bug Fixes
-
-- `#I430348` - Fixed an issue where pressing the enter key triggered the button click event multiple times.
-
-## 20.4.49 (2023-02-07)
-
 ### Dialog
 
-#### Bug Fixes
+#### New Features
 
-- `#I428772` - Fixed alignment issue with Dialog component header content and close icon.
+- **State persistence**: Provide support to preserve the updated values of the dialog width and height when performing a page reload.
 
-## 20.4.48 (2023-02-01)
+## 20.4.53 (2023-03-07)
 
-### Tooltip
-
-#### Bug Fixes
-
-- `#I424071` - The issue of the Tooltip component throwing a script error when setting content as '${}' has been resolved.
-
-## 20.4.44 (2023-01-18)
-
 ### Dialog
@@ -42,5 +28,5 @@
 
-- `#I427261` - The Dialog component now closes properly when the escape key is pressed while the Rich Text Editor toolbar is extended and the Image Dialog is open.
+- `#I441169` - Now, the Dialog Component `ESC` key works properly.
 
-## 20.4.43 (2023-01-10)
+## 20.4.52 (2023-02-28)
 
@@ -51,12 +37,4 @@ ### Dialog
 
-- `#I422249` - Now, Removed the "aria-describedby" attribute from Dialog element.
+- `#I430348` - Fixed an issue where pressing the enter key triggered the button click event multiple times.
 
-## 20.4.40 (2022-12-28)
-
-### Popup
-
-#### Bug Fixes
-
-- `#I423129` - Now, when Rich Text Editor is placed inside the modal dialog the hyperlink quickToolbar popup is visible.
-
 ## 20.4.38 (2022-12-21)
@@ -63,0 +41,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 20.4.53
+*  version : 21.1.35
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@20.4.52",
+  "_id": "@syncfusion/ej2-popups@20.11.5",
   "_inBundle": false,
-  "_integrity": "sha512-SEZn3+UiVATLCui3zrrniQ3nPSUxjC47j/1P2rDbWpfAZz0TmpuZhrqL23HFTwsJ/as+sz+bpfmXPsepbSAQRQ==",
+  "_integrity": "sha512-+NcfYD+AihgZaO6YlV+TP6WIBH24Wr3vMqJXW/vd6jZCjDEw9FGcZ/uSLqC757IlgFj1uS1L2daGoewn0YYbAw==",
   "_location": "/@syncfusion/ej2-popups",
@@ -39,2 +39,3 @@ "_phantomChildren": {},
     "/@syncfusion/ej2-react-popups",
+    "/@syncfusion/ej2-ribbon",
     "/@syncfusion/ej2-richtexteditor",
@@ -46,6 +47,6 @@ "/@syncfusion/ej2-schedule",
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-popups/-/ej2-popups-20.4.52.tgz",
-  "_shasum": "52d0f0f61bfb70c73390ab043a405e149cc09bbf",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-popups/-/ej2-popups-20.11.5.tgz",
+  "_shasum": "0a6e71df1e9c07f077f6c4f62f2423f432729487",
   "_spec": "@syncfusion/ej2-popups@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -59,4 +60,4 @@ "name": "Syncfusion Inc."
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51",
-    "@syncfusion/ej2-buttons": "~20.4.53"
+    "@syncfusion/ej2-base": "~21.1.35",
+    "@syncfusion/ej2-buttons": "~21.1.35"
   },
@@ -96,4 +97,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "20.4.53",
+  "version": "21.1.35",
   "sideEffects": false
 }

src/dialog/dialog-model.d.ts

@@ -115,2 +115,9 @@ import { Component, Property, Event, Collection, L10n, 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, EventHandler, Draggable, extend } from '@syncfusion/ej2-base';import { BlazorDragEventArgs, SanitizeHtmlHelper, Browser } from '@syncfusion/ej2-base';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';import { Popup, PositionData, getZindexPartial } from '../popup/popup';import { PositionDataModel } from '../popup/popup-model';import { createResize, removeResize, setMinHeight, setMaxWidth, setMaxHeight } from '../common/resize';
     /**
+     * Enables or disables the persistence of the dialog's dimensions and position state between page reloads.
+     *
+     * @default false
+     */
+    enablePersistence?: boolean;
+
+    /**
      * Specifies the value that represents whether the close icon is shown in the dialog component.
@@ -117,0 +124,0 @@ *

src/dialog/dialog.d.ts

@@ -382,2 +382,8 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     /**
+     * Enables or disables the persistence of the dialog's dimensions and position state between page reloads.
+     *
+     * @default false
+     */
+    enablePersistence: boolean;
+    /**
      * Specifies the value that represents whether the close icon is shown in the dialog component.
@@ -664,2 +670,3 @@ *
     protected preRender(): void;
+    private updatePersistData;
     private isNumberValue;
@@ -744,3 +751,3 @@ private checkPositionData;
      */
-    protected getPersistData(): string;
+    getPersistData(): string;
     /**
@@ -747,0 +754,0 @@ * To destroy the widget

src/spinner/spinner.d.ts

@@ -13,3 +13,3 @@ export declare type createElementParams = (tag: string, prop?: {
   */
-export declare type SpinnerType = 'Material' | 'Fabric' | 'Bootstrap' | 'HighContrast' | 'Bootstrap4' | 'Tailwind' | 'Bootstrap5' | 'Fluent';
+export declare type SpinnerType = 'Material' | 'Material3' | 'Fabric' | 'Bootstrap' | 'HighContrast' | 'Bootstrap4' | 'Tailwind' | 'Bootstrap5' | 'Fluent';
 /**
@@ -16,0 +16,0 @@ * Function to change the Spinners in a page globally from application end.

src/spinner/spinner.js

 import { isNullOrUndefined, classList, createElement } from '@syncfusion/ej2-base';
 var globalTimeOut = {};
 var DEFT_MAT_WIDTH = 30;
+var DEFT_MAT3_WIDTH = 30;
 var DEFT_FAB_WIDTH = 30;
@@ -12,2 +13,3 @@ var DEFT_FLUENT_WIDTH = 30;
 var CLS_MATERIALSPIN = 'e-spin-material';
+var CLS_MATERIAL3SPIN = 'e-spin-material3';
 var CLS_FABRICSPIN = 'e-spin-fabric';
@@ -138,2 +140,15 @@ var CLS_FLUENTSPIN = 'e-spin-fluent';
  */
+function createMaterial3Spinner(container, radius, makeElement) {
+    var uniqueID = random_generator();
+    globalTimeOut["" + uniqueID] = { timeOut: 0, type: 'Material3', radius: radius };
+    create_material_element(container, uniqueID, makeElement, CLS_MATERIAL3SPIN);
+    mat_calculate_attributes(radius, container, 'Material3', CLS_MATERIAL3SPIN);
+}
+/**
+ *
+ * @param {HTMLElement} container - specifies the element
+ * @param {number} radius - specifies the radius
+ * @param {createElementParams} makeElement - specifies the element
+ * @returns {void}
+ */
 function createBootstrap4Spinner(container, radius, makeElement) {
@@ -253,2 +268,5 @@ var uniqueID = random_generator();
             break;
+        case 'Material3':
+            createMaterial3Spinner(innerContainer, radius, makeElement);
+            break;
         case 'Fabric':
@@ -448,2 +466,5 @@ createFabricSpinner(innerContainer, radius, makeElement);
             break;
+        case 'Material3':
+            defaultSize = DEFT_MAT3_WIDTH;
+            break;
         case 'Fabric':
@@ -605,8 +626,15 @@ defaultSize = DEFT_FAB_WIDTH;
     function updatePath(value, container) {
-        if ((!isNullOrUndefined(container.querySelector('svg.e-spin-material')))
-            && (!isNullOrUndefined(container.querySelector('svg.e-spin-material').querySelector('path.e-path-circle')))) {
-            var svg = container.querySelector('svg.e-spin-material');
-            var path = svg.querySelector('path.e-path-circle');
-            path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, value, max) + '');
-            path.setAttribute('transform', 'rotate(' + (rotate) + ' ' + diameter / 2 + ' ' + diameter / 2 + ')');
+        if (!isNullOrUndefined(container.querySelector('svg.e-spin-material')) || !isNullOrUndefined(container.querySelector('svg.e-spin-material3'))) {
+            var svg = void 0;
+            if (!isNullOrUndefined(container.querySelector('svg.e-spin-material')) && !isNullOrUndefined(container.querySelector('svg.e-spin-material').querySelector('path.e-path-circle'))) {
+                svg = container.querySelector('svg.e-spin-material');
+            }
+            else if (!isNullOrUndefined(container.querySelector('svg.e-spin-material3')) && !isNullOrUndefined(container.querySelector('svg.e-spin-material3').querySelector('path.e-path-circle'))) {
+                svg = container.querySelector('svg.e-spin-material3');
+            }
+            if (!isNullOrUndefined(svg)) {
+                var path = svg.querySelector('path.e-path-circle');
+                path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, value, max) + '');
+                path.setAttribute('transform', 'rotate(' + (rotate) + ' ' + diameter / 2 + ' ' + diameter / 2 + ')');
+            }
         }
@@ -634,3 +662,3 @@ }
     path.setAttribute('d', drawArc(diameter, strokeSize));
-    if (type === 'Material') {
+    if (type === 'Material' || type === 'Material3') {
         path.setAttribute('stroke-width', strokeSize + '');
@@ -805,2 +833,3 @@ path.setAttribute('stroke-dasharray', ((diameter - strokeSize) * Math.PI * 0.75) + '');
                 case 'Material':
+                case 'Material3':
                     // eslint-disable-next-line
@@ -807,0 +836,0 @@ isHide ? clearTimeout(globalTimeOut[id].timeOut) : startMatAnimate(inner, id, globalTimeOut[id].radius);

src/tooltip/tooltip-model.d.ts

@@ -132,2 +132,3 @@ 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';
      *  to know more about this property with demo.
+     * 
      * {% codeBlock src="tooltip/tippointerposition/index.md" %}{% endcodeBlock %}
@@ -143,2 +144,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 %}
@@ -155,2 +157,3 @@ * {% codeBlock src="tooltip/opensOn-api/index.ts" %}{% endcodeBlock %}
      *  to know more about this property with demo.
+     * 
      * {% codeBlock src="tooltip/mousetrail/index.md" %}{% endcodeBlock %}
@@ -167,2 +170,3 @@ * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      *  to know more about this property with demo.
+     * 
      * {% codeBlock src="tooltip/issticky/index.md" %}{% endcodeBlock %}
@@ -178,2 +182,3 @@ *
      *  to know more about this property with demo.
+     * 
      * {% codeBlock src="tooltip/animation/index.md" %}{% endcodeBlock %}
@@ -216,2 +221,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.
@@ -234,2 +249,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 %}
@@ -243,2 +259,3 @@ *
      * We can trigger `afterOpen` event after the Tooltip Component gets opened.
+     * 
      * {% codeBlock src="tooltip/afterOpen/index.md" %}{% endcodeBlock %}
@@ -252,2 +269,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 %}
@@ -261,2 +279,3 @@ *
      * We can trigger `afterClose` event when the Tooltip Component gets closed.
+     * 
      * {% codeBlock src="tooltip/afterClose/index.md" %}{% endcodeBlock %}
@@ -270,2 +289,3 @@ *
      * We can trigger `beforeCollision` event for every collision fit calculation.
+     * 
      * {% codeBlock src="tooltip/beforeCollision/index.md" %}{% endcodeBlock %}
@@ -282,3 +302,2 @@ *
      */
-    /* eslint-disable */
     created?: EmitType<Object>;
@@ -291,5 +310,4 @@
      */
-    /* eslint-disable */
     destroyed?: EmitType<Object>;
 
 }

src/tooltip/tooltip.d.ts

@@ -8,16 +8,160 @@ import { Component, ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
  */
-export declare type OpenMode = 'Auto' | 'Hover' | 'Click' | 'Focus' | 'Custom';
+export declare type OpenMode = 
 /**
+ * The tooltip opens automatically when the trigger element is hovered over.
+ */
+'Auto' | 
+/**
+ * The tooltip opens when the trigger element is hovered over.
+ */
+'Hover' | 
+/**
+ * The tooltip opens when the trigger element is clicked.
+ */
+'Click' | 
+/**
+ * The tooltip opens when the trigger element is focused.
+ */
+'Focus' | 
+/**
+ * The tooltip opens when the trigger element is triggered by a custom event.
+ */
+'Custom';
+/**
  * Applicable positions where the Tooltip can be displayed over specific target elements.
  */
-export declare type Position = 'TopLeft' | 'TopCenter' | 'TopRight' | 'BottomLeft' | 'BottomCenter' | 'BottomRight' | 'LeftTop' | 'LeftCenter' | 'LeftBottom' | 'RightTop' | 'RightCenter' | 'RightBottom';
+export declare type Position = 
 /**
+ * The tooltip is positioned at the top-left corner of the trigger element.
+ */
+'TopLeft' | 
+/**
+ *  The tooltip is positioned at the top-center of the trigger element.
+ */
+'TopCenter' | 
+/**
+ * The tooltip is positioned at the top-right corner of the trigger element.
+ */
+'TopRight' | 
+/**
+ * The tooltip is positioned at the bottom-left corner of the trigger element.
+ */
+'BottomLeft' | 
+/**
+ * The tooltip is positioned at the bottom-center of the trigger element.
+ */
+'BottomCenter' | 
+/**
+ * The tooltip is positioned at the bottom-right corner of the trigger element.
+ */
+'BottomRight' | 
+/**
+ * The tooltip is positioned at the left-top corner of the trigger element.
+ */
+'LeftTop' | 
+/**
+ * The tooltip is positioned at the left-center of the trigger element.
+ */
+'LeftCenter' | 
+/**
+ * The tooltip is positioned at the left-bottom corner of the trigger element.
+ */
+'LeftBottom' | 
+/**
+ * The tooltip is positioned at the right-top corner of the trigger element.
+ */
+'RightTop' | 
+/**
+ * The tooltip is positioned at the right-center of the trigger element.
+ */
+'RightCenter' | 
+/**
+ * The tooltip is positioned at the right-bottom corner of the trigger element.
+ */
+'RightBottom';
+/**
  * Applicable tip positions attached to the Tooltip.
  */
-export declare type TipPointerPosition = 'Auto' | 'Start' | 'Middle' | 'End';
+export declare type TipPointerPosition = 
 /**
+ * The tip pointer position is automatically calculated based on the available space.
+ */
+'Auto' | 
+/**
+ * The tip pointer is positioned at the start of the tooltip.
+ */
+'Start' | 
+/**
+ * The tip pointer is positioned at the middle of the tooltip.
+ */
+'Middle' | 
+/**
+ * The tip pointer is positioned at the end of the tooltip.
+ */
+'End';
+/**
  * Animation effects that are applicable for Tooltip.
  */
-export declare type Effect = 'FadeIn' | 'FadeOut' | 'FadeZoomIn' | 'FadeZoomOut' | 'FlipXDownIn' | 'FlipXDownOut' | 'FlipXUpIn' | 'FlipXUpOut' | 'FlipYLeftIn' | 'FlipYLeftOut' | 'FlipYRightIn' | 'FlipYRightOut' | 'ZoomIn' | 'ZoomOut' | 'None';
+export declare type Effect = 
 /**
+* A fade-in animation effect where the tooltip gradually increases in opacity from 0 to full.
+*/
+'FadeIn' | 
+/**
+* A fade-out animation effect where the tooltip gradually decreases in opacity from full to 0.
+*/
+'FadeOut' | 
+/**
+* A fade-in animation effect combined with a zoom-in effect.
+*/
+'FadeZoomIn' | 
+/**
+* A fade-out animation effect combined with a zoom-out effect.
+*/
+'FadeZoomOut' | 
+/**
+*  A flip-down animation effect where the tooltip starts upside down and flips down to become fully visible.
+*/
+'FlipXDownIn' | 
+/**
+* A flip-down animation effect where the tooltip starts fully visible and flips down to become invisible.
+*/
+'FlipXDownOut' | 
+/**
+* A flip-up animation effect where the tooltip starts upside down and flips up to become fully visible.
+*/
+'FlipXUpIn' | 
+/**
+* A flip-up animation effect where the tooltip starts fully visible and flips up to become invisible.
+*/
+'FlipXUpOut' | 
+/**
+* A flip-left animation effect where the tooltip starts from the right side and flips left to become fully visible.
+*/
+'FlipYLeftIn' | 
+/**
+* A flip-left animation effect where the tooltip starts from the left side and flips left to become invisible.
+*/
+'FlipYLeftOut' | 
+/**
+* A flip-right animation effect where the tooltip starts from the left side and flips right to become fully visible.
+*/
+'FlipYRightIn' | 
+/**
+* A flip-right animation effect where the tooltip starts from the right side and flips right to become invisible.
+*/
+'FlipYRightOut' | 
+/**
+*  zoom-in animation effect where the tooltip starts small and gradually grows in size to become fully visible.
+*/
+'ZoomIn' | 
+/**
+* A zoom-out animation effect where the tooltip starts full size and gradually decreases in size to become invisible.
+*/
+'ZoomOut' | 
+/**
+* No animation effect, the tooltip simply appears or disappears without any animation.
+*/
+'None';
+/**
  * Interface for Tooltip event arguments.
@@ -209,2 +353,3 @@ */
      *  to know more about this property with demo.
+     *
      * {% codeBlock src="tooltip/tippointerposition/index.md" %}{% endcodeBlock %}
@@ -219,2 +364,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 %}
@@ -230,2 +376,3 @@ * {% codeBlock src="tooltip/opensOn-api/index.ts" %}{% endcodeBlock %}
      *  to know more about this property with demo.
+     *
      * {% codeBlock src="tooltip/mousetrail/index.md" %}{% endcodeBlock %}
@@ -241,2 +388,3 @@ * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      *  to know more about this property with demo.
+     *
      * {% codeBlock src="tooltip/issticky/index.md" %}{% endcodeBlock %}
@@ -251,2 +399,3 @@ *
      *  to know more about this property with demo.
+     *
      * {% codeBlock src="tooltip/animation/index.md" %}{% endcodeBlock %}
@@ -284,2 +433,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.
@@ -301,2 +461,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 %}
@@ -309,2 +470,3 @@ *
      * We can trigger `afterOpen` event after the Tooltip Component gets opened.
+     *
      * {% codeBlock src="tooltip/afterOpen/index.md" %}{% endcodeBlock %}
@@ -317,2 +479,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 %}
@@ -325,2 +488,3 @@ *
      * We can trigger `afterClose` event when the Tooltip Component gets closed.
+     *
      * {% codeBlock src="tooltip/afterClose/index.md" %}{% endcodeBlock %}
@@ -333,2 +497,3 @@ *
      * We can trigger `beforeCollision` event for every collision fit calculation.
+     *
      * {% codeBlock src="tooltip/beforeCollision/index.md" %}{% endcodeBlock %}
@@ -374,4 +539,4 @@ *
     private renderCloseIcon;
-    private addDescribedBy;
-    private removeDescribedBy;
+    private addDataTooltipId;
+    private removeDataTooltipId;
     private tapHoldHandler;
@@ -378,0 +543,0 @@ private touchEndHandler;

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 () {
@@ -729,3 +713,2 @@ if (_this.mouseTrail) {
             clearTimeout(this.showTimer);
-            // eslint-disable-next-line
             var hide = function () {
@@ -774,3 +757,2 @@ if (_this.closeDelay && _this.tooltipEle && _this.isTooltipOpen) {
         this.isHidden = true;
-        // eslint-disable-next-line
         var closeAnimation = {
@@ -795,3 +777,3 @@ name: hideAnimation.effect,
         }
-        this.removeDescribedBy(target);
+        this.removeDataTooltipId(target);
     };
@@ -984,3 +966,2 @@ Tooltip.prototype.clear = function () {
                 var target = targetList_2[_i];
-                target.setAttribute('tabindex', '0');
                 EventHandler.add(target, 'focus', this.targetHover, this);
@@ -1010,3 +991,2 @@ }
             }
-            target.setAttribute("tabindex", "0");
         }
@@ -1059,3 +1039,2 @@ };
                 var target = targetList_3[_i];
-                target.removeAttribute('tabindex');
                 EventHandler.remove(target, 'focus', this.targetHover);
@@ -1332,2 +1311,5 @@ }
     __decorate([
+        Property('')
+    ], Tooltip.prototype, "htmlAttributes", void 0);
+    __decorate([
         Event()
@@ -1334,0 +1316,0 @@ ], Tooltip.prototype, "beforeRender", void 0);

No alert changes

Improved metrics

Total package byte prevSize

3554526

increased by0.15%

Worsened metrics

Number of package files

324

decreased by-1.82%

Lines of code

49046

decreased by-0.03%

Dependency changes

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

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

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

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

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

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

• Updated@syncfusion/ej2-base@~21.1.35

• Updated@syncfusion/ej2-buttons@~21.1.35