@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
1,682 lines • 68.8 kB
JavaScript
Object.defineProperties(exports, {
__esModule: { value: true },
[Symbol.toStringTag]: { value: "Module" }
});
require("./kendo.core-kmRaf_Lg.js");
require("./kendo.icons.js");
require("./kendo.html.button.js");
require("./kendo.button.js");
require("./kendo.popup.js");
require("./kendo.actionsheet.js");
require("./kendo.userevents.js");
require("./kendo.numerictextbox.js");
require("./kendo.textbox.js");
require("./kendo.binder.js");
require("./kendo.color.js");
require("./kendo.slider.js");
//#region ../src/colorpicker/colorselector.js
(function($, undefined) {
var kendo = window.kendo, ui = kendo.ui, Widget = ui.Widget, parseColor = kendo.parseColor, TabKeyTrap = kendo.ui.Popup.TabKeyTrap, extend = $.extend, NS = ".kendoColorTools", KEYDOWN_NS = "keydown" + NS, KENDO_KEYDOWN = "kendoKeydown", DISABLED = "k-disabled";
var ColorSelector = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
element = that.element;
options = that.options;
if (element.is("input")) {
that._initialValue();
that._preventDefaultLabelClick();
} else that._value = parseColor(options.value);
that._tabIndex = element.attr("tabIndex") || 0;
if (options._standalone) that._triggerSelect = that._triggerChange;
},
options: {
name: "ColorSelector",
ARIATemplate: (data) => `Current selected color is ${data || "none"}`,
value: null,
_standalone: true
},
events: [
"change",
"select",
"forceSelect",
"cancel",
KENDO_KEYDOWN
],
color: function(value) {
if (value !== undefined) {
this._value = parseColor(value);
if (this.element.is("input")) this._updateInput(this._value);
this._updateUI(this._value);
}
return this._value;
},
value: function(color) {
color = this.color(color);
if (color) if (this.options.opacity) color = color.toCssRgba();
else color = color.toCss();
return color || null;
},
enable: function(enable) {
if (arguments.length === 0) enable = true;
if (this.element.is("input")) this.element.attr("disabled", !enable);
this.wrapper.toggleClass(DISABLED, !enable);
this._onEnable(enable);
},
_attachFocusEvents: function() {
this.wrapper.on(KEYDOWN_NS, this, this._navKeydown.bind(this)).on("focusout" + NS, this._navFocusout.bind(this));
},
_initialValue: function() {
var element = this.element, value = this.options.value || element.attr("value");
if (value) this._value = parseColor(value, true);
this.element.val(value);
},
_innerTabindex: function(value) {
this.wrapper.find(".k-draghandle, .k-button, .k-input-inner").attr("tabindex", value);
},
_isInputTypeColor: function() {
var el = this.element[0];
return /^input$/i.test(el.tagName) && /^color$/i.test(el.type);
},
_navFocusout: function() {
var that = this, wrapper = that.wrapper[0];
setTimeout(function() {
if (!wrapper.contains(document.activeElement)) that._releaseInnerFocus();
});
},
_navKeydown: function(e) {
var wrapper = this.wrapper;
if (e.keyCode === kendo.keys.ENTER && wrapper.attr("tabindex")) {
e.preventDefault();
this._trapInnerFocus();
} else if (e.keyCode === kendo.keys.ESC && wrapper.attr("tabindex") === undefined) {
this._releaseInnerFocus();
this.wrapper.trigger("focus");
}
},
_releaseInnerFocus: function() {
this._tabKeyTrap.removeTrap();
if (this.wrapper) {
this.wrapper.attr("tabindex", this._tabIndex);
this._innerTabindex(-1);
}
},
_select: function(color, nohooks) {
var prev = this._value;
color = this.color(color);
if (!nohooks) {
if (color && (!prev || !color.equals(prev)) || color === null && color !== prev) {
if (color === null && this.element.val) this.element.val(color);
this.element.trigger("change");
this.trigger("change", { value: this.value() });
} else if (!this._standalone) this.trigger("cancel");
}
},
_navigation: function() {
var value = this.value();
if (value && value.indexOf("rgba") > -1) value = value.replace("rgba", "RGBA");
if (this.options._otOfPicker) {
this._innerTabindex(-1);
this._attachFocusEvents();
this._tabKeyTrap = new TabKeyTrap(this.wrapper);
this._ariaTemplate = kendo.template(this.options.ARIATemplate);
this.wrapper.attr({
"aria-label": this._ariaTemplate(value || ""),
tabindex: this._tabIndex
});
} else {
this.wrapper.removeAttr("tabindex");
this.wrapper.removeAttr("aria-label");
this.wrapper.removeAttr("role");
this.wrapper.removeAttr("aria-keyshortcuts");
}
},
_trapInnerFocus: function() {
this._innerTabindex(0);
this.wrapper.removeAttr("tabindex");
this.wrapper.find(".k-hsv-draghandle").trigger("focus");
this._tabKeyTrap.trap();
},
_triggerSelect: function(color) {
triggerEvent(this, "select", color);
},
_triggerChange: function(color) {
triggerEvent(this, "change", color);
},
destroy: function() {
if (this.element) this.element.off(NS);
if (this.wrapper) {
this.wrapper.off(KEYDOWN_NS);
this.wrapper.off(NS).find("*").off(NS);
this.wrapper = null;
}
Widget.fn.destroy.call(this);
},
_preventDefaultLabelClick: function() {
var element = this.element, label = element.closest("label"), id = element.attr("id");
if (id) label = label.add("label[for=\"" + id + "\"]");
label.on("click", function(ev) {
ev.preventDefault();
});
},
_updateUI: $.noop,
_updateInput: function(value) {
var formattedValue = "", valueForLabel;
if (value) {
if (this._isInputTypeColor() || value.a == 1) formattedValue = value.toCss();
else formattedValue = value.toCssRgba();
this.element.val(formattedValue);
}
if (this.options._otOfPicker) {
if (!this._ariaTemplate) this._ariaTemplate = kendo.template(this.options.ARIATemplate);
valueForLabel = this.value();
if (valueForLabel && valueForLabel.indexOf("rgba") > -1) valueForLabel = valueForLabel.replace("rgba", "RGBA");
this.wrapper.attr("aria-label", this._ariaTemplate(valueForLabel || ""));
}
},
_selectOnHide: function() {
return null;
},
_cancel: function() {
this.trigger("cancel");
}
});
function triggerEvent(self, type, color) {
color = parseColor(color);
if (color && !color.equals(self.color()) || color !== self.color()) {
if (type == "change") {
self._value = color;
self._updateInput(self._value);
}
if (color && color.a != 1) color = color.toCssRgba();
else if (color) color = color.toCss();
self.trigger(type, { value: color });
}
}
extend(ui, { colorpicker: { ColorSelector } });
})(window.kendo.jQuery);
//#endregion
//#region ../src/colorpicker/contrastToolUtils.js
(function($, undefined) {
var colorpicker = kendo.ui.colorpicker, extend = $.extend, Color = kendo.Color, parseColor = kendo.parseColor, AA_CONTRAST = 4.5, AAA_CONTRAST = 7, STEP_COUNT = 16;
function getContrast(luminance1, luminance2) {
var brightest = Math.max(luminance1, luminance2);
var darkest = Math.min(luminance1, luminance2);
return (brightest + .05) / (darkest + .05);
}
function getContrastFromTwoRGBAs(a, b) {
return getContrast(getLuminance(getRGBFromRGBA(a, b)), getLuminance(getRGBFromRGBA(b, {
r: 0,
g: 0,
b: 0,
a: 1
})));
}
function getLuminance(rgb) {
var a = [
rgb.r,
rgb.g,
rgb.b
].map(function(v) {
v /= 255;
return v <= .03928 ? v / 12.92 : Math.pow((v + .055) / 1.055, 2.4);
});
return a[0] * .2126 + a[1] * .7152 + a[2] * .0722;
}
function getRGBFromRGBA(foregroundColor, backgroundColor) {
var r1 = fitIntoBounds(foregroundColor.r, 0, 255);
var g1 = fitIntoBounds(foregroundColor.g, 0, 255);
var b1 = fitIntoBounds(foregroundColor.b, 0, 255);
var a1 = fitIntoBounds(foregroundColor.a, 0, 1);
var r2 = fitIntoBounds(backgroundColor.r, 0, 255);
var g2 = fitIntoBounds(backgroundColor.g, 0, 255);
var b2 = fitIntoBounds(backgroundColor.b, 0, 255);
return {
r: Math.round((1 - a1) * r2 + a1 * r1),
g: Math.round((1 - a1) * g2 + a1 * g1),
b: Math.round((1 - a1) * b2 + a1 * b1)
};
}
function fitIntoBounds(contender, min, max) {
if (!isPresent(contender) || isNaN(contender)) return min;
return contender <= min ? min : contender >= max ? max : contender;
}
function isPresent(value) {
return value !== null && value !== undefined;
}
function renderSvgCurveLine(gradientRectMetrics, hsva, backgroundColor) {
var findValue = function(contrast, saturation, low, high, comparer) {
var mid = (low + high) / 2;
var currentContrast = getContrastFromTwoRGBAs(parseColor(getColorFromHSV(extend({}, hsva, {
s: saturation / gradientRectMetrics.width,
v: 1 - mid / gradientRectMetrics.height
}))).toBytes(), parseColor(backgroundColor).toBytes());
if (low + .5 > high) if (currentContrast < contrast + 1 && currentContrast > contrast - 1) return mid;
else return null;
if (comparer(currentContrast, contrast)) return findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
return findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
};
var comparer = function(a, b) {
return a > b;
};
var reversedComparer = function(a, b) {
return a < b;
};
var getPaths = function(contrast, stepCount, reversed) {
var points = [];
for (var i = 0; i <= gradientRectMetrics.width; i += gradientRectMetrics.width / stepCount) {
var value = findValue(contrast, i, 0, gradientRectMetrics.height, reversed ? reversedComparer : comparer);
if (value !== null) points.push([i, value]);
}
return points;
};
var bezierCommandCalc = bezierCommand(controlPoint(line));
var paths = svgPath(getPaths(AA_CONTRAST, STEP_COUNT, false), bezierCommandCalc) + svgPath(getPaths(AA_CONTRAST, STEP_COUNT, true), bezierCommandCalc) + svgPath(getPaths(AAA_CONTRAST, STEP_COUNT, false), bezierCommandCalc) + svgPath(getPaths(AAA_CONTRAST, STEP_COUNT, true), bezierCommandCalc);
return `<svg xmlns="http://www.w3.org/2000/svg" ${kendo.attr("style-position")}="absolute" ${kendo.attr("style-overflow")}="visible" ${kendo.attr("style-pointer-events")}="none" ${kendo.attr("style-left")}="0px" ${kendo.attr("style-top")}="0px" ${kendo.attr("style-z-index")}="3" >` + paths + "</svg>";
}
function svgPath(points, command) {
if (points.length === 0) return "";
var reducer = function(acc, point, i, a) {
return i === 0 ? kendo.format("M {0},{1}", point[0], point[1]) : kendo.format("{0} {1}", acc, command(point, i, a));
};
var d = points.reduce(reducer, "");
return kendo.format("<path d=\"{0}\" fill=\"none\" stroke=\"white\" stroke-width=\"1\"/>", d);
}
function bezierCommand(controlPointCalc) {
return function(point, i, a) {
var cps = controlPointCalc(a[i - 1], a[i - 2], point);
var cpe = controlPointCalc(point, a[i - 1], a[i + 1], true);
return kendo.format("C {0},{1} {2},{3} {4},{5}", cps[0], cps[1], cpe[0], cpe[1], point[0], point[1]);
};
}
function controlPoint(lineCalc) {
return function(current, previous, next, reverse) {
var p = previous || current;
var n = next || current;
var smooth = .1;
var l = lineCalc(p, n);
var angle = l.angle + (reverse ? Math.PI : 0);
var length = l.length * smooth;
return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
};
}
function line(pointA, pointB) {
var lengthX = pointB[0] - pointA[0];
var lengthY = pointB[1] - pointA[1];
return {
length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
angle: Math.atan2(lengthY, lengthX)
};
}
function getColorFromHSV(hsva) {
var hue = fitIntoBounds(hsva.h, 0, 359.9);
var saturation = fitIntoBounds(hsva.s, 0, 1);
var value = fitIntoBounds(hsva.v, 0, 1);
var alpha = fitIntoBounds(hsva.a, 0, 1);
return Color.fromHSV(hue, saturation, value, alpha).toCssRgba();
}
extend(colorpicker, { contrastToolUtils: {
getContrastFromTwoRGBAs,
renderSvgCurveLine
} });
})(window.kendo.jQuery);
//#endregion
//#region ../src/colorpicker/colorgradient.js
(function($, undefined) {
var kendo = window.kendo, ui = kendo.ui, Observable = kendo.Observable, parseColor = kendo.parseColor, extend = $.extend, encode = kendo.htmlEncode, Color = kendo.Color, KEYS = kendo.keys, BACKGROUNDCOLOR = "background-color", WHITE = "#ffffff", BLACK = "#000000", KEYDOWN_NS = "keydown.kendoColorTools", ColorSelector = ui.colorpicker.ColorSelector, contrastToolUtils = ui.colorpicker.contrastToolUtils;
function preventDefault(ev) {
ev.preventDefault();
}
function bind(callback, obj) {
return function() {
return callback.apply(obj, arguments);
};
}
var ColorInput = Observable.extend({
init: function(element, options) {
var that = this;
that.element = element;
that.options = options;
that._viewModel = kendo.observable({
switchMode: that.switchMode.bind(that),
keydown: that.keydown.bind(that),
isHEXMode: function() {
return this.get("format") === "hex";
},
isRGBMode: function() {
return this.get("format") === "rgb";
},
format: options.format,
formats: options.formats,
rgb: null,
hex: function() {
return this.get("rgb") !== null && this.get("rgb").toCss({ alpha: options.opacity });
}
});
that._changeHandler = that.change.bind(that);
that._viewModel.bind("change", that._changeHandler);
that._render();
that.element.on(KEYDOWN_NS, that, that.keydown.bind(that));
Observable.fn.init.call(that);
},
_template: kendo.template(({ options, ns }) => {
let optionsSize = options.size ? encode(options.size) : "";
let optionsTabIndex = encode(options.tabindex);
let vStackElement = "";
if (options.formats && options.formats.length > 1) vStackElement = `<div class="k-vstack"><button class="k-colorgradient-toggle-mode" data-${ns}role="button" data-${ns}icon="caret-alt-expand" data data-${ns}bind="click: switchMode" data-${ns}fill-mode="flat" data-${ns}size="${optionsSize}" title="${encode(options.messages.toggleFormat)}"></button></div>`;
let hexInputElement = "";
if (options.formats && options.formats.indexOf("hex") >= 0) {
let optionsMessagesHex = encode(options.messages.hex);
hexInputElement = `<div class="k-vstack${options._showAdaptiveView ? " k-flex-1" : ""}" data-${ns}bind="visible: isHEXMode"><input type="text" data-${ns}bind="value: hex" data-${ns}role="textbox" data-${ns}size="${optionsSize}" tabindex="${optionsTabIndex}" aria-label="${optionsMessagesHex}"/><label class="k-colorgradient-input-label">HEX</label></div>`;
}
let rgbaInputElement = "";
if (options.formats && options.formats.indexOf("rgb") >= 0) {
rgbaInputElement = `<div class="k-vstack" data-${ns}bind="visible: isRGBMode"><input tabindex="${optionsTabIndex}" data-${ns}bind="value: rgb.r" data-${ns}role="numerictextbox" data-${ns}size="${optionsSize}" data-${ns}max="255" data-${ns}min="0" data-${ns}decimals="0" data-${ns}spinners="false" data-${ns}format="n0" aria-label="${encode(options.messages.red)}" inputmode="decimal"/><label class="k-colorgradient-input-label">R</label></div><div class="k-vstack" data-${ns}bind="visible: isRGBMode"><input tabindex="${optionsTabIndex}" data-${ns}bind="value: rgb.g" data-${ns}role="numerictextbox" data-${ns}size="${optionsSize}" data-${ns}max="255" data-${ns}min="0" data-${ns}decimals="0" data-${ns}spinners="false" data-${ns}format="n0" aria-label="${encode(options.messages.green)}" inputmode="decimal"/><label class="k-colorgradient-input-label">G</label></div><div class="k-vstack" data-${ns}bind="visible: isRGBMode"><input tabindex="${optionsTabIndex}" data-${ns}bind="value: rgb.b" data-${ns}role="numerictextbox" data-${ns}size="${optionsSize}" data-${ns}max="255" data-${ns}min="0" data-${ns}decimals="0" data-${ns}spinners="false" data-${ns}format="n0" aria-label="${encode(options.messages.blue)}" inputmode="decimal"/><label class="k-colorgradient-input-label">B</label></div>`;
if (options.opacity) {
let optionsMessagesAlpha = options.messages.alpha;
rgbaInputElement += `<div class="k-vstack" data-${ns}bind="visible: isRGBMode"><input tabindex="${optionsTabIndex}" data-${ns}bind="value: rgb.a" data-${ns}role="numerictextbox" data-${ns}size="${optionsSize}" data-${ns}step="0.1" data-${ns}max="1" data-${ns}min="0" data-${ns}decimals="1" data-${ns}spinners="false" data-${ns}format="n1" aria-label="${optionsMessagesAlpha}" inputmode="decimal"/><label class="k-colorgradient-input-label">A</label></div>`;
}
}
return vStackElement + hexInputElement + rgbaInputElement;
}),
destroy: function() {
var that = this;
that._viewModel.unbind("change", that._changeHandler);
kendo.unbind(that.element);
kendo.destroy(that.element);
that.element.off(KEYDOWN_NS);
delete that._viewModel;
delete that._changeHandler;
},
change: function(ev) {
var that = this;
if (ev.field.indexOf("rgb") >= 0) {
that._color = that._tryParseColor(that._viewModel.rgb.toCssRgba());
that._viewModel.set("hex", that._color.toCss({ alpha: that.options.opacity }));
} else if (ev.field === "hex") {
that._color = that._tryParseColor(ev.sender[ev.field]);
that._viewModel.set("rgb", that._color);
}
if (!that._preventChangeEvent) that.trigger("change", { value: that._color });
},
keydown: function(ev) {
var that = this, textbox = $(ev.target).data("kendoTextBox");
if (ev.keyCode === KEYS.ENTER && $(ev.target).is("input")) {
if (textbox && textbox._change) textbox._change();
that.trigger("change", { value: that._color });
that.trigger("select", { value: that._color });
}
},
reset: function() {
var that = this;
that._preventChangeEvent = true;
that._viewModel.set("rgb", parseColor(BLACK));
delete that._preventChangeEvent;
},
switchMode: function() {
var that = this, model = that._viewModel, currentFormat = model.format, index = model.formats.indexOf(currentFormat) + 1;
index = index >= model.formats.length ? 0 : index;
that._preventChangeEvent = true;
that._viewModel.set("format", model.formats[index]);
delete that._preventChangeEvent;
},
value: function(color) {
var that = this;
that._color = color && color.toBytes() || parseColor(BLACK);
that._preventChangeEvent = true;
that._viewModel.set("rgb", that._color);
delete that._preventChangeEvent;
},
_render: function() {
var that = this;
that.element.append(that._template({
ns: kendo.ns,
guid: kendo.guid(),
options: that.options
})).parent();
kendo.bind(that.element, that._viewModel);
that.element.attr("data-" + kendo.ns + "stop", "stop");
},
_tryParseColor: function(color) {
var that = this;
try {
color = parseColor(color) || that._color;
} catch (error) {
color = that._color;
}
return color;
}
});
var ColorGradient = ColorSelector.extend({
init: function(element, options) {
var that = this, value;
ColorSelector.fn.init.call(that, element, options);
options = that.options = kendo.deepExtend({}, that.options, options);
if (options.messages.previewInput) options.messages.hex = options.messages.previewInput;
options.messages = options.messages ? $.extend(that.options.messages, options.messages) : that.options.messages;
that._wrapper();
that._sliders();
that._hsvArea();
value = that._value;
that._gradientInputs();
that._updateUI(value);
that._navigation();
ColorSelector.fn.endInit.call(this);
},
options: {
name: "ColorGradient",
opacity: false,
hsvDragARIATemplate: (data) => `Color well with two-dimensional slider for selecting saturation and value. Selected color is ${data || "none"}`,
input: true,
format: "hex",
formats: ["rgb", "hex"],
contrastTool: false,
size: undefined,
messages: {
contrastRatio: "Contrast ratio:",
fail: "Fail",
pass: "Pass",
hex: "HEX",
toggleFormat: "Toggle format",
red: "Red channel",
green: "Green channel",
blue: "Blue channel",
alpha: "Alpha channel"
},
_otOfPicker: true,
_showAdaptiveView: false
},
_template: kendo.template((options) => `<div class="k-colorgradient-canvas ${options._showAdaptiveView ? "k-vstack" : "k-hstack"}"><div class="k-hsv-rectangle"><div class="k-hsv-gradient"><div role="slider" aria-orientation="undefined" class="k-hsv-draghandle k-draghandle"></div></div></div><div class="k-hsv-controls ${options._showAdaptiveView ? "k-vstack" : "k-hstack"}"><input class="k-hue-slider k-colorgradient-slider" />` + (options.opacity ? "<input class=\"k-alpha-slider k-colorgradient-slider\" />" : "") + "</div></div>" + (options.input ? "<div class=\"k-colorgradient-inputs k-hstack\"></div>" : "") + (options.contrastTool ? "<div class=\"k-colorgradient-color-contrast k-vbox\"></div>" : "")),
focus: function() {
this._hsvHandle.trigger("focus");
},
setBackgroundColor: function(color) {
var that = this;
if (that.options.contrastTool) {
that.options.contrastTool = $.isPlainObject(that.options.contrastTool) ? extend({}, that.options.contrastTool, { backgroundColor: color }) : { backgroundColor: color };
that._updateColorContrast(that.color() || parseColor(WHITE));
}
},
_getHSV: function(h, s, v, a) {
var that = this, rect = that._hsvRect, width = rect.width(), height = rect.height(), handlePosition = this._hsvHandle.position();
if (!width || !height) return that.color() ? that.color().toHSV() : parseColor(BLACK);
if (h == null) h = that._hueSlider.value();
if (s == null) s = handlePosition.left / width;
if (v == null) v = 1 - handlePosition.top / height;
if (a == null) a = that._opacitySlider ? that._opacitySlider.value() / 100 : 1;
return Color.fromHSV(h, s, v, a);
},
_gradientInputs: function() {
var that = this, options = that.options;
if (that._colorgradientInputs.length) {
that._colorInput = new ColorInput(that._colorgradientInputs, extend({}, options, { tabindex: 0 }));
that._colorInput.bind("change", function(ev) {
that._updateUI(ev.value, true);
});
that._colorInput.bind("select", function(ev) {
var color = parseColor(ev.value);
that._select(color);
that.trigger("forceSelect", { value: that.value() });
});
}
},
_hsvArea: function() {
var that = this, hsvRect = that.wrapper.find(".k-hsv-rectangle"), hsvHandle = hsvRect.find(".k-draghandle").attr("tabIndex", 0).on(KEYDOWN_NS, that, bind(that._hsvKeydown, that)), value = this.value();
if (value && value.indexOf("rgba") > -1) value = value.replace("rgba", "RGBA");
if (!this._hsvDragAriaTemplate) this._hsvDragAriaTemplate = kendo.template(this.options.hsvDragARIATemplate);
hsvHandle.attr("aria-label", this._hsvDragAriaTemplate(value || ""));
function update(x, y) {
var offset = this.offset, dx = x - offset.left, dy = y - offset.top, rw = this.width, rh = this.height, dxrw = dx > rw ? rw : dx, dyrh = dy > rh ? rh : dy, resultX, resultY;
dx = dx < 0 ? 0 : dxrw;
dy = dy < 0 ? 0 : dyrh;
resultX = dx / rw;
resultY = 1 - dy / rh;
that._svChange(resultX, resultY);
}
that._hsvEvents = new kendo.UserEvents(hsvRect, {
global: true,
press: function(e) {
this.offset = kendo.getOffset(hsvRect);
this.width = hsvRect.width();
this.height = hsvRect.height();
hsvHandle.trigger("focus");
update.call(this, e.x.location, e.y.location);
},
start: function() {
hsvRect.addClass("k-dragging");
hsvHandle.trigger("focus");
},
move: function(e) {
e.preventDefault();
update.call(this, e.x.location, e.y.location);
},
end: function() {
hsvRect.removeClass("k-dragging");
}
});
that._hsvRect = hsvRect;
that._hsvHandle = hsvHandle;
},
_hsvKeydown: function(ev) {
var that = this;
function move(prop, d) {
var c = that._getHSV();
c[prop] += d * (ev.shiftKey ? .01 : .05);
if (c[prop] < 0) c[prop] = 0;
if (c[prop] > 1) c[prop] = 1;
that._updateUI(c);
preventDefault(ev);
}
function hue(d) {
var c = that._getHSV();
c.h += d * (ev.shiftKey ? 1 : 5);
if (c.h < 0) c.h = 0;
if (c.h > 359) c.h = 359;
that._updateUI(c);
preventDefault(ev);
}
switch (ev.keyCode) {
case KEYS.LEFT:
if (ev.ctrlKey) hue(-1);
else move("s", -1);
break;
case KEYS.RIGHT:
if (ev.ctrlKey) hue(1);
else move("s", 1);
break;
case KEYS.UP:
move(ev.ctrlKey && that._opacitySlider ? "a" : "v", 1);
break;
case KEYS.DOWN:
move(ev.ctrlKey && that._opacitySlider ? "a" : "v", -1);
break;
case KEYS.ENTER:
that._select(that._getHSV());
break;
case KEYS.F2:
that._colorInput.element.find("input").trigger("focus").select();
break;
case KEYS.ESC:
that._cancel();
break;
}
},
_onEnable: function(enable) {
var wrapper = this.wrapper;
this._hueSlider.enable(enable);
if (this._opacitySlider) this._opacitySlider.enable(enable);
wrapper.find("input").attr("disabled", !enable);
if (this.options._standalone) if (enable) wrapper.removeAttr("aria-disabled");
else wrapper.attr("aria-disabled", true);
},
_reset: function() {
var that = this;
if (that._colorInput) that._colorInput.reset();
that._resetHsv();
that._resetColorContrast();
},
_resetColorContrast: function() {
var that = this, contrastOptions = that.options.contrastTool;
if (that._contrastTool.length) that._updateColorContrast(contrastOptions.backgroundColor ? parseColor(contrastOptions.backgroundColor) : parseColor(WHITE));
},
_resetHsv: function() {
var that = this, color = parseColor(BLACK);
that._updateHsv(color);
},
_sliders: function() {
var that = this, wrapper = that.wrapper, hueSlider = wrapper.find(".k-hue-slider"), opacitySlider = wrapper.find(".k-alpha-slider");
function hueChange(e) {
that._updateUI(that._getHSV(e.value, null, null, null));
}
const slidersOrientation = that.options._showAdaptiveView ? "horizontal" : "vertical";
hueSlider.attr("aria-label", "hue");
that._hueSlider = hueSlider.kendoSlider({
min: 0,
max: 360,
tickPlacement: "none",
showButtons: false,
orientation: slidersOrientation,
slide: hueChange,
change: hueChange
}).data("kendoSlider");
function opacityChange(e) {
that._updateUI(that._getHSV(null, null, null, e.value / 100));
}
opacitySlider.attr("aria-label", "opacity");
that._opacitySlider = opacitySlider.kendoSlider({
min: 0,
max: 100,
tickPlacement: "none",
showButtons: false,
orientation: slidersOrientation,
slide: opacityChange,
change: opacityChange
}).data("kendoSlider");
},
_svChange: function(s, v) {
var color = this._getHSV(null, s, v, null);
this._updateUI(color);
},
_updateColorContrast: function(color) {
var that = this, contrastOptions = that.options.contrastTool, backgroundColor = contrastOptions.backgroundColor ? parseColor(contrastOptions.backgroundColor) : parseColor(WHITE), contrastRatio = contrastToolUtils.getContrastFromTwoRGBAs(parseColor(color.toCssRgba()), backgroundColor), contrastRatioTemplate = kendo.template(({ messages, ratio }) => `<div class="k-contrast-ratio"><span class="k-contrast-ratio-text">${encode(messages.contrastRatio)} ${encode(kendo.toString(ratio, "n2"))}</span><span class="k-contrast-validation !k-text-success">` + (ratio > 4.5 ? kendo.ui.icon("check") : "") + (ratio > 7 ? kendo.ui.icon("check") : "") + "</span></div>"), labelTemplate = kendo.template(({ messages, ratio, limit, level }) => `<div><span>${encode(level)}: ${encode(limit)} </span>` + (ratio > limit ? `<span class="k-contrast-validation !k-text-success">${encode(messages.pass)} ${kendo.ui.icon("check")}</span>` : `<span class="k-contrast-validation !k-text-error">${encode(messages.fail)} ${kendo.ui.icon("x")}</span>`) + "</div>"), output = "";
output += contrastRatioTemplate({
messages: that.options.messages,
ratio: contrastRatio
});
output += labelTemplate({
messages: that.options.messages,
ratio: contrastRatio,
limit: 4.5,
level: "AA"
});
output += labelTemplate({
messages: that.options.messages,
ratio: contrastRatio,
limit: 7,
level: "AAA"
});
that._contrastTool.find(".k-contrast-ratio, div").remove();
that._contrastTool.append(output);
that._updateContrastSvg(backgroundColor);
},
_updateContrastSvg: function(backgroundColor) {
var that = this, hsvRect = that._hsvRect, svgClassName = "k-color-contrast-svg", metrics = {
width: hsvRect.width(),
height: hsvRect.height()
}, newSvg;
if (!metrics.width || !metrics.height) return;
newSvg = $(contrastToolUtils.renderSvgCurveLine(metrics, that._getHSV(), backgroundColor)).addClass(svgClassName);
kendo.applyStylesFromKendoAttributes(newSvg, [
"position",
"overflow",
"pointer-events",
"left",
"top",
"z-index"
]);
hsvRect.find("." + svgClassName).remove();
hsvRect.append(newSvg);
},
_updateHsv: function(color) {
var that = this, rect = that._hsvRect;
color = color.toHSV();
that._hsvHandle.css({
left: color.s * rect.width() + "px",
top: (1 - color.v) * rect.height() + "px"
});
that._hueElements.css(BACKGROUNDCOLOR, Color.fromHSV(color.h, 1, 1, 1).toCss());
that._hueSlider.value(color.h);
if (that._opacitySlider) {
that._opacitySlider.wrapper.find(".k-slider-track").css("background", `linear-gradient(to ${that.options._showAdaptiveView ? "right" : "top"}, transparent, ` + Color.fromHSV(color.h, 1, 1, 1).toCss());
that._opacitySlider.value(100 * color.a);
}
that._updateHsvAria(color.s, color.v);
},
_updateHsvAria: function(x, y) {
var value = this.value();
if (value && value.indexOf("rgba") > -1) value = value.replace("rgba", "RGBA");
this._hsvHandle.attr({
"aria-label": this._hsvDragAriaTemplate(value || ""),
"aria-valuenow": Math.round(x * 100),
"aria-valuetext": "saturation: " + Math.round(x * 100) + "%, value: " + Math.round(y * 100) + "%"
});
},
_updateUI: function(color, dontChangeInput) {
var that = this;
if (!color) {
that._reset();
return;
}
if (!dontChangeInput && that._colorInput) that._colorInput.value(color);
that._triggerSelect(color);
that._updateHsv(color);
if (that._contrastTool.length) that._updateColorContrast(color);
},
_addSizeClass: function(specificSize) {
const options = this.options;
this.wrapper.removeClass("k-colorgradient-lg k-colorgradient-md k-colorgradient-sm");
let size = specificSize || options.size;
if (size) {
let sizeClass = "k-colorgradient-";
switch (size) {
case "large":
sizeClass += "lg";
break;
case "small":
sizeClass += "sm";
break;
default:
sizeClass += "md";
break;
}
this.wrapper.addClass(sizeClass);
}
},
_wrapper: function() {
var options = this.options, wrapper;
if (this.element.is("input")) wrapper = this.element.addClass("k-hidden").wrap("<div>").parent();
else wrapper = this.element;
wrapper.addClass("k-colorgradient").attr({
"role": "textbox",
"aria-keyshortcuts": "Enter"
}).append(this._template(options));
this._hueElements = $(".k-hsv-rectangle, .k-alpha-slider .k-slider-track", wrapper);
this._colorgradientInputs = $(".k-colorgradient-inputs", wrapper);
this._contrastTool = $(".k-colorgradient-color-contrast", wrapper);
this.wrapper = wrapper;
this._addSizeClass();
},
destroy: function() {
this._hsvEvents.destroy();
this._hueSlider.destroy();
if (this._opacitySlider) this._opacitySlider.destroy();
if (this._colorInput) this._colorInput.destroy();
this._hueSlider = this._opacitySlider = this._hsvRect = this._hsvHandle = this._hueElements = this._selectedColor = this._colorAsText = this._contrastTool = null;
ColorSelector.fn.destroy.call(this);
}
});
ui.plugin(ColorGradient);
})(window.kendo.jQuery);
//#endregion
//#region ../src/colorpicker/colorpalette.js
(function($, undefined) {
var kendo = window.kendo, ui = kendo.ui, parseColor = kendo.parseColor, KEYS = kendo.keys, DOT = ".", BACKGROUNDCOLOR = "background-color", ITEMSELECTEDCLASS = "k-selected", ITEMSFOCUSEDCLASS = "k-focus", TILE_CLASS = "k-colorpalette-tile", SIMPLEPALETTE = "000000,7f7f7f,880015,ed1c24,ff7f27,fff200,22b14c,00a2e8,3f48cc,a349a4,ffffff,c3c3c3,b97a57,ffaec9,ffc90e,efe4b0,b5e61d,99d9ea,7092be,c8bfe7", WEBPALETTE = "FFFFFF,FFCCFF,FF99FF,FF66FF,FF33FF,FF00FF,CCFFFF,CCCCFF,CC99FF,CC66FF,CC33FF,CC00FF,99FFFF,99CCFF,9999FF,9966FF,9933FF,9900FF,FFFFCC,FFCCCC,FF99CC,FF66CC,FF33CC,FF00CC,CCFFCC,CCCCCC,CC99CC,CC66CC,CC33CC,CC00CC,99FFCC,99CCCC,9999CC,9966CC,9933CC,9900CC,FFFF99,FFCC99,FF9999,FF6699,FF3399,FF0099,CCFF99,CCCC99,CC9999,CC6699,CC3399,CC0099,99FF99,99CC99,999999,996699,993399,990099,FFFF66,FFCC66,FF9966,FF6666,FF3366,FF0066,CCFF66,CCCC66,CC9966,CC6666,CC3366,CC0066,99FF66,99CC66,999966,996666,993366,990066,FFFF33,FFCC33,FF9933,FF6633,FF3333,FF0033,CCFF33,CCCC33,CC9933,CC6633,CC3333,CC0033,99FF33,99CC33,999933,996633,993333,990033,FFFF00,FFCC00,FF9900,FF6600,FF3300,FF0000,CCFF00,CCCC00,CC9900,CC6600,CC3300,CC0000,99FF00,99CC00,999900,996600,993300,990000,66FFFF,66CCFF,6699FF,6666FF,6633FF,6600FF,33FFFF,33CCFF,3399FF,3366FF,3333FF,3300FF,00FFFF,00CCFF,0099FF,0066FF,0033FF,0000FF,66FFCC,66CCCC,6699CC,6666CC,6633CC,6600CC,33FFCC,33CCCC,3399CC,3366CC,3333CC,3300CC,00FFCC,00CCCC,0099CC,0066CC,0033CC,0000CC,66FF99,66CC99,669999,666699,663399,660099,33FF99,33CC99,339999,336699,333399,330099,00FF99,00CC99,009999,006699,003399,000099,66FF66,66CC66,669966,666666,663366,660066,33FF66,33CC66,339966,336666,333366,330066,00FF66,00CC66,009966,006666,003366,000066,66FF33,66CC33,669933,666633,663333,660033,33FF33,33CC33,339933,336633,333333,330033,00FF33,00CC33,009933,006633,003333,000033,66FF00,66CC00,669900,666600,663300,660000,33FF00,33CC00,339900,336600,333300,330000,00FF00,00CC00,009900,006600,003300,000000", NS = ".kendoColorTools", FOCUS_NS = "focus" + NS, CLICK_NS = "click" + NS, KEYDOWN_NS = "keydown" + NS, BLUR_NS = "blur" + NS, ColorSelector = ui.colorpicker.ColorSelector;
function preventDefault(ev) {
ev.preventDefault();
}
function bind(callback, obj) {
return function() {
return callback.apply(obj, arguments);
};
}
var ColorPalette = ColorSelector.extend({
init: function(element, options) {
var that = this;
ColorSelector.fn.init.call(that, element, options);
that._tabIndex = this.element.attr("tabindex") || 0;
that._wrapper();
options = that.options;
that._selectedID = (options.ariaId || kendo.guid()) + "_selected";
that._ariaTemplate = kendo.template(that.options.ARIATemplate);
if (that._value) {
that._updateUI(that._value);
that.wrapper.find(DOT + ITEMSFOCUSEDCLASS).removeClass(ITEMSFOCUSEDCLASS);
}
that.wrapper.attr("aria-label", that._ariaTemplate(that.value() || ""));
that._attachEvents();
ColorSelector.fn.endInit.call(that);
},
focus: function() {
if (this.wrapper && !this.wrapper.is("[unselectable='on']")) this.wrapper.trigger("focus");
},
options: {
name: "ColorPalette",
columns: 10,
tileSize: null,
palette: "basic",
size: undefined
},
_attachEvents: function() {
var that = this;
that.wrapper.on(CLICK_NS, DOT + TILE_CLASS, function(ev) {
that._select(ev.currentTarget);
}).on(KEYDOWN_NS, that, bind(that._keydown, that)).on(BLUR_NS, function() {
that.wrapper.find(DOT + TILE_CLASS).removeClass(ITEMSFOCUSEDCLASS);
}).on(FOCUS_NS, bind(that._focus, that));
},
_colors: function() {
var options = this.options, colors = options.palette || "basic";
if (colors == "websafe") {
colors = WEBPALETTE;
options.columns = 18;
} else if (colors == "basic") colors = SIMPLEPALETTE;
if (typeof colors == "string") colors = colors.split(",");
if (Array.isArray(colors)) colors = $.map(colors, function(x) {
return parseColor(x);
});
return colors;
},
_current: function(item) {
this.wrapper.find(DOT + TILE_CLASS).removeClass(ITEMSFOCUSEDCLASS).removeAttr("id");
$(item).addClass(ITEMSFOCUSEDCLASS).attr("id", this._selectedID);
this.wrapper.removeAttr("aria-activedescendant").attr("aria-activedescendant", this._selectedID);
},
_focus: function() {
var wrapper = this.wrapper;
if (wrapper.find("#" + this._selectedID).length === 0) this._current(wrapper.find(DOT + TILE_CLASS).first());
},
_keydown: function(e) {
var newCurrent, items = this.wrapper.find(DOT + TILE_CLASS), current = items.filter(DOT + ITEMSFOCUSEDCLASS).get(0) || items.filter(DOT + ITEMSELECTEDCLASS).get(0), keyCode = e.keyCode, currentParentSibling, index;
if (current) index = Array.prototype.indexOf.call(current.parentNode.children, current);
if (keyCode == KEYS.LEFT) newCurrent = current ? current.previousSibling : items[items.length - 1];
else if (keyCode == KEYS.RIGHT) newCurrent = current ? current.nextSibling : items[0];
else if (keyCode == KEYS.DOWN) {
currentParentSibling = current && current.parentNode.nextSibling ? current.parentNode.nextSibling.children[index] : null;
newCurrent = current ? currentParentSibling : items[0];
} else if (keyCode == KEYS.UP) {
currentParentSibling = current && current.parentNode.previousSibling ? current.parentNode.previousSibling.children[index] : null;
newCurrent = current ? currentParentSibling : items.get[items.length - 1];
} else if (keyCode == KEYS.ENTER) {
preventDefault(e);
if (current) {
this._select(current);
this.trigger("forceSelect", { value: this.value() });
return;
}
} else if (keyCode == KEYS.ESC) {
this._cancel();
e.stopPropagation();
}
if (newCurrent && newCurrent.nodeType !== 1) newCurrent = null;
if (newCurrent) {
preventDefault(e);
e.stopPropagation();
this._current(newCurrent);
}
},
_onEnable: function(enable) {
if (this.options._standalone) if (enable) {
this.wrapper.attr("tabindex", this._tabIndex);
this.wrapper.removeAttr("aria-disabled");
} else {
this.wrapper.removeAttr("tabindex");
this.wrapper.attr("aria-disabled", true);
}
},
_select: function(item) {
var that = this, items = that.wrapper.find(DOT + TILE_CLASS);
item = $(item);
ColorSelector.fn._select.call(that, item.css(BACKGROUNDCOLOR));
items.removeClass(ITEMSELECTEDCLASS).removeAttr("aria-selected");
item.addClass(ITEMSELECTEDCLASS).attr("aria-selected", true);
},
_template: kendo.template(({ colors, columns, tileSize, value, id }) => {
let startPart = "<table class=\"k-colorpalette-table\" role=\"none\"><tr role=\"row\">";
let cellElements = "";
for (var i = 0; i < colors.length; ++i) {
let selected = colors[i].equals(value);
if (i && i % columns == 0) cellElements += "</tr><tr role=\"row\">";
cellElements += `<td role="gridcell" unselectable="on" ${kendo.attr("style-background-color")}="${colors[i].toCss()}"${selected ? " aria-selected=true" : ""} ${id && i === 0 ? "id=\\\"" + id + "\\\" " : ""} class="k-colorpalette-tile${selected ? " " + ITEMSELECTEDCLASS : ""}" aria-label="${colors[i].toCss()}"></td>`;
}
return startPart + cellElements + "</tr></table>";
}),
_tileSize: function() {
var tileSize = this.options.tileSize, width, height;
if (tileSize) {
if (/number|string/.test(typeof tileSize)) width = height = parseFloat(tileSize);
else if (typeof tileSize == "object") {
width = parseFloat(tileSize.width);
height = parseFloat(tileSize.height);
} else throw new Error("Unsupported value for the 'tileSize' argument");
this.wrapper.find(DOT + TILE_CLASS).css({
width,
height
});
}
},
_updateUI: function(color) {
var item = null, items = this.wrapper.find(DOT + TILE_CLASS);
this.wrapper.find(DOT + TILE_CLASS).each(function() {
var c = parseColor($(this).css(BACKGROUNDCOLOR));
if (c && c.equals(color)) {
item = this;
return false;
}
});
this._current(item);
items.removeClass(ITEMSELECTEDCLASS);
if (item) {
$(item).addClass(ITEMSELECTEDCLASS);
this.wrapper.attr("aria-label", this._ariaTemplate(this.value() || ""));
}
},
_addSizeClass: function(specificSize) {
const options = this.options;
this.wrapper.removeClass("k-colorpalette-lg k-colorpalette-md k-colorpalette-sm");
let size = specificSize || options.size;
if (size) {
let sizeClass = "k-colorpalette-";
switch (size) {
case "large":
sizeClass += "lg";
break;
case "small":
sizeClass += "sm";
break;
default:
sizeClass += "md";
break;
}
this.wrapper.addClass(sizeClass);
}
},
_wrapper: function() {
var options = this.options, colors = this._colors(), wrapper, templateElement;
if (this.element.is("input")) wrapper = this.element.addClass("k-hidden").wrap("<div>").parent();
else wrapper = this.element;
templateElement = $(this._template({
colors,
columns: options.columns,
tileSize: options.tileSize,
value: this._value,
id: options.ariaId
}));
kendo.applyStylesFromKendoAttributes(templateElement, ["background-color"]);
wrapper.addClass("k-colorpalette").attr("role", "grid").append(templateElement).attr("tabindex", this._tabIndex);
this.wrapper = wrapper;
this._addSizeClass();
this._tileSize();
}
});
ui.plugin(ColorPalette);
})(window.kendo.jQuery);
//#endregion
//#region ../src/colorpicker/flatcolorpicker.js
(function($, undefined) {
var kendo = window.kendo, ui = kendo.ui, html = kendo.html, Color = kendo.Color, extend = $.extend, encode = kendo.htmlEncode, BACKGROUNDCOLOR = "background-color", MESSAGES = {
apply: "Apply",
cancel: "Cancel",
noColor: "no color",
clearColor: "Clear color",
previewInput: null,
contrastRatio: "Contrast ratio:",
fail: "Fail",
pass: "Pass",
hex: "HEX",
toggleFormat: "Toggle format",
red: "Red",
green: "Green",
blue: "Blue",
alpha: "Alpha",
gradient: "Gradient view",
palette: "Palette view"
}, NS = ".kendoColorTools", CLICK_NS = "click" + NS, KEYDOWN_NS = "keydown" + NS, ColorSelector = ui.colorpicker.ColorSelector, KEYS = kendo.keys, NO_COLOR = "k-no-color", SELECTED = "k-selected", PREVIEW_MASK = ".k-color-preview-mask", ARIA_PRESSED = "aria-pressed", ARIA_DISABLED = "aria-disabled", VIEWS = {
"gradient": ui.ColorGradient,
"palette": ui.ColorPalette
};
function bind(callback, obj) {
return function() {
return callback.apply(obj, arguments);
};
}
var FlatColorPicker = ColorSelector.extend({
init: function(element, options) {
var that = this;
if (options && options.autoupdate === false) options._standalone = false;
ColorSelector.fn.init.call(that, element, options);
options = that.options = kendo.deepExtend({}, that.options, options);
that._wrapper();
var value = that.color();
that._changeView(options.view);
that._setViewSize();
if (value) {
that._updateUI(value);
that._previousColor.children(PREVIEW_MASK).css(BACKGROUNDCOLOR, value.toDisplay());
that._selectedColor.children(PREVIEW_MASK).css(BACKGROUNDCOLOR, value.toDisplay());
} else {
that._selectedColor.addClass(NO_COLOR);
that._previousColor.addClass(NO_COLOR);
}
that._attachEvents();
that._navigation();
ColorSelector.fn.endInit.call(that);
},
destroy: function() {
var that = this;
ColorSelector.fn.destroy.call(this);
if (that._view) {
that._view.destroy();
that._viewsContainer.empty();
}
that.element.off(NS);
that._selectedColor = that._previousColor = that._viewsContainer = that._view = null;
},
options: {
name: "FlatColorPicker",
opacity: false,
buttons: false,
buttonsTemplate: null,
input: true,
preview: true,
clearButton: false,
format: "hex",
formats: ["rgb", "hex"],
view: "gradient",
views: ["gradient", "palette"],
palette: null,
autoupdate: true,
backgroundColor: null,
columns: 10,
tileSize: 24,
messages: MESSAGES,
_otOfPicker: true,
_showAdaptiveView: false
},
setBackgroundColor: function(color) {
var that = this;
if (that._view && that._view.setBackgroundColor) that._view.setBackgroundColor(color);
},
_attachEvents: function() {
var that = this;
that.wrapper.on(KEYDOWN_NS, that, bind(that._keydown, that)).on(CLICK_NS, ".k-button[data-command]", function() {
that._clearColor = true;
that._updateUI(null);
that._view.value(null);
}).on(CLICK_NS, ".k-coloreditor-apply", function() {
if (that._clearColor) that._select(null);
else that._select(that._view.color());
}).on(CLICK_NS, ".k-coloreditor-cancel", function() {
delete that._clearColor;
that._updateUI(that.color());
that._cancel();
}).on(CLICK_NS, ".k-button[data-view]", function(ev) {
var viewButton = $(ev.target).closest("[data-view]");
if (viewButton.is("." + SELECTED)) return;
that.wrapper.find(".k-button[data-view]").removeClass(SELECTED).attr(ARIA_PRESSED, false);
viewButton.addClass(SELECTED).attr(ARIA_PRESSED, true);
that._changeView(viewButton.data("view"));
});
},
_select: function(value) {
var that = this;
ColorSelector.fn._select.call(that, value);
that._updatePreviousColor(value);
},
_updatePreviousColor: function(value) {
var that = this;
if (value) {
that._previousColor.removeClass(NO_COLOR);
that._previousColor.children(PREVIEW_MASK).css(BACKGROUNDCOLOR, value.toDisplay());
} else {
that._previousColor.addClass(NO_COLOR);
that._previousColor.children(PREVIEW_MASK).css(BACKGROUNDCOLOR, "");
}
},
_changeView: function(mode) {
var that = this, options = $.extend({}, that.options), selector = VIEWS[mode], selectedColor, hsvColor;
if (that._view && that._view._colorInput) that.options.format = that._view._colorInput._viewModel.format;
that.options.view = mode;
delete options.name;
delete options.change;
delete options.select;
delete options.cancel;
delete options._standalone;
const size = options._showAdaptiveView ? "large" : options.size;
if (that._view) {
selectedColor = that._view.color();
that._view.destroy();
that._viewsContainer.empty();
}
if (selectedColor) {
selectedColor = selectedColor.toHSV();
hsvColor = Color.fromHSV(that._cachedHue || 0, selectedColor.s, selectedColor.v, selectedColor.a);
that._cachedHue = selectedColor.toHSV().h;
selectedColor = selectedColor.equals(hsvColor) ? hsvColor : selectedColor;
}
options._otOfPicker = false;
if (selector) {
that._view = new VIEWS[mode]($("<div></div>").appendTo(that._viewsContainer), {
...options,
size
});
that._view.value(selectedColor);
that._view.bind("change", function(ev) {
delete that._clearColor;
that._updateUI(ev.sender.color(), true);
});
that._view.bind("forceSelect", function(ev) {
delete that._clearColor;
that._select(ev.sender.color());
});
}
},
_onEnable: function(enable) {
var that = this;
if (that._view) that._view._onEnable(enable);
if (that.options._standalone) if (enable) that.wrapper.removeAttr(ARIA_DISABLED);
else that.wrapper.attr(ARIA_DISABLED, true);
},
focus: function() {
var that = this;
if (that._view) that._view.focus();
},
_updateUI: function(color, dontChangeView) {
var that = this;
if (color && color.toDisplay) {
that._selectedColor.removeClass(NO_COLOR);
that._selectedColor.children(PREVIEW_MASK).css(BACKGROUNDCOLOR, color.toDisplay());
} else {
that._selectedColor.addClass(NO_COLOR);
that._selectedColor.children(PREVIEW_MASK).css(BACKGROUNDCOLOR, "");
}
that._triggerSelect(color);
if (that.options.autoupdate) that._updatePreviousColor(color);
if (!dontChangeView) that._view.value(color);
},
_setViewSize: function() {
var that = this, wrapper = that.wrapper[0], previewWidth = parseInt(that.options.tileSize.width || that.options.tileSize, 10), previewHeight = parseInt(that.options.tileSize.width || that.options.tileSize, 10), previewColumns = that.options.columns;
wrapper.style.setProperty("--kendo-color-preview-columns", previewColumns);
wrapper.style.setProperty("--kendo-color-preview-width", previewWidth + "px");
wrapper.style.setProperty("--kendo-color-preview-height", previewHeight + "px");
},
_keydown: function(e) {
if (e.keyCode == KEYS.ESC) this._cancel();
},
_template: function() {
var that = this, options = that.options, buttonOptions = extend({}, options, {
fillMode: "flat",
themeColor: undefined,
rounded: undefined,
size: options._showAdaptiveView ? "large" : options.size
});
return kendo.template((options, buttonOptions) => "<div class=\"k-coloreditor-header k-hstack\"><div class=\"k-coloreditor-header-actions k-hstack\">" + (options.views && options.views.length > 1 ? "<div role=\"group\" class=\"k-button-group k-button-group-flat\">" + html.renderButton(`<button aria-label="${encode(options.messages.gradient)}" aria-pressed="false" data-view="gradient" title="${encode(options.messages.gradient)}"></button>`, extend({ icon: "droplet-slider" }, buttonOptions)) + html.renderButton(`<button aria-label="${encode(options.messages.palette)}" aria-pressed="false" data-view="palette" title="${encode(options.messages.palette)}"></button>`, extend({ icon: "palette" }, buttonOptions)) + "</div>" : "") + "</div><div class=\"k-spacer\"></div><div class=\"k-coloreditor-header-actions k-hstack\">" + (options.clearButton ? html.renderButton(`<button aria-label="${encode(options.messages.clearColor)}" data-command="reset" title="${encode(options.messages.clearColor)}"></button>`, extend({ icon: "droplet-slash" }, buttonOptions)) : "") + (options.preview ? "<div class=\"k-coloreditor-preview k-vstack\"><span class=\"k-coloreditor-preview-color k-color-preview\"><span class=\"k-color-preview-mask\"></span></span><span class=\"k-coloreditor-current-color k-color-preview\"><span class=\"k-color-preview-mask\"></span></span></div>" : "") + "</div></div><div class=\"k-coloreditor-views k-vstack\"></div>" + (options.buttons ? "<div class=\"k-coloreditor-footer k-actions k-actions-start k-actions-horizontal\">" + that._renderActionButtons(options, buttonOptions) + "</div>" : ""))(options, buttonOptions);
},
_renderActionButtons(options, buttonOptions) {
if (kendo.isPresent(options) && kendo.isBlank(options.buttonsTemplate)) return html.renderButton(`<button class="k-coloreditor-apply" title="${encode(options.messages.apply)}">
${encode(options.messages.apply)}</button>`, extend({}, buttonOptions, {
fillMode: null,
themeColor: "primary"
})) + html.renderButton(`<button class="k-coloreditor-cancel" title="${encode(options.messages.cancel)}">
${encode(options.messages.cancel)}</button>`, extend({}, buttonOptions, { fillMode: null }));
return kendo.template(options.buttonsTemplate)(options, buttonOptions);
},
_addSizeClass: function(specificSize) {
const options = this.options;
this.wrapper.removeClass("k-coloreditor-lg k-coloreditor-md k-coloreditor-sm");
let size = specificSize || options.size;
if (size) {
let sizeClass = "k-coloreditor-";
switch (size) {
case "large":
sizeClass += "lg";
break;
case "small":
sizeClass += "sm";
break;
default:
sizeClass += "md";
break;
}
this.wrapper.addClass(sizeClass);
}
},
_wrapper: function() {
var options = this.options, wrapper;
if (this.element.is("input")) wrapper = this.element.addClass("k-hidden").wrap("<div>").parent();
else wrapper = this.element;
wrapper.addClass("k-flatcolorpicker k-coloreditor").attr({
"role": "textbox",
"aria-keyshortcuts": "Enter"
}).append(this._template());
this._selectedColor = $(".k-coloreditor-preview-color", wrapper);
this._previousColor = $(".k-coloreditor-current-color", wrapper);
this._viewsContainer = $(".k-coloreditor-views", wrapper);
wrapper.find(".k-button[data-view=" + options.view + "]").addClass(SELECTED).attr(ARIA_PRESSED, true);
this.wrapper = wrapper;
this._addSizeClass();
}
});
ui.plugin(FlatColorPicker);
})(window.kendo.jQuery);
//#endregion
//#region ../src/kendo.colorpicker.js
const __meta__ = {
id: "colorpicker",
name: "Color tools",
category: "web",
description: "Color selection widgets",
depends: [
"core",
"color",
"popup",
"slider",
"userevents",
"button",
"binder",
"textbox",
"numerictextbox",
"html.button",
"icons",
"actionsheet"
]
};
(function($, undefined) {
var kendo = window.kendo, ui = kendo.ui, Widget = ui.Widget, Color = kendo.Color, parseColor = kendo.parseColor, KEYS = kendo.keys, BACKGROUNDCOLOR = "background-color", MESSAGES = {
apply: "Apply",
cancel: "Cancel",
noColor: "no color",
clearColor: "Clear color",
previewInput: null,
contrastRatio: "Contrast ratio:",
fail: "Fail",
pass: "Pass",
hex: "HEX",
toggleFormat: "Toggle format",
red: "Red",
green: "Green",
blue: "Blue",
alpha: "Alpha",
gradient: "Gradient view",
palette: "Palette view"
}, NS = ".kendoColorTools", CLICK_NS = "click" + NS, KEYDOWN_NS = "keydown" + NS, ColorSelector = ui.colorpicker.ColorSelector, FlatColorPicker = ui.FlatColorPicker;
var ColorPicker = Widget.extend({
init: function(element, options) {
var that = this;
if (options && options.palette && !options.view) options.view = "palette";
Widget.fn.init.call(that, element, options);
options = that.options = kendo.deepExtend({}, that.options, options);
element = that.element;
let value = parseColor(options.value || element.attr("value") || element.val(), true);
that._value = options.value = value;
var _buttonHtml = kendo.html.renderButton("<button class=\"k-input-button\" unselectable=\"on\" aria-label=\"select\" tabindex=\"-1\"></button>", $.extend({}, that.options, { icon: "chevron-down" }));
var content = that._inputWrapper = that.wrapper = $(that._template($.extend({}, that.options, { _buttonHtml })));
that._applyCssClasses();
element.hide().after(content);
if (element.is("input")) {
element.appendTo(content);
that._preventDefaultLabelClick();
}
that._tabIndex = element.attr("tabIndex") || 0;
that.enable(!element.attr("disabled"));
var accesskey = element.attr("accesskey");
if (accesskey) {
element.attr("accesskey", null);
content.attr("accesskey", accesskey);
}
that.bind("activate", function(ev) {
if (!ev.isDefaultPrevented()) that.toggle();
});
that._bindMediaQueries();
that._updateUI(value);
Widget.fn.endInit.call(that);
},
destroy: function() {
if (this.smallMQL) this.smallMQL.destroy();
if (this.mediumMQL) this.mediumMQL.destroy();
if (this.largeMQL) this.largeMQL.destroy();
this.wrapper.off(NS).find("*").off(NS);
if (this._popup) {
this._selector.destroy();
this._popup.destroy();
}
this._selector = this._popup = this.wrapper = null;
Widget.fn.destroy.call(this);
},
enable: function(enable) {
var that = this, wrapper = that.wrapper, arrow = wrapper.find(".k-input-button");
if (arguments.length === 0) enable = true;
that.element.attr("disabled", !enable);
wrapper.attr("aria-disabled", !enable);
arrow.off(NS).on("mousedown" + NS, preventDefault);
wrapper.addClass("k-disabled").removeAttr("tabIndex").add("*", wrapper).off(NS);
if (enable) wrapper.removeClass("k-disabled").attr("tabIndex", that._tabIndex).on("mouseenter" + NS, function() {
wrapper.addClass("k-hover");
}).on("mouseleave" + NS, function() {
wrapper.removeClass("k-hover");
}).on("focus" + NS, function() {
wrapper.addClass("k-focus");
}).on("blur" + NS, function() {
wrapper.removeClass("k-focus");
}).on(KEYDOWN_NS, that, bind(that._keydown, that)).on(CLICK_NS, ".k-input-button", bind(that.toggle, that)).on(CLICK_NS, ".k-input-inner", function() {
that.trigger("activate");
});
else that.close();
},
_adaptiveView: function() {
const that = this;
if (!that._popup) that._getPopup();
else if (!that._popup.fullscreen) {
that._popup.destroy();
that._popup = null;
that._getPopup();
} else if (!that._showAdaptiveView) {
that._popup.wrapper && that._popup.wrapper.remove();
that._popup.destroy();
that._popup = null;
}
that._toggleAdaptiveModeSizeClasses(that._showAdaptiveView);
},
_toggleSizeClassesForElement: function(element, size, className) {
if (element && element.length) {
if (element.data("handler") && element.data("handler")._addSizeClass) {
if (size) return element.data("handler")._addSizeClass(size);
return element.data("handler")._addSizeClass();
}
if (!element.is("." + className)) element = element.closest("." + className);
element.removeClass(`${className}-sm ${className}-md ${className}-lg`);
if (size) element.addClass(`${className}-${size}`);
}
},
_toggleAdaptiveModeSizeClasses: function(toggle) {
const that = this;
const wrapper = that._popup && that._popup.wrapper;
const adaptiveSize = "large";
const classes = {
flatColorPicker: "k-coloreditor",
colorGradient: "k-colorgradient",
colorPalette: "k-colorpalette"
};
const flatColorPicker = wrapper && wrapper.length && wrapper.find("." + classes.flatColorPicker);
const colorGradient = wrapper && wrapper.length && wrapper.find("." + classes.colorGradient);
const colorPalette = wrapper && wrapper.length && wrapper.find("." + classes.colorPalette);
if (toggle) {
that._toggleSizeClassesForElement(flatColorPicker, adaptiveSize);
that._toggleSizeClassesForElement(colorGradient, adaptiveSize);
that._toggleSizeClassesForElement(colorPalette, adaptiveSize);
} else {
that._toggleSizeClassesForElement(flatColorPicker);
that._toggleSizeClassesForElement(colorGradient);
that._toggleSizeClassesForElement(colorPalette);
}
},
_bindMediaQueries: function() {
const that = this;
if (that.options.adaptiveMode === "auto") {
that.largeMQL = kendo.mediaQuery("large");
that.mediumMQL = kendo.mediaQuery("medium");
that.smallMQL = kendo.mediaQuery("small");
that.smallMQL.onEnter(() => {
that._showAdaptiveView = true;
that._adaptiveView();
that._popup.fullscreen(true);
});
that.mediumMQL.onEnter(() => {
that._showAdaptiveView = true;
that._adaptiveView();
that._popup.fullscreen(false);
});
that.largeMQL.onEnter(() => {
that._showAdaptiveView = false;
that._adaptiveView();
});
} else {
that.smallMQL && that.smallMQL.destroy();
that.mediumMQL && that.mediumMQL.destroy();
that.largeMQL && that.largeMQL.destroy();
that._showAdaptiveView = false;
}
},
_template: kendo.template(({ toolIcon, _buttonHtml }) => `<span role="combobox" aria-haspopup="dialog" aria-expanded="false" class="k-colorpicker k-picker k-icon-picker"><span class="k-input-inner"><span class="k-value-icon k-color-preview ${toolIcon ? "k-icon-color-preview" : ""}">` + (toolIcon ? kendo.ui.icon({
icon: toolIcon,
iconClass: "k-color-preview-icon"
}) : "") + "<span class=\"k-color-preview-mask\"></span></span></span >" + _buttonHtml + "</span>"),
options: {
name: "ColorPicker",
closeOnSelect: false,
contrastTool: false,
palette: null,
columns: 10,
toolIcon: null,
value: null,
messages: MESSAGES,
opacity: false,
buttons: true,
buttonsTemplate: null,
preview: true,
clearButton: false,
input: true,
format: "hex",
formats: ["rgb", "hex"],
view: "gradient",
views: ["gradient", "palette"],
backgroundColor: null,
ARIATemplate: (data) => `Current selected color is ${data || "none"}`,
size: undefined,
rounded: undefined,
fillMode: undefined,
adaptiveMode: "none",
adaptiveTitle: null,
adaptiveSubtitle: null
},
events: [
"activate",
"change",
"select",
"open",
"close",
"kendoKeydown"
],
open: function() {
if (!this.element.prop("disabled")) this._getPopup().open();
},
close: function() {
if (!this._popup) return;
const selOptions = this._selector && this._selector.options || {};
selOptions._closing = true;
this._getPopup().close();
delete selOptions._closing;
},
toggle: function() {
if (!this.element.prop("disabled")) this._getPopup().toggle();
},
setBackgroundColor: function(color) {
var that = this, handler = function() {
that._selector.setBackgroundColor(color);
};
that.options.contrastTool.backgroundColor = color;
if (that._selector && that._popup && that._popup.visible()) that._selector.setBackgroundColor(color);
else if (that._popup) {
that._popup.unbind("activate", handler);
that._popup.bind("activate", handler);
}
},
_noColorIcon: function() {
return this.wrapper.find(".k-color-preview");
},
color: ColorSelector.fn.color,
value: ColorSelector.fn.value,
_select: ColorSelector.fn._select,
_triggerSelect: ColorSelector.fn._triggerSelect,
_isInputTypeColor: ColorSelector.fn._isInputTypeColor,
_preventDefaultLabelClick: function() {
var that = this, element = that.element, label = element.closest("label"), id = element.attr("id");
if (id) label = label.add("label[for=\"" + id + "\"]");
label.on("click", function(ev) {
that.open();
ev.preventDefault();
});
},
_updateUI: function(value, dontChangeSelector) {
this._updateInput(value);
this._triggerSelect(value);
this.wrapper.find(".k-color-preview-mask").css(BACKGROUNDCOLOR, value ? value.toDisplay() : "");
this._noColorIcon().toggleClass("k-no-color", !value);
if (this._selector && !dontChangeSelector) this._selector.value(value);
},
_updateInput: function(value) {
var formattedValue = "";
if (value) {
if (this._isInputTypeColor() || value.a == 1) formattedValue = value.toCss();
else formattedValue = value.toCssRgba();
this.element.val(formattedValue);
}
if (!this._ariaTemplate) this._ariaTemplate = kendo.template(this.options.ARIATemplate);
this.wrapper.attr("aria-label", this._ariaTemplate(formattedValue));
},
_keydown: function(ev) {
var key = ev.keyCode;
if (this._getPopup().visible()) {
if (key == KEYS.ESC) this._selector._cancel();
else this._selector._keydown(ev);
preventDefault(ev);
if (key !== KEYS.ENTER) ev.stopPropagation();
} else if (key == KEYS.ENTER || key == KEYS.DOWN) {
this.open();
preventDefault(ev);
if (key !== KEYS.ENTER) ev.stopPropagation();
}
},
_actionFooterButtons: function() {
const that = this;
let buttons;
if (that.options.buttonsTemplate) {
buttons = kendo.template(that.options.buttonsTemplate);
return buttons;
} else {
buttons = [{
command: "cancel",
text: "Cancel",
size: "large",
fillMode: that.options.fillMode
}, {
command: "apply",
text: "Apply",
size: "large",
fillMode: that.options.fillMode,
themeColor: "primary"
}];
let buttonsHtml = "";
buttons.forEach((buttonOptions) => {
const command = buttonOptions.command;
const text = buttonOptions.text;
delete buttonOptions.command;
delete buttonOptions.text;
buttonsHtml += kendo.html.renderButton(`<button data-command=${command}>${text}</button>`, buttonOptions);
});
return buttonsHtml;
}
},
_actionSheetApply: function() {
const that = this._selector;
if (that._clearColor) that._select(null);
else that._select(that._view.color());
},
_actionSheetCancel: function() {
const that = this._selector;
delete that._clearColor;
that._updateUI(that.color());
that._cancel();
},
_getPopup: function() {
var that = this, popup = that._popup;
const isAdaptive = that._showAdaptiveView;
if (!popup) {
var options = that.options;
var selectorType = FlatColorPicker;
options.autoupdate = options.buttons !== true && !isAdaptive;
options._showAdaptiveView = isAdaptive;
delete options.select;
delete options.change;
delete options.cancel;
options._otOfPicker = false;
var id = kendo.guid();
var selectorWrapper = $(`<div id="${id}" class=${!isAdaptive ? "k-colorpicker-popup" : ""}></div>`).appendTo(document.body);
var selector = that._selector = new selectorType($("<div></div>").appendTo(selectorWrapper), {
...options,
buttons: !isAdaptive && options.buttons,
value: isAdaptive ? that._value : that.options.value
});
that.wrapper.attr("aria-controls", id);
if (isAdaptive) {
that._popup = popup = selectorWrapper.kendoActionSheet({
adaptive: true,
closeButton: {
icon: "check",
themeColor: "primary"
},
hideOverflowContent: true,
title: options.adaptiveTitle ? kendo.htmlEncode(options.adaptiveTitle) : "Choose Color",
subtitle: options.adaptiveSubtitle ? kendo.htmlEncode(options.adaptiveSubtitle) : "",
footerTemplate: that._actionFooterButtons()
}).data("kendoActionSheet");
popup._footer.addClass("k-actions k-actions-horizontal k-actions-stretched");
popup._footer.on("click", "button[data-command]", function(e) {
switch ($(e.currentTarget).data("command")) {
case "apply":
that._actionSheetApply();
break;
case "cancel":
that._actionSheetCancel();
break;
}
});
} else that._popup = popup = selectorWrapper.kendoPopup({
anchor: that.wrapper,
adjustSize: {
width: 5,
height: 0
}
}).data("kendoPopup");
selectorWrapper.on(KEYDOWN_NS, that, $.noop);
selector.bind({
select: function(ev) {
that._updateUI(parseColor(ev.value), true);
},
change: function(ev) {
if (that.options.buttons || isAdaptive) that._select(selector.color());
else that._updateUI(parseColor(ev.value), true);
if (that.options.buttons || isAdaptive || that._selector.options.view === "palette" && that.options.closeOnSelect) that.close();
},
cancel: function() {
that.close();
}
});
popup.bind({
close: function(ev) {
if (that.trigger("close")) {
ev.preventDefault();
return;
}
that.wrapper.removeClass("k-focus");
var color = selector.color();
if (!that.options.buttons || !isAdaptive) that._select(color);
else that._select(that.color());
color = that.color();
if (color && color.h) that._cachedHue = color.h;
const parentSelector = isAdaptive ? ".k-actionsheet" : ".k-colorpicker-popup";
if (!(event && event instanceof MouseEvent && $(event.target).parents(parentSelector).length === 0)) setTimeout(function() {
if (that.wrapper && !that.wrapper.is("[unselectable='on']")) that.wrapper.trigger("focus");
}, 0);
that.wrapper.attr("aria-expanded", false);
},
open: function(ev) {
if (that.trigger("open")) ev.preventDefault();
else {
that.wrapper.addClass("k-focus");
that.wrapper.attr("aria-expanded", true);
}
},
activate: function() {
var hsvColor, selectedColor = that.color();
if (isAdaptive) resizeSliders(selector);
if (selectedColor) {
selectedColor = selectedColor.toHSV();
hsvColor = Color.fromHSV(that._cachedHue || 0, selectedColor.s, selectedColor.v, selectedColor.a);
selectedColor = selectedColor.equals(hsvColor) ? hsvColor : selectedColor;
}
selector.value(selectedColor);
selector.focus();
that.wrapper.addClass("k-focus");
}
});
}
return popup;
}
});
function resizeSliders(selectorInstance) {
const view = selectorInstance._view;
if (view) {
if (view._hueSlider) view._hueSlider.resize();
if (view._opacitySlider) view._opacitySlider.resize();
}
}
function preventDefault(ev) {
ev.preventDefault();
}
function bind(callback, obj) {
return function() {
return callback.apply(obj, arguments);
};
}
ui.plugin(ColorPicker);
kendo.cssProperties.registerPrefix("ColorPicker", "k-picker-");
kendo.cssProperties.registerValues("ColorPicker", [{
prop: "rounded",
values: kendo.cssProperties.roundedValues.concat([["full", "full"]])
}]);
})(window.kendo.jQuery);
var kendo_colorpicker_default = kendo;
//#endregion
exports.__meta__ = __meta__;
exports.default = kendo_colorpicker_default;