@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,135 lines • 84.5 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;
};
/* eslint-disable prefer-spread */
import { Component, Event, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
import { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';
import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';
import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';
import { SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';
import { Deferred } from '@syncfusion/ej2-splitbuttons';
import { Tooltip, getZindexPartial, Popup, isCollide } from '@syncfusion/ej2-popups';
import { Input } from './../input/index';
import { NumericTextBox } from './../numerictextbox/index';
import { Slider } from './../slider/slider';
var APPLY = 'e-apply';
var CANCEL = 'e-cancel';
var CURRENT = 'e-current';
var CONTAINER = 'e-container';
var CTRLBTN = 'e-ctrl-btn';
var CTRLSWITCH = 'e-switch-ctrl-btn';
var DISABLED = 'e-disabled';
var FORMATSWITCH = 'e-value-switch-btn';
var HANDLER = 'e-handler';
var HEX = 'e-hex';
var HIDEHEX = 'e-hide-hex-value';
var HIDEOPACITY = 'e-hide-opacity';
var HIDERGBA = 'e-hide-switchable-value';
var HIDEVALUE = 'e-hide-value';
var HIDEVALUESWITCH = 'e-hide-valueswitcher';
var HSVAREA = 'e-hsv-color';
var HSVCONTAINER = 'e-hsv-container';
var INPUTWRAPPER = 'e-selected-value';
var MODESWITCH = 'e-mode-switch-btn';
var NOCOLOR = 'e-nocolor-item';
var OPACITY = 'e-opacity-value';
var PALETTES = 'e-palette';
var PALETTECONTENT = 'e-color-palette';
var PICKERCONTENT = 'e-color-picker';
var PREVIEW = 'e-preview-container';
var PREVIOUS = 'e-previous';
var RTL = 'e-rtl';
var SHOWVALUE = 'e-show-value';
var SELECT = 'e-selected';
var SPLITPREVIEW = 'e-split-preview';
var TILE = 'e-tile';
var presets = {
default: ['#000000', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#ffeb3b',
'#ffffff', '#ffebee', '#fce4ec', '#f3e5f5', '#ede7f6', '#e3f2fd', '#e1f5fe', '#e0f7fa', '#e0f2f1', '#fffde7',
'#f2f2f2', '#ffcdd2', '#f8bbd0', '#e1bee7', '#d1c4e9', '#bbdefb', '#b3e5fc', '#b2ebf2', '#b2dfdb', '#fff9c4',
'#e6e6e6', '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#90caf9', '#81d4fa', '#80deea', '#80cbc4', '#fff59d',
'#cccccc', '#e57373', '#f06292', '#ba68c8', '#9575cd', '#64b5f6', '#4fc3f7', '#4dd0e1', '#4db6ac', '#fff176',
'#b3b3b3', '#ef5350', '#ec407a', '#ab47bc', '#7e57c2', '#42a5f5', '#29b6f6', '#26c6da', '#26a69a', '#ffee58',
'#999999', '#e53935', '#d81b60', '#8e24aa', '#5e35b1', '#1e88e5', '#039be5', '#00acc1', '#00897b', '#fdd835',
'#808080', '#d32f2f', '#c2185b', '#7b1fa2', '#512da8', '#1976d2', '#0288d1', '#0097a7', '#00796b', '#fbc02d',
'#666666', '#c62828', '#ad1457', '#6a1b9a', '#4527a0', '#1565c0', '#0277bd', '#00838f', '#00695c', '#f9a825',
'#4d4d4d', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#0d47a1', '#01579b', '#006064', '#004d40', '#f57f17']
};
/**
* ColorPicker component is a user interface to select and adjust color values. It provides supports for various
* color specification like Red Green Blue, Hue Saturation Value and Hex codes.
* ```html
* <input type="color" id="color-picker">
* ```
* ```typescript
* <script>
* let colorPickerObj: ColorPicker = new ColorPicker(null , "#color-picker");
* </script>
* ```
*/
var ColorPicker = /** @class */ (function (_super) {
__extends(ColorPicker, _super);
function ColorPicker(options, element) {
var _this = _super.call(this, options, element) || this;
_this.recentColors = [];
return _this;
}
ColorPicker.prototype.preRender = function () {
var ele = this.element;
this.formElement = closest(this.element, 'form');
if (this.formElement) {
EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
}
var localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode', RecentColors: 'Recent colors' };
this.l10n = new L10n('colorpicker', localeText, this.locale);
if (ele.getAttribute('ejs-for') && !ele.getAttribute('name')) {
ele.setAttribute('name', ele.id);
}
};
/**
* To Initialize the component rendering
*
* @private
* @returns {void}
*/
ColorPicker.prototype.render = function () {
this.initWrapper();
if (this.inline) {
this.createWidget();
}
else {
this.createSplitBtn();
}
if (!this.enableOpacity) {
addClass([this.container.parentElement], HIDEOPACITY);
}
this.renderComplete();
};
ColorPicker.prototype.initWrapper = function () {
var wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
this.element.parentNode.insertBefore(wrapper, this.element);
wrapper.appendChild(this.element);
attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false', 'aria-label': 'colorpicker' });
this.container = this.createElement('div', { className: CONTAINER });
this.getWrapper().appendChild(this.container);
var value = this.value ? this.roundValue(this.value).toLowerCase() : '#008000ff';
if (this.noColor && this.mode === 'Palette' && this.value === '') {
value = '';
}
var slicedValue = value.slice(0, 7);
if (isNullOrUndefined(this.initialInputValue)) {
this.initialInputValue = slicedValue;
}
this.element.value = slicedValue;
if (this.enableOpacity) {
this.setProperties({ 'value': value }, true);
}
else {
this.setProperties({ 'value': slicedValue }, true);
}
if (this.enableRtl) {
wrapper.classList.add(RTL);
}
if (this.cssClass) {
addClass([wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
}
this.tileRipple = rippleEffect(this.container, { selector: '.' + TILE });
this.ctrlBtnRipple = rippleEffect(this.container, { selector: '.e-btn' });
};
ColorPicker.prototype.getWrapper = function () {
return this.element.parentElement;
};
ColorPicker.prototype.createWidget = function () {
if (this.mode === 'Palette') {
this.createPalette();
if (!this.inline) {
this.firstPaletteFocus();
}
}
else {
this.createPicker();
if (!this.inline) {
this.getDragHandler().focus();
}
}
this.isRgb = true;
this.createInput();
this.createCtrlBtn();
if (!this.disabled) {
this.wireEvents();
}
if (this.inline && this.disabled) {
this.toggleDisabled(true);
}
if (Browser.isDevice) {
this.refreshPopupPos();
}
};
ColorPicker.prototype.createSplitBtn = function () {
var _this = this;
var splitButton = this.createElement('button', { className: 'e-split-colorpicker' });
this.getWrapper().appendChild(splitButton);
this.splitBtn = new SplitButton({
iconCss: 'e-selected-color',
target: this.container,
disabled: this.disabled,
enableRtl: this.enableRtl,
createPopupOnClick: this.createPopupOnClick,
open: this.onOpen.bind(this),
click: function () {
var ev = new MouseEvent('click', { bubbles: true, cancelable: false });
_this.trigger('change', {
currentValue: { hex: _this.value.slice(0, 7), rgba: _this.convertToRgbString(_this.hexToRgb(_this.value)) },
previousValue: { hex: null, rgba: null }, value: _this.value, event: ev
});
}
});
this.splitBtn.createElement = this.createElement;
this.splitBtn.appendTo(splitButton);
this.splitBtn.element.setAttribute('aria-label', 'colorpicker');
var preview = this.createElement('span', { className: SPLITPREVIEW });
select('.e-selected-color', splitButton).appendChild(preview);
preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(this.value));
var popupEle = this.getPopupEle();
addClass([popupEle], 'e-colorpicker-popup');
if (this.cssClass) {
addClass([popupEle], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
}
if (Browser.isDevice && !this.createPopupOnClick) {
var popupInst = this.getPopupInst();
popupInst.relateTo = document.body;
popupInst.position = { X: 'center', Y: 'center' };
popupInst.targetType = 'container';
popupInst.collision = { X: 'fit', Y: 'fit' };
popupInst.offsetY = 4;
popupEle.style.zIndex = getZindexPartial(this.splitBtn.element).toString();
}
this.bindCallBackEvent();
};
ColorPicker.prototype.onOpen = function () {
this.trigger('open', { element: this.container });
if (!Browser.isDevice) {
var popupInst = this.getPopupInst();
var collision = isCollide(popupInst.element);
if (collision.length > 0) {
popupInst.collision = { X: 'flip', Y: 'fit' };
popupInst.position = { X: 'right', Y: 'bottom' };
popupInst.targetType = 'container';
}
}
};
ColorPicker.prototype.getPopupInst = function () {
return getInstance(this.getPopupEle(), Popup);
};
ColorPicker.prototype.bindCallBackEvent = function () {
var _this = this;
this.splitBtn.beforeOpen = function (args) {
var callBackPromise = new Deferred();
_this.trigger('beforeOpen', args, function (observeOpenArgs) {
if (!observeOpenArgs.cancel) {
var popupEle = _this.getPopupEle();
popupEle.style.top = formatUnit(0 + pageYOffset);
popupEle.style.left = formatUnit(0 + pageXOffset);
popupEle.style.display = 'block';
_this.createWidget();
popupEle.style.display = '';
if (Browser.isDevice) {
if (_this.createPopupOnClick) {
var popupInst = _this.getPopupInst();
popupInst.relateTo = document.body;
popupInst.position = { X: 'center', Y: 'center' };
popupInst.targetType = 'container';
popupInst.collision = { X: 'fit', Y: 'fit' };
popupInst.offsetY = 4;
popupEle.style.zIndex = getZindexPartial(_this.splitBtn.element).toString();
}
_this.modal = _this.createElement('div');
_this.modal.className = 'e-' + _this.getModuleName() + ' e-modal';
_this.modal.style.display = 'none';
document.body.insertBefore(_this.modal, popupEle);
document.body.className += ' e-colorpicker-overflow';
_this.modal.style.display = 'block';
_this.modal.style.zIndex = (Number(popupEle.style.zIndex) - 1).toString();
}
}
args.cancel = observeOpenArgs.cancel;
callBackPromise.resolve(observeOpenArgs);
});
return callBackPromise;
};
this.splitBtn.beforeClose = function (args) {
var callBackPromise = new Deferred();
if (!isNullOrUndefined(args.event)) {
var beforeCloseArgs = { element: _this.container, event: args.event, cancel: false };
_this.trigger('beforeClose', beforeCloseArgs, function (observedCloseArgs) {
if (Browser.isDevice && args.event.target === _this.modal) {
observedCloseArgs.cancel = true;
}
if (!observedCloseArgs.cancel) {
_this.onPopupClose();
if (args.event.type === 'keydown' && args.event.keyCode === 27) {
_this.splitBtn.element.focus();
}
}
args.cancel = observedCloseArgs.cancel;
callBackPromise.resolve(observedCloseArgs);
});
}
else {
callBackPromise.resolve(args);
}
return callBackPromise;
};
};
ColorPicker.prototype.onPopupClose = function () {
this.unWireEvents();
this.destroyOtherComp();
this.container.style.width = '';
select('.' + SPLITPREVIEW, this.splitBtn.element).style.backgroundColor
= this.convertToRgbString(this.hexToRgb(this.value));
this.container.innerHTML = '';
removeClass([this.container], [PICKERCONTENT, PALETTECONTENT]);
if (Browser.isDevice && this.modal) {
removeClass([document.body], 'e-colorpicker-overflow');
this.modal.style.display = 'none';
this.modal.outerHTML = '';
this.modal = null;
}
};
ColorPicker.prototype.createPalette = function () {
classList(this.container, [PALETTECONTENT], [PICKERCONTENT]);
if (this.presetColors) {
var paletteGroup = this.createElement('div', { className: 'e-custom-palette' });
this.appendElement(paletteGroup);
var keys = Object.keys(this.presetColors);
if (keys.length === 1) {
this.appendPalette(this.presetColors[keys[0]], keys[0], paletteGroup);
}
else {
for (var i = 0, len = keys.length; i < len; i++) {
this.appendPalette(this.presetColors[keys[i]], keys[i], paletteGroup);
}
}
if (selectAll('.e-row', paletteGroup).length > 10) {
addClass([paletteGroup], 'e-palette-group');
}
}
else {
this.appendPalette(presets.default, 'default');
}
if (this.mode === 'Palette' && !this.modeSwitcher && this.noColor) {
this.setNoColor();
}
if (this.showRecentColors && this.recentColors && this.recentColors.length > 0) {
this.renderRecentColor();
}
var width = parseInt(getComputedStyle(this.container).borderBottomWidth, 10);
this.container.style.width = formatUnit(this.container.children[0].offsetWidth + width + width);
this.rgb = this.hexToRgb(this.roundValue(this.value));
this.hsv = this.rgbToHsv.apply(this, this.rgb);
};
ColorPicker.prototype.renderRecentColor = function () {
var _this = this;
var recentClrWpr = this.container.querySelector('.e-clr-pal-rec-wpr');
if (recentClrWpr) {
detach(recentClrWpr);
}
var recentColorWrapper = this.createElement('div', { className: 'e-clr-pal-rec-wpr' });
var refEle = this.container.querySelector('.e-switch-ctrl-btn');
if (refEle) {
this.container.insertBefore(recentColorWrapper, refEle);
}
else {
this.container.appendChild(recentColorWrapper);
}
var recentClrSpan = this.createElement('label', { className: 'e-recent-clr-span' });
recentClrSpan.textContent = this.l10n.getConstant('RecentColors');
recentColorWrapper.appendChild(recentClrSpan);
if (this.recentColors.length > 0) {
this.recentColors = this.recentColors.filter(function (item, index) { return _this.recentColors.indexOf(item) === index; });
while (this.recentColors.length > 10) {
this.recentColors.pop();
}
this.appendPalette(this.recentColors, 'recent-color', recentColorWrapper);
}
};
ColorPicker.prototype.firstPaletteFocus = function () {
if (!select('.' + SELECT, this.container.children[0])) {
selectAll('.' + PALETTES, this.container)[0].focus();
}
};
ColorPicker.prototype.appendPalette = function (colors, key, refEle) {
var palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0', 'role': 'grid' } });
if (key === 'recent-color') {
palette.classList.add('e-recent-palette');
}
if (refEle) {
refEle.appendChild(palette);
}
else {
this.appendElement(palette);
}
var row;
var tile;
var roundedColor;
for (var i = 0, len = colors.length; i < len; i++) {
if (i === 0 || i % this.columns === 0) {
row = this.createElement('div', {
className: 'e-row', attrs: { 'role': 'row' }
});
palette.appendChild(row);
}
roundedColor = this.roundValue(colors[i]).toLowerCase();
tile = this.createElement('span', {
className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false' }
});
this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });
row.appendChild(tile);
if (this.value === roundedColor && key !== 'recent-color') {
this.addTileSelection(tile);
palette.focus();
}
tile.style.backgroundColor = this.convertToRgbString(this.hexToRgb(roundedColor));
}
};
ColorPicker.prototype.setNoColor = function () {
var noColorEle = this.container.querySelector('.e-row').children[0];
noColorEle.classList.add(NOCOLOR);
if (!this.value) {
noColorEle.classList.add(SELECT);
closest(noColorEle, '.' + PALETTES).focus();
}
['aria-selected', 'aria-label'].forEach(function (attr) { noColorEle.removeAttribute(attr); });
noColorEle.style.backgroundColor = '';
};
ColorPicker.prototype.appendElement = function (ele, insertPos) {
if (insertPos === void 0) { insertPos = 0; }
var refEle = this.container.children[insertPos];
if (refEle) {
this.container.insertBefore(ele, refEle);
}
else {
this.container.appendChild(ele);
}
};
ColorPicker.prototype.addTileSelection = function (ele) {
if (ele) {
ele.classList.add(SELECT);
ele.setAttribute('aria-selected', 'true');
}
};
ColorPicker.prototype.createPicker = function () {
classList(this.container, [PICKERCONTENT], [PALETTECONTENT]);
var hsvContainer = this.createElement('div', { className: HSVCONTAINER });
this.appendElement(hsvContainer);
hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));
var dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });
hsvContainer.appendChild(dragHandler);
if (this.value === null || this.value === '') {
this.value = '#008000ff';
}
this.rgb = this.hexToRgb(this.value);
this.hsv = this.rgbToHsv.apply(this, this.rgb);
this.setHsvContainerBg();
this.setHandlerPosition();
this.createSlider();
this.createDragTooltip();
};
ColorPicker.prototype.setHsvContainerBg = function (h) {
if (h === void 0) { h = this.hsv[0]; }
this.getHsvContainer().style.backgroundColor = this.convertToRgbString(this.hsvToRgb(h, 100, 100, 1));
};
ColorPicker.prototype.getHsvContainer = function () {
return select('.' + HSVCONTAINER, this.container);
};
ColorPicker.prototype.setHandlerPosition = function () {
var dragHandler = this.getDragHandler();
var hsvArea = select('.' + HSVAREA, this.container);
if (this.enableRtl) {
dragHandler.style.left = formatUnit((hsvArea.offsetWidth - dragHandler.offsetWidth / 2.5) * Math.abs(100 - this.hsv[1]) / 100);
}
else {
dragHandler.style.left = formatUnit((hsvArea.offsetWidth - dragHandler.offsetWidth / 2.5) * this.hsv[1] / 100);
}
dragHandler.style.top = formatUnit((hsvArea.offsetHeight - dragHandler.offsetHeight / 2.5) * (100 - this.hsv[2]) / 100);
};
ColorPicker.prototype.createSlider = function () {
var sliderPreviewWrapper = this.createElement('div', { className: 'e-slider-preview' });
this.appendElement(sliderPreviewWrapper, 1);
this.createPreview(sliderPreviewWrapper);
var sliderWrapper = this.createElement('div', { className: 'e-colorpicker-slider' });
sliderPreviewWrapper.insertBefore(sliderWrapper, sliderPreviewWrapper.children[0]);
var slider = this.createElement('div', { className: 'e-hue-slider' });
sliderWrapper.appendChild(slider);
this.hueSlider = new Slider({
value: this.hsv[0],
min: 0,
max: 359,
enableRtl: this.enableRtl,
enabled: !this.disabled,
change: this.hueChange.bind(this)
});
this.hueSlider.createElement = this.createElement;
this.hueSlider.appendTo(slider);
if (this.enableOpacity) {
slider = this.createElement('div', { className: 'e-opacity-slider' });
sliderWrapper.appendChild(slider);
this.createOpacitySlider(slider);
}
};
ColorPicker.prototype.createOpacitySlider = function (slider) {
this.opacitySlider = new Slider({
value: this.rgb[3] * 100,
min: 0,
max: 100,
enableRtl: this.enableRtl,
enabled: !this.disabled,
change: this.opacityChange.bind(this)
});
this.opacitySlider.createElement = this.createElement;
this.opacitySlider.appendTo(slider);
var opacityBgTrack = this.createElement('div', { className: 'e-opacity-empty-track' });
slider.appendChild(opacityBgTrack);
this.updateOpacitySliderBg();
};
ColorPicker.prototype.updateOpacitySliderBg = function () {
var direction = this.enableRtl ? 'to left' : 'to right';
var opacityEle = select('.e-opacity-empty-track', this.opacitySlider.element);
if (opacityEle) {
opacityEle.style.background =
'linear-gradient(' + direction + ', rgba(' + this.rgb.slice(0, 3) + ', 0) 0%, ' +
this.convertToRgbString(this.rgb.slice(0, 3)) + ' 100%)';
}
};
ColorPicker.prototype.hueChange = function (args) {
this.hsv[0] = args.value;
this.setHsvContainerBg();
this.convertToOtherFormat();
};
ColorPicker.prototype.opacityChange = function (args) {
var value = args.value;
var pValue = this.rgbToHex(this.rgb);
this.hsv[3] = value / 100;
this.rgb[3] = value / 100;
var cValue = this.rgbToHex(this.rgb);
this.updateOpacityInput(value);
var rgb = this.convertToRgbString(this.rgb);
this.updatePreview(rgb);
this.triggerEvent(cValue, pValue, rgb);
};
ColorPicker.prototype.updateOpacityInput = function (value) {
if (this.enableOpacity && !this.getWrapper().classList.contains(HIDEVALUE)) {
var opacityTextBoxInst = getInstance(select('.' + OPACITY, this.container), NumericTextBox);
opacityTextBoxInst.value = value;
opacityTextBoxInst.dataBind();
}
};
ColorPicker.prototype.createPreview = function (parentEle) {
var previewContainer = this.createElement('div', { className: PREVIEW });
parentEle.appendChild(previewContainer);
var preview = this.createElement('span', { className: 'e-preview ' + CURRENT });
previewContainer.appendChild(preview);
var colorValue = this.convertToRgbString(this.rgb);
preview.style.backgroundColor = colorValue;
preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS });
previewContainer.appendChild(preview);
preview.style.backgroundColor = colorValue;
};
ColorPicker.prototype.isPicker = function () {
return !this.container.classList.contains(PALETTECONTENT);
};
ColorPicker.prototype.getPopupEle = function () {
return this.container.parentElement;
};
ColorPicker.prototype.createNumericInput = function (element, value, label, max) {
var _this = this;
var numericInput = new NumericTextBox({
value: value,
placeholder: label,
min: 0,
max: max,
format: '###.##',
showSpinButton: false,
floatLabelType: 'Always',
enableRtl: this.enableRtl,
enabled: !this.disabled,
readonly: this.isPicker() ? false : true,
change: function (args) {
if (args.event) {
_this.inputHandler(args.event);
}
}
});
numericInput.createElement = this.createElement;
numericInput.appendTo(element);
};
ColorPicker.prototype.createInput = function () {
var isPicker = this.isPicker();
var wrapper = this.getWrapper();
if ((isPicker && !wrapper.classList.contains(HIDEVALUE)) || (!isPicker && wrapper.classList.contains(SHOWVALUE))) {
var inputWrap = this.createElement('div', { className: INPUTWRAPPER });
if (isPicker) {
this.appendElement(inputWrap, 2);
}
else {
this.appendElement(inputWrap, 1);
}
var container = this.createElement('div', { className: 'e-input-container' });
inputWrap.appendChild(container);
if (!wrapper.classList.contains(HIDEVALUESWITCH)) {
this.appendValueSwitchBtn(inputWrap);
}
if (!wrapper.classList.contains(HIDEHEX)) {
var hexInput = this.createElement('input', {
className: HEX,
attrs: { 'maxlength': '7', 'spellcheck': 'false', 'aria-label': 'HEX' }
});
container.appendChild(hexInput);
Input.createInput({
element: hexInput,
floatLabelType: 'Always',
properties: {
placeholder: 'HEX',
enableRtl: this.enableRtl,
enabled: !this.disabled,
readonly: this.isPicker() ? false : true
}
}, this.createElement);
Input.setValue(this.value.slice(0, 7), hexInput);
hexInput.addEventListener('input', this.inputHandler.bind(this));
}
if (!wrapper.classList.contains(HIDERGBA)) {
var label = void 0;
var value = void 0;
if (this.isRgb) {
label = 'RGB';
value = this.rgb;
}
else {
label = 'HSV';
value = this.hsv;
}
var clsName = ['rh', 'gs', 'bv'];
for (var i = 0; i < 3; i++) {
this.createNumericInput(container.appendChild(this.createElement('input', { className: 'e-' + clsName[i] + '-value' })), value[i], label[i], 255);
}
if (this.enableOpacity) {
this.appendOpacityValue(container);
}
}
}
};
ColorPicker.prototype.appendOpacityValue = function (container) {
this.createNumericInput(container.appendChild(this.createElement('input', { className: OPACITY })), this.rgb[3] * 100, 'A', 100);
};
ColorPicker.prototype.appendValueSwitchBtn = function (targetEle) {
var valueSwitchBtn = this.createElement('button', {
className: 'e-icons e-css e-btn e-flat e-icon-btn ' + FORMATSWITCH,
attrs: { 'title': 'Toggle format' }
});
targetEle.appendChild(valueSwitchBtn);
if (this.isPicker() && !this.getWrapper().classList.contains(HIDERGBA)) {
valueSwitchBtn.addEventListener('click', this.formatSwitchHandler.bind(this));
}
};
ColorPicker.prototype.createCtrlBtn = function () {
if (this.modeSwitcher || this.showButtons) {
this.l10n.setLocale(this.locale);
var btnWrapper = this.createElement('div', { className: CTRLSWITCH });
this.container.appendChild(btnWrapper);
if (this.showButtons) {
var controlBtnWrapper = this.createElement('div', { className: CTRLBTN });
btnWrapper.appendChild(controlBtnWrapper);
var apply = this.l10n.getConstant('Apply');
controlBtnWrapper.appendChild(this.createElement('button', {
innerHTML: apply,
className: 'e-btn e-css e-flat e-primary e-small ' + APPLY,
attrs: { 'title': apply }
}));
var cancel = this.l10n.getConstant('Cancel');
controlBtnWrapper.appendChild(this.createElement('button', {
innerHTML: cancel,
className: 'e-btn e-css e-flat e-small ' + CANCEL,
attrs: { 'title': cancel }
}));
}
if (this.modeSwitcher) {
this.appendModeSwitchBtn();
}
}
};
ColorPicker.prototype.appendModeSwitchBtn = function () {
var modeSwitcher = this.createElement('button', {
className: 'e-icons e-btn e-flat e-icon-btn ' + MODESWITCH, attrs: { title: this.l10n.getConstant('ModeSwitcher') }
});
select('.' + CTRLSWITCH, this.container).insertBefore(modeSwitcher, select('.' + CTRLBTN, this.container));
};
ColorPicker.prototype.createDragTooltip = function () {
var _this = this;
var tooltip = new Tooltip({
opensOn: 'Custom',
showTipPointer: false,
cssClass: 'e-color-picker-tooltip',
htmlAttributes: { title: 'tooltip' },
beforeOpen: function (args) {
_this.tooltipEle = args.element;
},
animation: { open: { effect: 'None' }, close: { effect: 'None' } }
});
tooltip.createElement = this.createElement;
tooltip.appendTo(this.container);
tooltip.open(this.container);
this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();
this.tooltipEle.setAttribute('aria-label', 'colorpicker-tooltip');
select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));
};
ColorPicker.prototype.getTooltipInst = function () {
return getInstance(this.container, Tooltip);
};
ColorPicker.prototype.setTooltipOffset = function (value) {
this.getTooltipInst().offsetY = value;
};
ColorPicker.prototype.toggleDisabled = function (enable) {
if (enable) {
this.getWrapper().classList.add(DISABLED);
}
else {
this.getWrapper().classList.remove(DISABLED);
}
if (this.showButtons) {
([].slice.call(selectAll('.e-btn', this.container))).forEach(function (ele) {
if (enable) {
attributes(ele, { 'disabled': '' });
}
else {
ele.removeAttribute('disabled');
}
});
}
};
ColorPicker.prototype.convertToRgbString = function (rgb) {
return rgb.length ? rgb.length === 4 ? 'rgba(' + rgb.join() + ')' : 'rgb(' + rgb.join() + ')' : '';
};
ColorPicker.prototype.convertToHsvString = function (hsv) {
return hsv.length === 4 ? 'hsva(' + hsv.join() + ')' : 'hsv(' + hsv.join() + ')';
};
ColorPicker.prototype.updateHsv = function () {
this.hsv[1] = this.hsv[1] > 100 ? 100 : this.hsv[1];
this.hsv[2] = this.hsv[2] > 100 ? 100 : this.hsv[2];
this.setHandlerPosition();
};
ColorPicker.prototype.convertToOtherFormat = function (isKey, e) {
if (isKey === void 0) { isKey = false; }
var pValue = this.rgbToHex(this.rgb);
this.rgb = this.hsvToRgb.apply(this, this.hsv);
var cValue = this.rgbToHex(this.rgb);
var rgba = this.convertToRgbString(this.rgb);
this.updatePreview(rgba);
this.updateInput(cValue);
this.triggerEvent(cValue, pValue, rgba, isKey, e);
};
ColorPicker.prototype.updateInput = function (value) {
var wrapper = this.getWrapper();
if (!wrapper.classList.contains(HIDEVALUE)) {
if (!wrapper.classList.contains(HIDEHEX)) {
Input.setValue(value.substr(0, 7), select('.' + HEX, this.container));
}
if (!wrapper.classList.contains(HIDERGBA)) {
if (this.isRgb) {
this.updateValue(this.rgb, false);
}
else {
this.updateValue(this.hsv, false);
}
}
}
};
ColorPicker.prototype.updatePreview = function (value) {
if (this.enableOpacity) {
this.updateOpacitySliderBg();
}
select('.e-tip-transparent', this.tooltipEle).style.backgroundColor = value;
select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = value;
select('.' + PREVIEW + ' .' + PREVIOUS, this.container).style.backgroundColor
= this.convertToRgbString(this.hexToRgb(this.value));
};
ColorPicker.prototype.getDragHandler = function () {
return select('.' + HANDLER, this.container);
};
ColorPicker.prototype.removeTileSelection = function () {
var selectedEle = [].slice.call(selectAll('.' + SELECT, this.container));
selectedEle.forEach(function (ele) {
ele.classList.remove(SELECT);
ele.setAttribute('aria-selected', 'false');
});
};
ColorPicker.prototype.convertRgbToNumberArray = function (value) {
return (value.slice(value.indexOf('(') + 1, value.indexOf(')'))).split(',').map(function (n, i) {
return (i !== 3) ? parseInt(n, 10) : parseFloat(n);
});
};
/**
* To get color value in specified type.
*
* @param {string} value - Specify the color value.
* @param {string} type - Specify the type to which the specified color needs to be converted.
* @method getValue
* @returns {string} - Color value
*/
ColorPicker.prototype.getValue = function (value, type) {
if (!value) {
value = this.value;
}
type = !type ? 'hex' : type.toLowerCase();
if (value[0] === 'r') {
var cValue = this.convertRgbToNumberArray(value);
if (type === 'hex' || type === 'hexa') {
var hex = this.rgbToHex(cValue);
return type === 'hex' ? hex.slice(0, 7) : hex;
}
else {
if (type === 'hsv') {
return this.convertToHsvString(this.rgbToHsv.apply(this, cValue.slice(0, 3)));
}
else {
if (type === 'hsva') {
return this.convertToHsvString(this.rgbToHsv.apply(this, cValue));
}
else {
return 'null';
}
}
}
}
else {
if (value[0] === 'h') {
var cValue = this.hsvToRgb.apply(this, this.convertRgbToNumberArray(value));
if (type === 'rgba') {
return this.convertToRgbString(cValue);
}
else {
if (type === 'hex' || type === 'hexa') {
var hex = this.rgbToHex(cValue);
return type === 'hex' ? hex.slice(0, 7) : hex;
}
else {
if (type === 'rgb') {
return this.convertToRgbString(cValue.slice(0, 3));
}
else {
return 'null';
}
}
}
}
else {
value = this.roundValue(value);
var rgb = this.hexToRgb(value);
if (type === 'rgb' || type === 'hsv') {
rgb = rgb.slice(0, 3);
}
if (type === 'rgba' || type === 'rgb') {
return this.convertToRgbString(rgb);
}
else {
if (type === 'hsva' || type === 'hsv') {
return this.convertToHsvString(this.rgbToHsv.apply(this, rgb));
}
else {
if (type === 'hex') {
return value.slice(0, 7);
}
else {
if (type === 'a') {
return rgb[3].toString();
}
else {
return 'null';
}
}
}
}
}
}
};
/**
* To show/hide ColorPicker popup based on current state of the SplitButton.
*
* @method toggle
* @returns {void}
*/
ColorPicker.prototype.toggle = function () {
if (this.container.parentElement.classList.contains('e-popup-close')) {
this.splitBtn.toggle();
}
else {
this.closePopup(null);
}
};
/**
* Get component name.
*
* @returns {string} - Module Name
* @private
*/
ColorPicker.prototype.getModuleName = function () {
return 'colorpicker';
};
/**
* Gets the properties to be maintained in the persisted state.
*
* @returns {string} - Persist data
*/
ColorPicker.prototype.getPersistData = function () {
return this.addOnPersist(['value']);
};
ColorPicker.prototype.wireEvents = function () {
if (this.isPicker()) {
var dragHandler = this.getDragHandler();
EventHandler.add(dragHandler, 'keydown', this.pickerKeyDown, this);
var ctrlBtn = select('.' + CTRLBTN, this.container);
if (ctrlBtn) {
EventHandler.add(ctrlBtn, 'keydown', this.ctrlBtnKeyDown, this);
}
EventHandler.add(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown, this);
if (this.modeSwitcher || this.showButtons) {
this.addCtrlSwitchEvent();
}
EventHandler.add(select('.' + PREVIOUS, this.container), 'click', this.previewHandler, this);
}
else {
EventHandler.add(this.container, 'click', this.paletteClickHandler, this);
EventHandler.add(this.container, 'keydown', this.paletteKeyDown, this);
}
};
ColorPicker.prototype.formResetHandler = function () {
this.value = this.initialInputValue;
attributes(this.element, { 'value': this.initialInputValue });
};
ColorPicker.prototype.addCtrlSwitchEvent = function () {
var ctrlSwitchBtn = select('.' + CTRLSWITCH, this.container);
if (ctrlSwitchBtn) {
EventHandler.add(ctrlSwitchBtn, 'click', this.btnClickHandler, this);
}
};
ColorPicker.prototype.ctrlBtnKeyDown = function (e) {
if (e.keyCode === 13) {
var applyBtn = select('.' + APPLY, this.container);
if (applyBtn) {
var cValue = this.rgbToHex(this.rgb);
this.triggerChangeEvent(cValue);
}
this.splitBtn.element.focus();
}
};
ColorPicker.prototype.pickerKeyDown = function (e) {
switch (e.keyCode) {
case 39:
this.handlerDragPosition(1, this.enableRtl ? -1 : 1, e);
break;
case 37:
this.handlerDragPosition(1, this.enableRtl ? 1 : -1, e);
break;
case 38:
this.handlerDragPosition(2, 1, e);
break;
case 40:
this.handlerDragPosition(2, -1, e);
break;
case 13: {
e.preventDefault();
var cValue = this.rgbToHex(this.rgb);
this.enterKeyHandler(cValue);
}
}
};
ColorPicker.prototype.enterKeyHandler = function (value) {
this.triggerChangeEvent(value);
if (!this.inline) {
this.splitBtn.element.focus();
}
};
ColorPicker.prototype.closePopup = function (e) {
var _this = this;
var beforeCloseArgs = { element: this.container, event: e, cancel: false };
this.trigger('beforeClose', beforeCloseArgs, function (observedcloseArgs) {
if (!observedcloseArgs.cancel) {
_this.splitBtn.toggle();
_this.onPopupClose();
}
});
};
ColorPicker.prototype.triggerChangeEvent = function (value, e) {
var hex = value.slice(0, 7);
this.trigger('change', {
currentValue: { hex: hex, rgba: this.convertToRgbString(this.rgb) }, event: e,
previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) },
value: this.enableOpacity ? value : hex
});
if (this.showRecentColors) {
this.recentColors.unshift(hex);
if (this.inline) {
this.renderRecentColor();
}
}
if (this.enableOpacity) {
this.setProperties({ 'value': value }, true);
}
else {
this.setProperties({ 'value': hex }, true);
}
this.element.value = hex ? hex : '#000000';
};
ColorPicker.prototype.handlerDragPosition = function (prob, value, e) {
e.preventDefault();
this.hsv[prob] += value * (e.ctrlKey ? 1 : 3);
if (this.hsv[prob] < 0) {
this.hsv[prob] = 0;
}
this.updateHsv();
this.convertToOtherFormat(true, e);
};
ColorPicker.prototype.handlerDown = function (e) {
e.preventDefault();
if (e.type === 'mousedown') {
this.clientX = Math.abs(e.pageX - pageXOffset);
this.clientY = Math.abs(e.pageY - pageYOffset);
this.setTooltipOffset(8);
}
else {
this.clientX = Math.abs(e.changedTouches[0].pageX - pageXOffset);
this.clientY = Math.abs(e.changedTouches[0].pageY - pageYOffset);
this.setTooltipOffset(-8);
}
this.setHsv(this.clientX, this.clientY);
this.getDragHandler().style.transition = 'left .4s cubic-bezier(.25, .8, .25, 1), top .4s cubic-bezier(.25, .8, .25, 1)';
this.updateHsv();
this.convertToOtherFormat(false, e);
this.getDragHandler().focus();
EventHandler.add(document, 'mousemove touchmove', this.handlerMove, this);
EventHandler.add(document, 'mouseup touchend', this.handlerEnd, this);
};
ColorPicker.prototype.handlerMove = function (e) {
if (e.type !== 'touchmove') {
e.preventDefault();
}
var x;
var y;
if (e.type === 'mousemove') {
x = Math.abs(e.pageX - pageXOffset);
y = Math.abs(e.pageY - pageYOffset);
}
else {
x = Math.abs(e.changedTouches[0].pageX - pageXOffset);
y = Math.abs(e.changedTouches[0].pageY - pageYOffset);
}
this.setHsv(x, y);
var dragHandler = this.getDragHandler();
this.updateHsv();
this.convertToOtherFormat(false, e);
this.getTooltipInst().refresh(dragHandler);
if (!this.tooltipEle.style.transform) {
if (Math.abs(this.clientX - x) > 8 || Math.abs(this.clientY - y) > 8) {
select('.' + HSVAREA, this.container).style.cursor = 'pointer';
dragHandler.style.transition = 'none';
if (!this.inline) {
this.tooltipEle.style.zIndex = (parseInt(this.getPopupEle().style.zIndex, 10) + 1).toString();
}
this.tooltipEle.style.transform = 'rotate(45deg)';
dragHandler.classList.add('e-hide-handler');
}
}
};
ColorPicker.prototype.setHsv = function (clientX, clientY) {
var ele = select('.' + HSVAREA, this.container);
var position = ele.getBoundingClientRect();
if (this.enableRtl) {
clientX = clientX > position.right ? 0 : Math.abs(clientX - position.right);
}
else {
clientX = clientX > position.left ? Math.abs(clientX - position.left) : 0;
}
clientY = clientY > position.top ? Math.abs(clientY - position.top) : 0;
this.hsv[2] = Math.round(Number(100 * (ele.offsetHeight -
Math.max(0, Math.min(ele.offsetHeight, (clientY - ele.offsetTop)))) / ele.offsetHeight) * 10) / 10;
this.hsv[1] =
Math.round(Number(100 * (Math.max(0, Math.min(ele.offsetWidth, (clientX - ele.offsetLeft)))) / ele.offsetWidth) * 10) / 10;
};
ColorPicker.prototype.handlerEnd = function (e) {
if (e.type !== 'touchend') {
e.preventDefault();
}
EventHandler.remove(document, 'mousemove touchmove', this.handlerMove);
EventHandler.remove(document, 'mouseup touchend', this.handlerEnd);
var dragHandler = this.getDragHandler();
select('.' + HSVAREA, this.container).style.cursor = '';
if (this.tooltipEle.style.transform) {
this.tooltipEle.style.transform = '';
dragHandler.classList.remove('e-hide-handler');
}
if (!this.inline && !this.showButtons) {
this.closePopup(e);
}
};
ColorPicker.prototype.btnClickHandler = function (e) {
var target = e.target;
if (closest(target, '.' + MODESWITCH)) {
e.stopPropagation();
this.switchToPalette();
}
else {
if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {
this.ctrlBtnClick(target, e);
}
}
};
ColorPicker.prototype.switchToPalette = function () {
this.trigger('beforeModeSwitch', { element: this.container, mode: 'Palette' });
this.unWireEvents();
this.destroyOtherComp();
detach(select('.e-slider-preview', this.container));
if (!this.getWrapper().classList.contains(HIDEVALUE)) {
remove(select('.' + INPUTWRAPPER, this.container));
}
detach(this.getHsvContainer());
this.createPalette();
this.firstPaletteFocus();
this.createInput();
this.refreshPopupPos();
//for image editor popup position refreshing
if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
this.refreshImageEditorPopupPos();
}
this.wireEvents();
this.trigger('onModeSwitch', { element: this.container, mode: 'Palette' });
};
//for image editor popup position refreshing
ColorPicker.prototype.refreshImageEditorPopupPos = function () {
if (Browser.isDevice) {
var popupEle = this.getPopupEle();
popupEle.style.left = formatUnit(0 + pageXOffset);
popupEle.style.top = formatUnit(0 + pageYOffset);
var btnElem = document.querySelector("#" + this.element.parentElement.parentElement.id.split('-popup')[0]);
if (btnElem) {
//eslint-disable-next-line @typescript-eslint/no-explicit-any
popupEle.parentElement.ej2_instances[0].refreshPosition(btnElem);
}
}
};
ColorPicker.prototype.refreshPopupPos = function ()