@syncfusion/ej2-inputs
Version:
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.
1,099 lines • 138 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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 { Component, EventHandler, Property, Event, Complex, Collection } from '@syncfusion/ej2-base';
import { L10n, Internationalization } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';
import { attributes, addClass, removeClass, setStyleAttribute, detach, closest } from '@syncfusion/ej2-base';
import { isNullOrUndefined, formatUnit, Browser, SanitizeHtmlHelper, initializeCSPTemplate } from '@syncfusion/ej2-base';
import { Tooltip, getZindexPartial } from '@syncfusion/ej2-popups';
/**
* Configures the ticks data of the Slider.
*/
var TicksData = /** @class */ (function (_super) {
__extends(TicksData, _super);
function TicksData() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('None')
], TicksData.prototype, "placement", void 0);
__decorate([
Property(10)
], TicksData.prototype, "largeStep", void 0);
__decorate([
Property(1)
], TicksData.prototype, "smallStep", void 0);
__decorate([
Property(false)
], TicksData.prototype, "showSmallTicks", void 0);
__decorate([
Property(null)
], TicksData.prototype, "format", void 0);
return TicksData;
}(ChildProperty));
export { TicksData };
/**
* It illustrates the color track data in slider.
* {% codeBlock src='slider/colorrange/index.md' %}{% endcodeBlock %}
*/
var ColorRangeData = /** @class */ (function (_super) {
__extends(ColorRangeData, _super);
function ColorRangeData() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], ColorRangeData.prototype, "color", void 0);
__decorate([
Property(null)
], ColorRangeData.prototype, "start", void 0);
__decorate([
Property(null)
], ColorRangeData.prototype, "end", void 0);
return ColorRangeData;
}(ChildProperty));
export { ColorRangeData };
/**
* It illustrates the limit data in slider.
* {% codeBlock src='slider/limits/index.md' %}{% endcodeBlock %}
*/
var LimitData = /** @class */ (function (_super) {
__extends(LimitData, _super);
function LimitData() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], LimitData.prototype, "enabled", void 0);
__decorate([
Property(null)
], LimitData.prototype, "minStart", void 0);
__decorate([
Property(null)
], LimitData.prototype, "minEnd", void 0);
__decorate([
Property(null)
], LimitData.prototype, "maxStart", void 0);
__decorate([
Property(null)
], LimitData.prototype, "maxEnd", void 0);
__decorate([
Property(false)
], LimitData.prototype, "startHandleFixed", void 0);
__decorate([
Property(false)
], LimitData.prototype, "endHandleFixed", void 0);
return LimitData;
}(ChildProperty));
export { LimitData };
/**
* It illustrates the tooltip data in slider.
*/
var TooltipData = /** @class */ (function (_super) {
__extends(TooltipData, _super);
function TooltipData() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], TooltipData.prototype, "cssClass", void 0);
__decorate([
Property('Before')
], TooltipData.prototype, "placement", void 0);
__decorate([
Property('Focus')
], TooltipData.prototype, "showOn", void 0);
__decorate([
Property(false)
], TooltipData.prototype, "isVisible", void 0);
__decorate([
Property(null)
], TooltipData.prototype, "format", void 0);
return TooltipData;
}(ChildProperty));
export { TooltipData };
var bootstrapTooltipOffset = 6;
var bootstrap4TooltipOffset = 3;
var tolerance = 1e-10;
var classNames = {
root: 'e-slider',
rtl: 'e-rtl',
sliderHiddenInput: 'e-slider-input',
controlWrapper: 'e-control-wrapper',
sliderHandle: 'e-handle',
rangeBar: 'e-range',
sliderButton: 'e-slider-button',
firstButton: 'e-first-button',
secondButton: 'e-second-button',
scale: 'e-scale',
tick: 'e-tick',
large: 'e-large',
tickValue: 'e-tick-value',
sliderTooltip: 'e-slider-tooltip',
sliderHover: 'e-slider-hover',
sliderFirstHandle: 'e-handle-first',
sliderSecondHandle: 'e-handle-second',
sliderDisabled: 'e-disabled',
sliderContainer: 'e-slider-container',
horizontalTooltipBefore: 'e-slider-horizontal-before',
horizontalTooltipAfter: 'e-slider-horizontal-after',
verticalTooltipBefore: 'e-slider-vertical-before',
verticalTooltipAfter: 'e-slider-vertical-after',
materialTooltip: 'e-material-tooltip',
materialTooltipOpen: 'e-material-tooltip-open',
materialTooltipActive: 'e-tooltip-active',
materialSlider: 'e-material-slider',
sliderTrack: 'e-slider-track',
sliderHorizantalColor: 'e-slider-horizantal-color',
sliderVerticalColor: 'e-slider-vertical-color',
sliderHandleFocused: 'e-handle-focused',
verticalSlider: 'e-vertical',
horizontalSlider: 'e-horizontal',
sliderHandleStart: 'e-handle-start',
sliderTooltipStart: 'e-material-tooltip-start',
sliderTabHandle: 'e-tab-handle',
sliderButtonIcon: 'e-button-icon',
sliderSmallSize: 'e-small-size',
sliderTickPosition: 'e-tick-pos',
sliderFirstTick: 'e-first-tick',
sliderLastTick: 'e-last-tick',
sliderButtonClass: 'e-slider-btn',
sliderTooltipWrapper: 'e-tooltip-wrap',
sliderTabTrack: 'e-tab-track',
sliderTabRange: 'e-tab-range',
sliderActiveHandle: 'e-handle-active',
sliderMaterialHandle: 'e-material-handle',
sliderMaterialRange: 'e-material-range',
sliderMaterialDefault: 'e-material-default',
materialTooltipShow: 'e-material-tooltip-show',
materialTooltipHide: 'e-material-tooltip-hide',
readonly: 'e-read-only',
limits: 'e-limits',
limitBarDefault: 'e-limit-bar',
limitBarFirst: 'e-limit-first',
limitBarSecond: 'e-limit-second',
dragHorizontal: 'e-drag-horizontal',
dragVertical: 'e-drag-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.
* ```html
* <div id='slider'></div>
* ```
* ```typescript
* <script>
* var sliderObj = new Slider({ value: 10 });
* sliderObj.appendTo('#slider');
* </script>
* ```
*/
var Slider = /** @class */ (function (_super) {
__extends(Slider, _super);
function Slider(options, element) {
var _this = _super.call(this, options, element) || this;
_this.horDir = 'left';
_this.verDir = 'bottom';
_this.transition = {
handle: 'left .4s cubic-bezier(.25, .8, .25, 1), right .4s cubic-bezier(.25, .8, .25, 1), ' +
'top .4s cubic-bezier(.25, .8, .25, 1) , bottom .4s cubic-bezier(.25, .8, .25, 1)',
rangeBar: 'all .4s cubic-bezier(.25, .8, .25, 1)'
};
_this.transitionOnMaterialTooltip = {
handle: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, top 1ms ease-out',
rangeBar: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, width 1ms ease-out, height 1ms ease-out'
};
_this.scaleTransform = 'transform .4s cubic-bezier(.25, .8, .25, 1)';
_this.customAriaText = null;
_this.drag = true;
_this.isDragComplete = false;
_this.initialTooltip = true;
return _this;
}
Slider.prototype.preRender = function () {
var localeText = { incrementTitle: 'Increase', decrementTitle: 'Decrease' };
this.l10n = new L10n('slider', localeText, this.locale);
this.isElementFocused = false;
this.tickElementCollection = [];
this.tooltipFormatInfo = {};
this.ticksFormatInfo = {};
this.initCultureInfo();
this.initCultureFunc();
this.formChecker();
};
Slider.prototype.formChecker = function () {
var formElement = closest(this.element, 'form');
if (formElement) {
this.isForm = true;
// this condition needs to be checked, if the slider is going to be refreshed by `refresh()`
// then we need to revert the slider `value` back to `formResetValue` to preserve the initial value
if (!isNullOrUndefined(this.formResetValue)) {
this.setProperties({ 'value': this.formResetValue }, true);
}
this.formResetValue = this.value;
if (this.type === 'Range' &&
(isNullOrUndefined(this.formResetValue) || typeof (this.formResetValue) !== 'object')) {
this.formResetValue = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];
}
else if (isNullOrUndefined(this.formResetValue)) {
this.formResetValue = parseFloat(formatUnit(this.min));
}
this.formElement = formElement;
}
else {
this.isForm = false;
}
};
Slider.prototype.initCultureFunc = function () {
this.internationalization = new Internationalization(this.locale);
};
Slider.prototype.initCultureInfo = function () {
this.tooltipFormatInfo.format = (!isNullOrUndefined(this.tooltip.format)) ? this.tooltip.format : null;
this.ticksFormatInfo.format = (!isNullOrUndefined(this.ticks.format)) ? this.ticks.format : null;
};
Slider.prototype.formatString = function (value, formatInfo) {
var formatValue = null;
var formatString = null;
if ((value || value === 0)) {
formatValue = this.formatNumber(value);
var numberOfDecimals = this.numberOfDecimals(value);
formatString = this.internationalization.getNumberFormat(formatInfo)(this.makeRoundNumber(value, numberOfDecimals));
}
return { elementVal: formatValue, formatString: formatString };
};
Slider.prototype.formatNumber = function (value) {
var numberOfDecimals = this.numberOfDecimals(value);
return this.internationalization.getNumberFormat({
maximumFractionDigits: numberOfDecimals,
minimumFractionDigits: numberOfDecimals, useGrouping: false
})(value);
};
Slider.prototype.numberOfDecimals = function (value) {
var decimalPart = value.toString().split('.')[1];
var numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;
return numberOfDecimals;
};
Slider.prototype.makeRoundNumber = function (value, precision) {
var decimals = precision || 0;
return Number(value.toFixed(decimals));
};
/**
* To Initialize the control rendering
*
* @returns {void}
* @private
*/
Slider.prototype.render = function () {
var _this = this;
this.initialize();
this.initRender();
this.wireEvents();
this.setZindex();
this.renderComplete();
if (this.element.tagName === 'EJS-SLIDER') {
if (this.getTheme(this.sliderContainer) === 'none') {
setTimeout(function () {
_this.refresh();
}, 0);
}
}
};
Slider.prototype.initialize = function () {
addClass([this.element], classNames.root);
this.setCSSClass();
};
Slider.prototype.setElementWidth = function (width) {
if (!isNullOrUndefined(width) && !isNullOrUndefined(this.sliderContainer)) {
if (typeof width === 'number') {
this.sliderContainer.style.width = formatUnit(width);
}
else if (typeof width === 'string') {
this.sliderContainer.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));
}
}
};
Slider.prototype.setCSSClass = function (oldCSSClass) {
if (oldCSSClass) {
removeClass([this.element], oldCSSClass.split(' '));
}
if (this.cssClass) {
addClass([this.element], this.cssClass.split(' '));
}
};
Slider.prototype.setEnabled = function () {
if (!this.enabled) {
addClass([this.sliderContainer], [classNames.sliderDisabled]);
if (this.tooltip.isVisible && this.tooltipElement && this.tooltip.showOn === 'Always') {
this.tooltipElement.classList.add(classNames.sliderDisabled);
}
this.unwireEvents();
}
else {
removeClass([this.sliderContainer], [classNames.sliderDisabled]);
if (this.tooltip.isVisible && this.tooltipElement && this.tooltip.showOn === 'Always') {
this.tooltipElement.classList.remove(classNames.sliderDisabled);
}
this.wireEvents();
}
};
Slider.prototype.getTheme = function (container) {
var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');
return theme.replace(/['"]+/g, '');
};
/**
* Initialize the rendering
*
* @returns {void}
* @private
*/
Slider.prototype.initRender = function () {
this.sliderContainer = this.createElement('div', { className: classNames.sliderContainer + ' ' + classNames.controlWrapper });
this.element.parentNode.insertBefore(this.sliderContainer, this.element);
this.sliderContainer.appendChild(this.element);
this.sliderTrack = this.createElement('div', { className: classNames.sliderTrack });
this.element.appendChild(this.sliderTrack);
this.setElementWidth(this.width);
this.element.tabIndex = -1;
this.getThemeInitialization();
this.setHandler();
this.createRangeBar();
if (this.limits.enabled) {
this.createLimitBar();
}
this.setOrientClass();
this.hiddenInput = (this.createElement('input', {
attrs: {
type: 'hidden', value: (isNullOrUndefined(this.value) ? (isNullOrUndefined(this.min) ? '0' : this.min.toString()) : this.value.toString()),
name: this.element.getAttribute('name') || this.element.getAttribute('id') ||
'_' + (Math.random() * 1000).toFixed(0) + 'slider', class: classNames.sliderHiddenInput
}
}));
this.hiddenInput.tabIndex = -1;
this.sliderContainer.appendChild(this.hiddenInput);
if (this.showButtons) {
this.setButtons();
}
this.setEnableRTL();
if (this.type === 'Range') {
this.rangeValueUpdate();
}
else {
this.value = isNullOrUndefined(this.value) ? (isNullOrUndefined(this.min) ? 0 :
parseFloat(formatUnit(this.min.toString()))) : this.value;
}
this.previousVal = this.type !== 'Range' ? this.checkHandleValue(parseFloat(formatUnit(this.value.toString()))) :
[this.checkHandleValue(parseFloat(formatUnit(this.value[0].toString()))),
this.checkHandleValue(parseFloat(formatUnit(this.value[1].toString())))];
this.previousChanged = this.previousVal;
if (!isNullOrUndefined(this.element.hasAttribute('name'))) {
this.element.removeAttribute('name');
}
this.setValue();
if (this.limits.enabled) {
this.setLimitBar();
}
if (this.ticks.placement !== 'None') {
this.renderScale();
}
if (this.tooltip.isVisible) {
this.renderTooltip();
}
if (!this.enabled) {
addClass([this.sliderContainer], [classNames.sliderDisabled]);
}
else {
removeClass([this.sliderContainer], [classNames.sliderDisabled]);
}
if (this.readonly) {
addClass([this.sliderContainer], [classNames.readonly]);
}
else {
removeClass([this.sliderContainer], [classNames.readonly]);
}
};
Slider.prototype.getThemeInitialization = function () {
this.isMaterial = this.getTheme(this.sliderContainer) === 'material'
|| this.getTheme(this.sliderContainer) === 'material-dark';
this.isMaterial3 = this.getTheme(this.sliderContainer) === 'Material3'
|| this.getTheme(this.sliderContainer) === 'Material3-dark';
this.isBootstrap = this.getTheme(this.sliderContainer) === 'bootstrap'
|| this.getTheme(this.sliderContainer) === 'bootstrap-dark';
this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';
this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
this.isTailwind3 = this.getTheme(this.sliderContainer) === 'tailwind3' || this.getTheme(this.sliderContainer) === 'tailwind3-dark';
this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';
this.isFluent2 = this.getTheme(this.sliderContainer) === 'fluent2';
this.isBootstrap5Dot3 = this.getTheme(this.sliderContainer) === 'bootstrap5.3';
this.isMaterialTooltip = (this.isMaterial || this.isMaterial3) && this.type !== 'Range' && this.tooltip.isVisible;
};
Slider.prototype.createRangeBar = function () {
if (this.type !== 'Default') {
this.rangeBar = (this.createElement('div', { attrs: { class: classNames.rangeBar } }));
this.element.appendChild(this.rangeBar);
if (this.drag && this.type === 'Range') {
if (this.orientation === 'Horizontal') {
this.rangeBar.classList.add(classNames.dragHorizontal);
}
else {
this.rangeBar.classList.add(classNames.dragVertical);
}
}
}
};
Slider.prototype.createLimitBar = function () {
var firstElementClassName = this.type !== 'Range' ? classNames.limitBarDefault :
classNames.limitBarFirst;
firstElementClassName += ' ' + classNames.limits;
this.limitBarFirst = (this.createElement('div', {
attrs: { class: firstElementClassName }
}));
this.element.appendChild(this.limitBarFirst);
if (this.type === 'Range') {
this.limitBarSecond = (this.createElement('div', {
attrs: {
class: classNames.limitBarSecond + ' ' + classNames.limits
}
}));
this.element.appendChild(this.limitBarSecond);
}
};
Slider.prototype.setOrientClass = function () {
if (this.orientation !== 'Vertical') {
this.sliderContainer.classList.remove(classNames.verticalSlider);
this.sliderContainer.classList.add(classNames.horizontalSlider);
this.firstHandle.setAttribute('aria-orientation', 'horizontal');
if (this.type === 'Range') {
this.secondHandle.setAttribute('aria-orientation', 'horizontal');
}
}
else {
this.sliderContainer.classList.remove(classNames.horizontalSlider);
this.sliderContainer.classList.add(classNames.verticalSlider);
this.firstHandle.setAttribute('aria-orientation', 'vertical');
if (this.type === 'Range') {
this.secondHandle.setAttribute('aria-orientation', 'vertical');
}
}
};
Slider.prototype.setAriaAttributes = function (element) {
var _this = this;
var min = this.min;
var max = this.max;
if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {
min = this.customValues[0];
max = this.customValues[this.customValues.length - 1];
}
if (this.type !== 'Range') {
attributes(element, {
'aria-valuemin': isNullOrUndefined(min) ? '0' : min.toString(), 'aria-valuemax': (isNullOrUndefined(max) ? '100' : max.toString())
});
}
else {
var range = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?
[[min.toString(), (this.customValues[this.value[1]]).toString()],
[(this.customValues[this.value[0]]).toString(), max.toString()]] :
[[min.toString(), this.value[1].toString()], [this.value[0].toString(), max.toString()]];
range.forEach(function (range, index) {
var element = index === 0 ? _this.firstHandle : _this.secondHandle;
if (element) {
attributes(element, {
'aria-valuemin': range[0], 'aria-valuemax': range[1]
});
}
});
}
};
Slider.prototype.createSecondHandle = function () {
this.secondHandle = this.createElement('div', {
attrs: {
class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'
}
});
this.secondHandle.classList.add(classNames.sliderSecondHandle);
this.element.appendChild(this.secondHandle);
};
Slider.prototype.createFirstHandle = function () {
this.firstHandle = this.createElement('div', {
attrs: {
class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'
}
});
this.firstHandle.classList.add(classNames.sliderFirstHandle);
this.element.appendChild(this.firstHandle);
if (this.isMaterialTooltip) {
this.materialHandle = this.createElement('div', {
attrs: {
class: classNames.sliderHandle + ' ' +
classNames.sliderMaterialHandle
}
});
this.element.appendChild(this.materialHandle);
}
};
Slider.prototype.wireFirstHandleEvt = function (destroy) {
if (!destroy) {
EventHandler.add(this.firstHandle, 'mousedown touchstart', this.handleFocus, this);
EventHandler.add(this.firstHandle, 'transitionend', this.transitionEnd, this);
EventHandler.add(this.firstHandle, 'mouseenter touchenter', this.handleOver, this);
EventHandler.add(this.firstHandle, 'mouseleave touchend', this.handleLeave, this);
}
else {
EventHandler.remove(this.firstHandle, 'mousedown touchstart', this.handleFocus);
EventHandler.remove(this.firstHandle, 'transitionend', this.transitionEnd);
EventHandler.remove(this.firstHandle, 'mouseenter touchenter', this.handleOver);
EventHandler.remove(this.firstHandle, 'mouseleave touchend', this.handleLeave);
}
};
Slider.prototype.wireSecondHandleEvt = function (destroy) {
if (!destroy) {
EventHandler.add(this.secondHandle, 'mousedown touchstart', this.handleFocus, this);
EventHandler.add(this.secondHandle, 'transitionend', this.transitionEnd, this);
EventHandler.add(this.secondHandle, 'mouseenter touchenter', this.handleOver, this);
EventHandler.add(this.secondHandle, 'mouseleave touchend', this.handleLeave, this);
}
else {
EventHandler.remove(this.secondHandle, 'mousedown touchstart', this.handleFocus);
EventHandler.remove(this.secondHandle, 'transitionend', this.transitionEnd);
EventHandler.remove(this.secondHandle, 'mouseenter touchenter', this.handleOver);
EventHandler.remove(this.secondHandle, 'mouseleave touchend', this.handleLeave);
}
};
Slider.prototype.handleStart = function () {
if (this.type !== 'Range') {
this.firstHandle.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderHandleStart);
if (this.isMaterialTooltip) {
this.materialHandle.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderHandleStart);
if (this.tooltipElement) {
this.tooltipElement.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderTooltipStart);
}
}
}
};
Slider.prototype.transitionEnd = function (e) {
if (e.propertyName !== 'transform') {
this.handleStart();
if (!this.enableAnimation) {
this.getHandle().style.transition = 'none';
}
if (this.type !== 'Default') {
this.rangeBar.style.transition = 'none';
}
if ((this.isMaterial || this.isMaterial3) && this.tooltip.isVisible && this.type === 'Default') {
this.tooltipElement.style.transition = this.transition.handle;
}
this.tooltipToggle(this.getHandle());
this.closeTooltip();
}
};
Slider.prototype.handleFocusOut = function () {
if (this.firstHandle.classList.contains(classNames.sliderHandleFocused)) {
this.firstHandle.classList.remove(classNames.sliderHandleFocused);
}
if (this.type === 'Range') {
if (this.secondHandle.classList.contains(classNames.sliderHandleFocused)) {
this.secondHandle.classList.remove(classNames.sliderHandleFocused);
}
}
};
Slider.prototype.handleFocus = function (e) {
this.focusSliderElement();
this.sliderBarClick(e);
if (e.currentTarget === this.firstHandle) {
this.firstHandle.classList.add(classNames.sliderHandleFocused);
this.firstHandle.classList.add(classNames.sliderTabHandle);
}
else {
this.secondHandle.classList.add(classNames.sliderHandleFocused);
this.secondHandle.classList.add(classNames.sliderTabHandle);
}
EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);
EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);
};
Slider.prototype.handleOver = function (e) {
if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover') {
this.tooltipToggle(e.currentTarget);
}
if (this.type === 'Default') {
this.tooltipToggle(this.getHandle());
}
};
Slider.prototype.handleLeave = function (e) {
if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover' &&
!e.currentTarget.classList.contains(classNames.sliderHandleFocused) &&
!e.currentTarget.classList.contains(classNames.sliderTabHandle)) {
this.closeTooltip();
}
};
Slider.prototype.setHandler = function () {
this.createFirstHandle();
if (this.type === 'Range') {
this.createSecondHandle();
}
};
Slider.prototype.setEnableRTL = function () {
if (this.enableRtl && this.orientation !== 'Vertical') {
addClass([this.sliderContainer], classNames.rtl);
}
else {
removeClass([this.sliderContainer], classNames.rtl);
}
var preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;
if (this.enableRtl) {
this.horDir = 'right';
this.verDir = 'bottom';
}
else {
this.horDir = 'left';
this.verDir = 'bottom';
}
var currDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;
if (preDir !== currDir) {
if (this.orientation === 'Horizontal') {
setStyleAttribute(this.firstHandle, { 'right': '', 'left': 'auto' });
if (this.type === 'Range') {
setStyleAttribute(this.secondHandle, { 'top': '', 'left': 'auto' });
}
}
}
this.setBarColor();
};
Slider.prototype.tooltipValue = function () {
var _this = this;
var text;
var args = {
value: this.value,
text: ''
};
if (this.initialTooltip) {
this.initialTooltip = false;
this.setTooltipContent();
args.text = text = (typeof (this.tooltipObj.content) === 'function' ? this.tooltipObj.content() : this.tooltipObj.content);
this.trigger('tooltipChange', args, function (observedArgs) {
_this.addTooltipClass(observedArgs.text);
if (text !== observedArgs.text) {
_this.customAriaText = observedArgs.text;
if (_this.enableHtmlSanitizer) {
observedArgs.text = SanitizeHtmlHelper.sanitize(observedArgs.text.toString());
}
else {
observedArgs.text = observedArgs.text.toString();
}
var contentTemp = function () {
return observedArgs.text;
};
_this.tooltipObj.content = initializeCSPTemplate(contentTemp);
_this.setAriaAttrValue(_this.firstHandle);
if (_this.type === 'Range') {
_this.setAriaAttrValue(_this.secondHandle);
}
}
});
if (this.isMaterialTooltip) {
this.setPreviousVal('change', this.value);
}
}
};
Slider.prototype.setTooltipContent = function () {
var content = this.formatContent(this.tooltipFormatInfo, false);
var contentTemp = function () {
return content;
};
this.tooltipObj.content = initializeCSPTemplate(contentTemp);
};
Slider.prototype.formatContent = function (formatInfo, ariaContent) {
var content = '';
var handle1 = this.handleVal1;
var handle2 = this.handleVal2;
if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {
handle1 = this.customValues[this.handleVal1];
handle2 = this.customValues[this.handleVal2];
}
if (!ariaContent) {
if (this.type === 'Range') {
if (this.enableRtl && this.orientation !== 'Vertical') {
content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle2, formatInfo)
.formatString + ' - ' + this.formatString(handle1, formatInfo).formatString) :
(handle2.toString() + ' - ' + handle1.toString());
}
else {
content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle1, formatInfo)
.formatString + ' - ' + this.formatString(handle2, formatInfo).formatString) :
(handle1.toString() + ' - ' + handle2.toString());
}
}
else {
if (!isNullOrUndefined(handle1)) {
content = (!isNullOrUndefined(formatInfo.format)) ?
this.formatString(handle1, formatInfo).formatString : handle1.toString();
}
}
return content;
}
else {
if (this.type === 'Range') {
if (this.enableRtl && this.orientation !== 'Vertical') {
content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?
(this.formatString(handle2, formatInfo).elementVal + ' - ' +
this.formatString(handle1, formatInfo).elementVal) :
(handle2.toString() + ' - ' + handle1.toString());
}
else {
content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?
(this.formatString(handle1, formatInfo).elementVal + ' - ' +
this.formatString(handle2, formatInfo).elementVal) :
(handle1.toString() + ' - ' + handle2.toString());
}
}
else {
if (!isNullOrUndefined(handle1)) {
content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?
this.formatString(handle1, formatInfo).elementVal : handle1.toString();
}
}
return content;
}
};
Slider.prototype.addTooltipClass = function (content) {
if (this.isMaterialTooltip) {
var count = content.toString().length;
if (!this.tooltipElement) {
var cssClass = count > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;
this.tooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass;
}
else {
var cssClass = count > 4 ?
{ oldCss: classNames.sliderMaterialDefault, newCss: classNames.sliderMaterialRange } :
{ oldCss: classNames.sliderMaterialRange, newCss: classNames.sliderMaterialDefault };
this.tooltipElement.classList.remove(cssClass.oldCss);
if (!this.tooltipElement.classList.contains(cssClass.newCss)) {
this.tooltipElement.classList.add(cssClass.newCss);
this.tooltipElement.style.transform = count > 4 ? 'scale(1)' :
this.getTooltipTransformProperties(this.previousTooltipClass).rotate;
}
}
}
};
Slider.prototype.tooltipPlacement = function () {
return this.orientation === 'Horizontal' ? (this.tooltip.placement === 'Before' ? 'TopCenter' : 'BottomCenter') :
(this.tooltip.placement === 'Before' ? 'LeftCenter' : 'RightCenter');
};
Slider.prototype.tooltipBeforeOpen = function (args) {
this.tooltipElement = args.element;
if (this.tooltip.cssClass) {
addClass([this.tooltipElement], this.tooltip.cssClass.split(' ').filter(function (css) { return css; }));
}
args.target.removeAttribute('aria-describedby');
if (this.isMaterialTooltip) {
this.tooltipElement.firstElementChild.classList.add(classNames.materialTooltipHide);
this.handleStart();
this.setTooltipTransform();
}
};
Slider.prototype.tooltipCollision = function (position) {
if (this.isBootstrap || this.isBootstrap4 || ((this.isMaterial || this.isMaterial3) && !this.isMaterialTooltip)) {
var tooltipOffsetValue = this.isBootstrap4 ? bootstrap4TooltipOffset : bootstrapTooltipOffset;
switch (position) {
case 'TopCenter':
this.tooltipObj.setProperties({ 'offsetY': -(tooltipOffsetValue) }, false);
break;
case 'BottomCenter':
this.tooltipObj.setProperties({ 'offsetY': tooltipOffsetValue }, false);
break;
case 'LeftCenter':
this.tooltipObj.setProperties({ 'offsetX': -(tooltipOffsetValue) }, false);
break;
case 'RightCenter':
this.tooltipObj.setProperties({ 'offsetX': tooltipOffsetValue }, false);
break;
}
}
};
Slider.prototype.materialTooltipEventCallBack = function (event) {
this.sliderBarClick(event);
EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);
EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);
};
Slider.prototype.wireMaterialTooltipEvent = function (destroy) {
if (this.isMaterialTooltip) {
if (!destroy) {
EventHandler.add(this.tooltipElement, 'mousedown touchstart', this.materialTooltipEventCallBack, this);
}
else {
EventHandler.remove(this.tooltipElement, 'mousedown touchstart', this.materialTooltipEventCallBack);
}
}
};
Slider.prototype.tooltipPositionCalculation = function (position) {
var cssClass;
switch (position) {
case 'TopCenter':
cssClass = classNames.horizontalTooltipBefore;
break;
case 'BottomCenter':
cssClass = classNames.horizontalTooltipAfter;
break;
case 'LeftCenter':
cssClass = classNames.verticalTooltipBefore;
break;
case 'RightCenter':
cssClass = classNames.verticalTooltipAfter;
break;
}
return cssClass;
};
Slider.prototype.getTooltipTransformProperties = function (className) {
var transformProperties;
if (this.tooltipElement) {
var position = this.orientation === 'Horizontal' ?
((this.tooltipElement.clientHeight + 14) - (this.tooltipElement.clientHeight / 2)) :
((this.tooltipElement.clientWidth + 14) - (this.tooltipElement.clientWidth / 2));
transformProperties = this.orientation === 'Horizontal' ?
(className === classNames.horizontalTooltipBefore ? { rotate: 'rotate(45deg)', translate: "translateY(" + position + "px)" } :
{ rotate: 'rotate(225deg)', translate: "translateY(" + -(position) + "px)" }) :
(className === classNames.verticalTooltipBefore ? { rotate: 'rotate(-45deg)', translate: "translateX(" + position + "px)" } :
{ rotate: 'rotate(-225deg)', translate: "translateX(" + (-position) + "px)" });
}
return transformProperties;
};
Slider.prototype.openMaterialTooltip = function () {
var _this = this;
if (this.isMaterialTooltip) {
this.refreshTooltip(this.firstHandle);
var tooltipContentElement = this.tooltipElement.firstElementChild;
tooltipContentElement.classList.remove(classNames.materialTooltipHide);
tooltipContentElement.classList.add(classNames.materialTooltipShow);
this.firstHandle.style.cursor = 'default';
this.tooltipElement.style.transition = this.scaleTransform;
this.tooltipElement.classList.add(classNames.materialTooltipOpen);
this.materialHandle.style.transform = 'scale(0)';
if (tooltipContentElement.innerText.length > 4) {
this.tooltipElement.style.transform = 'scale(1)';
}
else {
this.tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;
}
if (this.type === 'Default') {
setTimeout(function () { if (_this.tooltipElement) {
_this.tooltipElement.style.transition = _this.transition.handle;
} }, 2500);
}
else {
setTimeout(function () { if (_this.tooltipElement) {
_this.tooltipElement.style.transition = 'none';
} }, 2500);
}
}
};
Slider.prototype.closeMaterialTooltip = function () {
var _this = this;
if (this.isMaterialTooltip) {
var tooltipContentElement = this.tooltipElement.firstElementChild;
this.tooltipElement.style.transition = this.scaleTransform;
tooltipContentElement.classList.remove(classNames.materialTooltipShow);
tooltipContentElement.classList.add(classNames.materialTooltipHide);
this.firstHandle.style.cursor = '-webkit-grab';
this.firstHandle.style.cursor = 'grab';
if (this.materialHandle) {
this.materialHandle.style.transform = 'scale(1)';
}
this.tooltipElement.classList.remove(classNames.materialTooltipOpen);
this.setTooltipTransform();
this.tooltipTarget = undefined;
setTimeout(function () { if (_this.tooltipElement) {
_this.tooltipElement.style.transition = 'none';
} }, 2500);
}
};
Slider.prototype.checkTooltipPosition = function (args) {
var tooltipClass = this.tooltipPositionCalculation(args.collidedPosition);
if (this.tooltipCollidedPosition === undefined ||
this.tooltipCollidedPosition !== args.collidedPosition || !args.element.classList.contains(tooltipClass)) {
if (this.isMaterialTooltip) {
if (tooltipClass !== undefined) {
args.element.classList.remove(this.previousTooltipClass);
args.element.classList.add(tooltipClass);
this.previousTooltipClass = tooltipClass;
}
if (args.element.style.transform && args.element.classList.contains(classNames.materialTooltipOpen) &&
args.element.firstElementChild.innerText.length <= 4) {
args.element.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;
}
}
this.tooltipCollidedPosition = args.collidedPosition;
}
if (this.isMaterialTooltip && this.tooltipElement && this.tooltipElement.style.transform.indexOf('translate') !== -1) {
this.setTooltipTransform();
}
};
Slider.prototype.setTooltipTransform = function () {
var transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);
if (isNullOrUndefined(this.tooltipElement)) {
return;
}
if (this.tooltipElement.firstElementChild.innerText.length > 4) {
this.tooltipElement.style.transform = transformProperties.translate + " scale(0.01)";
}
else {
this.tooltipElement.style.transform = transformProperties.translate + " " + transformProperties.rotate + " scale(0.01)";
}
};
Slider.prototype.renderTooltip = function () {
this.tooltipObj = new Tooltip({
showTipPointer: this.isBootstrap || this.isMaterial || this.isMaterial3 || this.isBootstrap4 || this.isTailwind
|| this.isTailwind3 || this.isBootstrap5 || this.isFluent || this.isFluent2 || this.isBootstrap5Dot3,
cssClass: classNames.sliderTooltip,
height: (this.isMaterial || this.isMaterial3) ? 30 : 'auto',
animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },
opensOn: 'Custom',
beforeOpen: this.tooltipBeforeOpen.bind(this),
beforeCollision: this.checkTooltipPosition.bind(this),
beforeClose: this.tooltipBeforeClose.bind(this),
enableHtmlSanitizer: this.enableHtmlSanitizer
});
this.tooltipObj.appendTo(this.firstHandle);
this.initializeTooltipProps();
};
Slider.prototype.initializeTooltipProps = function () {
var tooltipShowOn = (this.tooltip.showOn === 'Auto' ? 'Hover' : this.tooltip.showOn);
this.setProperties({ tooltip: { showOn: tooltipShowOn } }, true);
this.tooltipObj.position = this.tooltipPlacement();
this.tooltipCollision(this.tooltipObj.position);
[this.firstHandle, this.rangeBar, this.secondHandle].forEach(function (handle) {
if (!isNullOrUndefined(handle)) {
handle.style.transition = 'none';
}
});
if (this.isMaterialTooltip) {
this.sliderContainer.classList.add(classNames.materialSlider);
this.tooltipValue();
this.tooltipObj.animation.close.effect = 'None';
this.tooltipObj.open(this.firstHandle);
}
};
Slider.prototype.tooltipBeforeClose = function () {
this.tooltipElement = undefined;
this.tooltipCollidedPosition = undefined;
};
Slider.prototype.setButtons = function () {
this.firstBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.firstButton });
this.firstBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));
if (this.isTailwind || this.isTailwind3) {
this.firstBtn.querySelector('span').classList.add('e-icons');
}
this.firstBtn.tabIndex = -1;
this.secondBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.secondButton });
this.secondBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));
if (this.isTailwind || this.isTailwind3) {
this.secondBtn.querySelector('span').classList.add('e-icons');
}
this.secondBtn.tabIndex = -1;
this.sliderContainer.classList.add(classNames.sliderButtonClass);
this.sliderContainer.appendChild(this.firstBtn);
this.sliderContainer.appendChild(this.secondBtn);
this.sliderContainer.appendChild(this.element);
this.buttonTitle();
};
Slider.prototype.buttonTitle = function () {
var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';
this.l10n.setLocale(this.locale);
var decrementTitle = this.l10n.getConstant('decrementTitle');
var incrementTitle = this.l10n.getConstant('incrementTitle');
attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': decrementTitle, title: decrementTitle });
attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });
};
Slider.prototype.buttonFocusOut = function () {
if (this.isMaterial || this.isMaterial3) {
this.getHandle().classList.remove('e-large-thumb-size');
}
};
Slider.prototype.repeatButton = function (args) {
var hVal = this.handleValueUpdate();
var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';
var value;
if (args.target.parentElement.classList.contains(classNames.firstButton)
|| args.target.classList.contains(classNames.firstButton)) {
if (enabledRTL) {
value = this.add(hVal, parseFloat(this.step.toString()), true);
}
else {
value = this.add(hVal, parseFloat(this.step.toString()), false);
}
}
else if (args.target.parentElement.classList.contains(classNames.secondButton)
|| (args.target.classList.contains(classNames.secondButton))) {
if (enabledRTL) {
value = this.add(hVal, parseFloat(this.step.toString()), false);
}
else {
value = this.add(hVal, parseFloat(this.step.toString()), true);
}
}
if (this.limits.enabled) {
value = this.getLimitCorrectedValues(value);
}
if (value >= this.min && value <= this.max) {
this.changeHandleValue(value);
this.tooltipToggle(this.getHandle());
}
};
Slider.prototype.repeatHandlerMouse = function (args) {
args.preventDefault();
if (args.type === ('mousedown') || args.type === ('touchstart')) {
this.buttonClick(args);
this.repeatInterval = setInterval(this.repeatButton.bind(this), 180, args);
}
};
Slider.prototype.materialChange = function () {
if (!this.getHandle().classList.contains('e-large-thumb-size')) {
this.getHandle().classList.add('e-large-thumb-size');
}
};
Slider.prototype.focusHandle = function () {
if (!this.getHandle().classList.contains(classNames.sliderTabHandle)) {
this.getHandle().classList.add(classNames.sliderTabHandle);
}
};
Slider.prototype.repeatHandlerUp = function (e) {
this.changeEvent('changed', e);
this.closeTooltip();
clearInterval(this.repeatInterval);
this.getHandle().focus();
};
Slider.prototype.customTickCounter = function (bigNum) {
var tickCount = 4;
if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {
if (bigNum > 4) {
tickCount = 3;
}
if (bigNum > 7) {
tickCount = 2;
}
if (bigNum > 14) {
tickCount = 1;
}
if (bigNum > 28) {
tickCount = 0;
}
}
return tickCount;
};
Slider.prototype.renderScale = function () {
var orien = this.orientation === 'Vertical'