@syncfusion/ej2-inputs 21.2.9 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.9
+*  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.8",
+  "_id": "@syncfusion/ej2-inputs@18.74.0",
   "_inBundle": false,
-  "_integrity": "sha512-02NHXJ1oyYe+Xo8nAJLjd6420EQWAyHivfz8n+kNuvV1uLWJGzRXCL9gNydLzOSmEEZLhaqdLCsRizYLXW3x9Q==",
+  "_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.8.tgz",
-  "_shasum": "1979ac5dcfd13ce9c0ed6408411791b297b3b444",
+  "_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.9",
-    "@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.9",
+  "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

@@ -1186,23 +1186,12 @@ var ColorPicker = /** @class */ (function (_super) {
     };
     ColorPicker.prototype.paletteKeyDown = function (e) {
         var target = e.target;
+        if (!target.classList.contains(PALETTES)) {
+            return;
+        }
         var selectedEle;
         var idx;
         var tiles = [].slice.call(selectAll('.' + TILE, target));
-        if ((target.classList.contains('e-palette') || target.classList.contains('e-tile')) && (e.keyCode === 9 && !e.shiftKey)) {
-            if (this.modeSwitcher || this.showButtons) {
-                this.getPopupEle().querySelector('.e-btn').focus();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-        else if ((target.classList.contains('e-palette') || target.classList.contains('e-tile')) && (e.keyCode === 9 && e.shiftKey)) {
-            if (this.splitBtn) {
-                this.splitBtn.element.focus();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
         var prevSelectedEle = (tiles.filter(function (tile) { return tile.classList.contains('e-selected'); })).pop();
         switch (!e.altKey && e.keyCode) {
             case 39:

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) {