@syncfusion/ej2-inputs 21.2.8 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.8
+*  version : 22.1.34
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@21.2.6",
+  "_id": "@syncfusion/ej2-inputs@18.74.0",
   "_inBundle": false,
-  "_integrity": "sha512-XylzaJl07b20IRO3VyzzUsJAwybdvgfdOTTnqKoamMnEJn9osvj/OMXxlt6PGMBCVFo9jITu/zhUzP7kwWSgrA==",
+  "_integrity": "sha512-x9jghchba/Xily/58EMO4f9+dcFmmX4AufdAPHex+2tEM2GyPU2bCu+Ol0yGQ/bNA65VtXo0pYUeQr/Wh8oh6w==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-21.2.6.tgz",
-  "_shasum": "447eccfafe9700f79647961396e57e4538de24bb",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-inputs/-/ej2-inputs-18.74.0.tgz",
+  "_shasum": "dff7895481b1426f52f2297c62534349625f6d84",
   "_spec": "@syncfusion/ej2-inputs@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -48,10 +48,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-buttons": "~21.2.6",
-    "@syncfusion/ej2-popups": "~21.2.4",
-    "@syncfusion/ej2-splitbuttons": "~21.2.5"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.34",
+    "@syncfusion/ej2-popups": "~22.1.34",
+    "@syncfusion/ej2-splitbuttons": "~22.1.34"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
@@ -119,7 +119,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "21.2.8",
+  "version": "22.1.34",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/color-picker/color-picker.d.ts

@@ -352,6 +352,7 @@ export interface ColorPickerEventArgs extends BaseEventArgs {
         hex: string;
         rgba: string;
     };
+    value?: string;
 }
 /**
  * Interface for before change event.

package/src/color-picker/color-picker.js

@@ -383,7 +383,7 @@ var ColorPicker = /** @class */ (function (_super) {
         hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));
         var dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });
         hsvContainer.appendChild(dragHandler);
-        if (this.value === null) {
+        if (this.value === null || this.value === '') {
             this.value = '#008000ff';
         }
         this.rgb = this.hexToRgb(this.value);
@@ -1734,6 +1734,10 @@ var ColorPicker = /** @class */ (function (_super) {
                     preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(newProp.value));
                 }
             }
+            else if (this.noColor && this.mode === 'Palette' && this.value === '') {
+                var preview = this.splitBtn && select('.' + SPLITPREVIEW, this.splitBtn.element);
+                preview.style.backgroundColor = '';
+            }
             else {
                 this.value = oldProp.value;
             }

package/src/form-validator/form-validator.js

@@ -20,7 +20,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { selectAll, select, createElement, Base, detach } from '@syncfusion/ej2-base';
 import { extend, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, Event, onIntlChange } from '@syncfusion/ej2-base';
-import { L10n } from '@syncfusion/ej2-base';
+import { Internationalization, L10n } from '@syncfusion/ej2-base';
 /**
  * global declarations
  */
@@ -668,7 +668,17 @@ var FormValidator = /** @class */ (function (_super) {
             this.customPlacement.call(this, this.inputElement, errorElement);
         }
         else {
-            this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling);
+            var inputParent = this.inputElement.parentElement;
+            var grandParent = inputParent.parentElement;
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                grandParent.insertBefore(errorElement, inputParent.nextSibling);
+            }
+            else if (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper')) {
+                grandParent.parentElement.insertBefore(errorElement, grandParent.nextSibling);
+            }
+            else {
+                inputParent.insertBefore(errorElement, this.inputElement.nextSibling);
+            }
         }
         errorElement.style.display = 'block';
         this.getErrorElement(name);
@@ -763,7 +773,15 @@ var FormValidator = /** @class */ (function (_super) {
             return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];
         },
         date: function (option) {
-            return !isNaN(new Date(option.value).getTime());
+            if (!isNullOrUndefined(option.param) && (typeof (option.param) === 'string' && option.param !== '')) {
+                var globalize = new Internationalization;
+                var dateOptions = { format: option.param.toString(), type: 'dateTime', skeleton: 'yMd' };
+                var dateValue = globalize.parseDate(option.value, dateOptions);
+                return (!isNullOrUndefined(dateValue) && dateValue instanceof Date && !isNaN(+dateValue));
+            }
+            else {
+                return !isNaN(new Date(option.value).getTime());
+            }
         },
         max: function (option) {
             if (!isNaN(Number(option.value))) {

package/src/input/input.js

@@ -55,14 +55,14 @@ export var Input;
         }
         bindInitialEvent(args);
         if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) &&
-            args.properties.showClearButton && args.element.tagName !== 'TEXTAREA') {
+            args.properties.showClearButton) {
             setClearButton(args.properties.showClearButton, args.element, inputObject, true, makeElement);
             inputObject.clearButton.setAttribute('role', 'button');
             if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {
                 addClass([inputObject.container], CLASSNAMES.INPUTGROUP);
             }
         }
-        if (!isNullOrUndefined(args.buttons) && args.element.tagName !== 'TEXTAREA') {
+        if (!isNullOrUndefined(args.buttons)) {
             for (var i = 0; i < args.buttons.length; i++) {
                 inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container, makeElement));
             }
@@ -86,9 +86,11 @@ export var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.add('e-input-focus');
             }
-            setTimeout(function () {
-                Input.calculateWidth(args.element, parent);
-            }, 80);
+            if (args.floatLabelType === 'Auto') {
+                setTimeout(function () {
+                    Input.calculateWidth(args.element, parent);
+                }, 80);
+            }
         });
         args.element.addEventListener('blur', function () {
             var parent = getParentNode(this);
@@ -96,9 +98,11 @@ export var Input;
                 || parent.classList.contains('e-filled')) {
                 parent.classList.remove('e-input-focus');
             }
-            setTimeout(function () {
-                Input.calculateWidth(args.element, parent);
-            }, 80);
+            if (args.floatLabelType === 'Auto' && args.element.value === '') {
+                setTimeout(function () {
+                    Input.calculateWidth(args.element, parent);
+                }, 80);
+            }
         });
         args.element.addEventListener('input', function () {
             checkInputValue(floatType, args.element);
@@ -304,7 +308,7 @@ export var Input;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     function wireClearBtnEvents(element, button, container) {
-        if (!isNullOrUndefined(button) && (isBindClearAction === undefined || isBindClearAction)) {
+        if (isBindClearAction === undefined || isBindClearAction) {
             button.addEventListener('click', function (event) {
                 if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {
                     event.preventDefault();
@@ -385,7 +389,9 @@ export var Input;
      */
     function setValue(value, element, floatLabelType, clearButton) {
         element.value = value;
-        calculateWidth(element, element.parentElement);
+        if (floatLabelType === 'Auto' && value === '') {
+            calculateWidth(element, element.parentElement);
+        }
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {
             validateLabel(element, floatLabelType);
         }

package/src/numerictextbox/numerictextbox.js

@@ -1071,8 +1071,12 @@ var NumericTextBox = /** @class */ (function (_super) {
         event.stopPropagation();
         clearInterval(this.timeOut);
         this.isCalled = false;
-        EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);
-        EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);
+        if (this.spinUp) {
+            EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);
+        }
+        if (this.spinDown) {
+            EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);
+        }
     };
     /**
      * Increments the NumericTextBox value with the specified step value.

package/src/rating/rating-model.d.ts

@@ -1,4 +1,4 @@
-import { addClass, Event, attributes, BaseEventArgs, compile, Component, EmitType, EventHandler, getUniqueID, INotifyPropertyChanged, select, Browser } from '@syncfusion/ej2-base';import { isNullOrUndefined, KeyboardEventArgs, KeyboardEvents, MouseEventArgs, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tooltip } from '@syncfusion/ej2-popups';
+import { addClass, Event, attributes, BaseEventArgs, compile, Component, EmitType, EventHandler, getUniqueID, INotifyPropertyChanged, select, Browser, append } from '@syncfusion/ej2-base';import { isNullOrUndefined, KeyboardEventArgs, KeyboardEvents, MouseEventArgs, NotifyPropertyChanges, Property, remove, removeClass, initializeCSPTemplate } from '@syncfusion/ej2-base';import { Tooltip } from '@syncfusion/ej2-popups';
 import {LabelPosition,PrecisionType,RatingItemEventArgs,RatingHoverEventArgs,RatingChangedEventArgs} from "./rating";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -10,9 +10,9 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines whether to show or hide the reset button in a rating component.
      * When set to "true", the reset button will be visible to the user, and they will be able to click it to reset the rating value to its default value.
-     * 
+     *
      * {% codeBlock src='rating/allowReset/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @default false
      */
     allowReset?: boolean;
@@ -38,8 +38,9 @@ export interface RatingModel extends ComponentModel{
      * Defines the template that defines the appearance of each un-rated item in a rating component.
      *
      * @default ''
+     * @aspType string
      */
-    emptyTemplate?: string;
+    emptyTemplate?: string | Function;
 
     /**
      * Defines whether to add animation (to provide visual feedback to the user) when an item in a rating component is hovered.
@@ -60,12 +61,13 @@ export interface RatingModel extends ComponentModel{
 
     /**
      * Defines the template that defines the appearance of each rated item in a rating component.
-     * 
+     *
      * {% codeBlock src='rating/fullTemplate/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @default ''
+     * @aspType string
      */
-    fullTemplate?: string;
+    fullTemplate?: string | Function;
 
     /**
      * Defines the specific number of items (symbols) in rating component.
@@ -84,9 +86,9 @@ export interface RatingModel extends ComponentModel{
      * * Bottom
      * * Left
      * * Right
-     * 
+     *
      * {% codeBlock src='rating/labelPosition/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @isenumeration true
      * @default LabelPosition.Right
      * @asptype LabelPosition
@@ -95,12 +97,13 @@ export interface RatingModel extends ComponentModel{
 
     /**
      * Defines the template that used as label over default label of the rating. The current value of rating passed as context to build the content.
-     * 
+     *
      * {% codeBlock src='rating/labelTemplate/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @default ''
+     * @aspType string
      */
-    labelTemplate?: string;
+    labelTemplate?: string | Function;
 
     /**
      * Defines the value that specifies minimum rating that a user can select.
@@ -120,9 +123,9 @@ export interface RatingModel extends ComponentModel{
      * * Half
      * * Quarter
      * * Exact
-     * 
+     *
      * {% codeBlock src='rating/precision/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @isenumeration true
      * @default PrecisionType.Full
      * @asptype PrecisionType
@@ -140,9 +143,9 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines a value that specifies whether to display a label that shows the current value of a rating.
      * When set to "true", a label will be displayed that shows the current value of the rating; otherwise false.
-     * 
+     *
      * {% codeBlock src='rating/showLabel/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @default false
      */
     showLabel?: boolean;
@@ -158,21 +161,22 @@ export interface RatingModel extends ComponentModel{
     /**
      * Defines the template that used as tooltip content over default tooltip content of the rating.
      * The current value of rating passed as context to build the content.
-     * 
+     *
      * {% codeBlock src='rating/tooltipTemplate/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @default ''
+     * @aspType string
      */
-    tooltipTemplate?: string;
+    tooltipTemplate?: string | Function;
 
     /**
      * Defines the current rating value which used to display and update the rating selected by the user.
      * Based on "PrecisionType", users can select ratings with varying levels of precision.
      * The "value" is a decimal value that ranges from the minimum value to the items count,
      * as specified by the "min" and "itemsCount" properties of the rating.
-     * 
+     *
      * {% codeBlock src='rating/value/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @default 0.0
      * @aspType double
      */
@@ -188,9 +192,9 @@ export interface RatingModel extends ComponentModel{
 
     /**
      * Event callback that is raised before rendering each item.
-     * 
+     *
      * {% codeBlock src='rating/beforeItemRenderEvent/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @event beforeItemRender
      */
     beforeItemRender?: EmitType<RatingItemEventArgs>;
@@ -204,18 +208,18 @@ export interface RatingModel extends ComponentModel{
 
     /**
      * Event callback that is raised when a user hovers over an item.
-     * 
+     *
      * {% codeBlock src='rating/onItemHoverEvent/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @event onItemHover
      */
     onItemHover?: EmitType<RatingHoverEventArgs>;
 
     /**
      * Event callback that is raised when the value is changed.
-     * 
+     *
      * {% codeBlock src='rating/valueChangedEvent/index.md' %}{% endcodeBlock %}
-     * 
+     *
      * @event valueChanged
      */
     valueChanged?: EmitType<RatingChangedEventArgs>;

package/src/rating/rating.d.ts

@@ -137,8 +137,9 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * Defines the template that defines the appearance of each un-rated item in a rating component.
      *
      * @default ''
+     * @aspType string
      */
-    emptyTemplate: string;
+    emptyTemplate: string | Function;
     /**
      * Defines whether to add animation (to provide visual feedback to the user) when an item in a rating component is hovered.
      * When set to "true", an animation will be added when the user hovers their cursor over an item in the rating component.
@@ -160,8 +161,9 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * {% codeBlock src='rating/fullTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @aspType string
      */
-    fullTemplate: string;
+    fullTemplate: string | Function;
     /**
      * Defines the specific number of items (symbols) in rating component.
      * The rating component typically consists of a number of items, such as stars or other symbols, that represent the rating value.
@@ -192,8 +194,9 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * {% codeBlock src='rating/labelTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @aspType string
      */
-    labelTemplate: string;
+    labelTemplate: string | Function;
     /**
      * Defines the value that specifies minimum rating that a user can select.
      * The value is set to 0, which means that the minimum possible rating is 0.
@@ -249,8 +252,9 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * {% codeBlock src='rating/tooltipTemplate/index.md' %}{% endcodeBlock %}
      *
      * @default ''
+     * @aspType string
      */
-    tooltipTemplate: string;
+    tooltipTemplate: string | Function;
     /**
      * Defines the current rating value which used to display and update the rating selected by the user.
      * Based on "PrecisionType", users can select ratings with varying levels of precision.

package/src/rating/rating.js

@@ -17,8 +17,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { addClass, Event, attributes, compile, Component, EventHandler, getUniqueID, select, Browser } from '@syncfusion/ej2-base';
-import { isNullOrUndefined, KeyboardEvents, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';
+import { addClass, Event, attributes, compile, Component, EventHandler, getUniqueID, select, Browser, append } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, KeyboardEvents, NotifyPropertyChanges, Property, remove, removeClass, initializeCSPTemplate } from '@syncfusion/ej2-base';
 import { Tooltip } from '@syncfusion/ej2-popups';
 var ICONCSS = 'e-rating-icon e-icons e-star-filled';
 var ITEMLIST = 'e-rating-item-list';
@@ -196,8 +196,8 @@ var Rating = /** @class */ (function (_super) {
             return;
         }
         var previousValue = this.currentValue;
-        this.updateCurrentValue(currValue);
         this.triggerChange(e, currValue);
+        this.updateCurrentValue(currValue);
         if (this.showTooltip) {
             if (element) {
                 if (Math.ceil(currValue) !== Math.ceil(previousValue)) {
@@ -241,11 +241,11 @@ var Rating = /** @class */ (function (_super) {
         }
         if (this.fullTemplate && val === 1) {
             spanEle.classList.add(FULLTEMPLATE);
-            spanEle.append(this.fullTemplateFunction({ index: index, ratingValue: val }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+            append(this.fullTemplateFunction({ index: index, ratingValue: val }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate), spanEle);
         }
         else if (this.emptyTemplate) {
             spanEle.classList.add(EMPTYTEMPLATE);
-            spanEle.append(this.emptyTemplateFunction({ index: index, ratingValue: val }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate'), this.isStringTemplate)[0]);
+            append(this.emptyTemplateFunction({ index: index, ratingValue: val }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate'), this.isStringTemplate), spanEle);
         }
         else {
             addClass([spanEle], ICONCSS.split(' '));
@@ -255,7 +255,7 @@ var Rating = /** @class */ (function (_super) {
         spanEle.classList.remove(FULLTEMPLATE, EMPTYTEMPLATE);
         removeClass([spanEle], ICONCSS.split(' '));
         if (spanEle.firstChild) {
-            spanEle.removeChild(spanEle.firstChild);
+            spanEle.innerHTML = '';
         }
     };
     Rating.prototype.updateTooltip = function () {
@@ -340,7 +340,7 @@ var Rating = /** @class */ (function (_super) {
             }
             this.removeItemContent(spanEle);
             spanEle.classList.add(FULLTEMPLATE);
-            spanEle.append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate' + index), this.isStringTemplate)[0]);
+            append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate' + index), this.isStringTemplate), spanEle);
         }
         else if (this.emptyTemplate) {
             if (!this.isReact && spanEle.classList.contains(EMPTYTEMPLATE)) {
@@ -348,7 +348,7 @@ var Rating = /** @class */ (function (_super) {
             }
             this.removeItemContent(spanEle);
             spanEle.classList.add(EMPTYTEMPLATE);
-            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate' + index), this.isStringTemplate)[0]);
+            append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate' + index), this.isStringTemplate), spanEle);
         }
         else {
             this.removeItemContent(spanEle);
@@ -360,25 +360,32 @@ var Rating = /** @class */ (function (_super) {
             if (this.isReact) {
                 this.clearTemplate(['ratingTooltipTemplate']);
             }
-            var content = void 0;
+            var content_1;
             if (this.tooltipTemplate) {
+                content_1 = this.createElement('span', { className: 'e-rating-tooltip-content' });
                 var templateFunction = this.getTemplateString(this.tooltipTemplate);
-                content = templateFunction({ value: this.currentValue }, this, 'ratingTooltipTemplate', (this.element.id + 'tooltipTemplate'), this.isStringTemplate)[0];
+                append(templateFunction({ value: this.currentValue }, this, 'ratingTooltipTemplate', (this.element.id + 'tooltipTemplate'), this.isStringTemplate), content_1);
+                this.tooltipObj.setProperties({ content: content_1 }, isChange);
             }
             else {
-                content = this.currentValue.toString();
+                content_1 = this.currentValue.toString();
+                this.tooltipObj.setProperties({ content: initializeCSPTemplate(function () { return content_1; }) }, isChange);
             }
-            this.tooltipObj.setProperties({ content: content }, isChange);
             this.renderReactTemplates();
         }
     };
     Rating.prototype.getTemplateString = function (template) {
         var stringContent = '';
         try {
-            var tempEle = select(template);
-            if (tempEle) {
-                //Return innerHTML incase of jsrenderer script else outerHTML
-                stringContent = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+            if (typeof template !== 'function') {
+                var tempEle = select(template);
+                if (tempEle) {
+                    //Return innerHTML incase of jsrenderer script else outerHTML
+                    stringContent = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+                }
+                else {
+                    stringContent = template;
+                }
             }
             else {
                 stringContent = template;
@@ -409,10 +416,10 @@ var Rating = /** @class */ (function (_super) {
                     this.clearTemplate(['ratingLabelTemplate']);
                 }
                 if (this.spanLabel.firstChild) {
-                    this.spanLabel.removeChild(this.spanLabel.firstChild);
+                    this.spanLabel.innerHTML = '';
                 }
                 var templateFunction = this.getTemplateString(this.labelTemplate);
-                this.spanLabel.append(templateFunction({ value: this.currentValue }, this, 'ratingLabelTemplate', (this.element.id + 'labelTemplate'), this.isStringTemplate)[0]);
+                append(templateFunction({ value: this.currentValue }, this, 'ratingLabelTemplate', (this.element.id + 'labelTemplate'), this.isStringTemplate), this.spanLabel);
                 this.renderReactTemplates();
             }
             else {
@@ -500,7 +507,7 @@ var Rating = /** @class */ (function (_super) {
         if (this.showTooltip) {
             if (!this.tooltipOpen) {
                 this.updateTooltipContent(false);
-                this.tooltipObj.open(element); //eslint-disable-line
+                this.tooltipObj.open(element);
                 this.tooltipOpen = true;
             }
             else if (isChange) {

package/src/slider/slider.d.ts

@@ -231,84 +231,49 @@ export declare class TooltipData extends ChildProperty<TooltipData> {
 }
 /**
  * Ticks Placement.
+ * ```props
+ * Before :- Ticks are placed in the top of the horizontal slider bar or at the left of the vertical slider bar.
+ * After :- Ticks are placed in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
+ * Both :- Ticks are placed on the both side of the slider bar.
+ * None :- Ticks are not shown.
+ * ```
  */
-export declare type Placement = 
-/**
-* Ticks are placed in the top of the horizontal slider bar or at the left of the vertical slider bar.
-*/
-'Before' | 
-/**
-* Ticks are placed in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
-*/
-'After' | 
-/**
-* Ticks are placed on the both side of the slider bar.
-*/
-'Both' | 
-/**
-* Ticks are not shown.
-*/
-'None';
+export declare type Placement = 'Before' | 'After' | 'Both' | 'None';
 /**
  * Tooltip Placement.
+ * ```props
+ * Before :- Tooltip is shown in the top of the horizontal slider bar or at the left of the vertical slider bar.
+ * After :- Tooltip is shown in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
+ * ```
  */
-export declare type TooltipPlacement = 
-/**
-* Tooltip is shown in the top of the horizontal slider bar or at the left of the vertical slider bar.
-*/
-'Before' | 
-/**
-* Tooltip is shown in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
-*/
-'After';
+export declare type TooltipPlacement = 'Before' | 'After';
 /**
  * Tooltip ShowOn.
+ * ```props
+ * Focus :- Tooltip is shown while focusing the Slider handle.
+ * Hover :- Tooltip is shown while hovering the Slider handle.
+ * Always :- Tooltip is shown always.
+ * Auto :- Tooltip is shown while hovering the Slider handle in desktop and tap and hold in touch devices.
+ * ```
  */
-export declare type TooltipShowOn = 
-/**
-* Tooltip is shown while focusing the Slider handle.
-*/
-'Focus' | 
-/**
-* Tooltip is shown while hovering the Slider handle.
-*/
-'Hover' | 
-/**
-* Tooltip is shown always.
-*/
-'Always' | 
-/**
-* Tooltip is shown while hovering the Slider handle in desktop and tap and hold in touch devices.
-*/
-'Auto';
+export declare type TooltipShowOn = 'Focus' | 'Hover' | 'Always' | 'Auto';
 /**
  * Slider type.
+ * ```props
+ * Default :- Allows to select a single value in the Slider.
+ * MinRange :- Allows to select a single value in the Slider, it display’s a shadow from the start to the current value.
+ * Range :- Allows to select a range of values in the Slider.
+ * ```
  */
-export declare type SliderType = 
-/**
-* Allows to select a single value in the Slider.
-*/
-'Default' | 
-/**
-* Allows to select a single value in the Slider, it display’s a shadow from the start to the current value.
-*/
-'MinRange' | 
-/**
-* Allows to select a range of values in the Slider.
-*/
-'Range';
+export declare type SliderType = 'Default' | 'MinRange' | 'Range';
 /**
  * Slider orientation.
+ * ```props
+ * Horizontal :- Renders the slider in horizontal orientation.
+ * Vertical :- Renders the slider in vertical orientation.
+ * ```
  */
-export declare type SliderOrientation = 
-/**
-* Renders the slider in horizontal orientation.
-*/
-'Horizontal' | 
-/**
-* Renders the slider in vertical orientation.
-*/
-'Vertical';
+export declare type SliderOrientation = 'Horizontal' | 'Vertical';
 /**
  * The Slider component allows the user to select a value or range
  * of values in-between a min and max range, by dragging the handle over the slider bar.
@@ -361,6 +326,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private previousChanged;
     private repeatInterval;
     private isMaterial;
+    private isMaterial3;
     private isBootstrap;
     private isBootstrap4;
     private isTailwind;