Skip to content

Commit 0bd1ee9

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 5314085 commit 0bd1ee9

File tree

148 files changed

+3912
-3042
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

148 files changed

+3912
-3042
lines changed

‎rollup.dev.config.js‎

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,30 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
33
import path from 'path';
44
import { baseOptions, root } from './rollup.config';
55

6-
const files = glob.sync('**/*.js', { cwd: root })
6+
const files = glob.sync('**/kendo.*.js', { cwd: root })
77
.filter((file) => !['angular.js', 'angular.min.js', 'jquery.js', 'jquery.min.js', 'jszip.js', 'jszip.min.js'].includes(file));
88

9-
const isExternal = (file, importer) => {
10-
const resolvedImporter = path.resolve(root, importer);
11-
const resolvedFile = path.resolve(root, file);
12-
const resolvedSrc = path.resolve(root);
9+
const resolvedFiles = files.map(f => path.resolve(root, f));
1310

14-
if (resolvedFile === resolvedImporter) {
15-
return false;
16-
}
17-
18-
if (resolvedFile.indexOf('node_modules') >= 0) {
19-
return false;
20-
}
21-
22-
if (resolvedFile.indexOf('@progress') >= 0) {
23-
return false;
24-
}
25-
26-
if (resolvedFile.indexOf(resolvedSrc) >= 0) {
27-
return true;
28-
}
29-
30-
return false;
31-
};
32-
33-
const configMap = (name) => ({
34-
input: `${root}/${name}`,
11+
const configMap = (file) => ({
12+
input: path.resolve(root, file),
3513
output: [{
3614
format: "umd",
37-
file: `./dist/dev/js/${name}`,
15+
file: `./dist/dev/js/${file}`,
3816
sourcemap: 'inline',
39-
name: name.replace('.', ''),
17+
name: file.replace('.', ''),
4018
...baseOptions
4119
},{
4220
format: "esm",
43-
file: `./dist/mjs/${name}`,
21+
file: `./dist/mjs/${file}`,
4422
sourcemap: 'inline',
4523
...baseOptions
4624
}],
47-
external: (file) => isExternal(file, name),
25+
external: resolvedFiles.filter(f => f !== path.resolve(root, file)),
4826
treeshake: false,
4927
plugins: [
5028
nodeResolve()
5129
]
5230
});
5331

54-
export default files.map((name) => configMap(name));
32+
export default files.map((file) => configMap(file));

‎src/colorpicker/colorgradient.js‎

Lines changed: 81 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import "./contrastToolUtils.js";
1717
Observable = kendo.Observable,
1818
parseColor = kendo.parseColor,
1919
extend = $.extend,
20+
encode = kendo.htmlEncode,
2021
Color = kendo.Color,
2122
KEYS = kendo.keys,
2223
BACKGROUNDCOLOR = "background-color",
@@ -46,9 +47,8 @@ import "./contrastToolUtils.js";
4647
that._viewModel = kendo.observable({
4748
switchMode: that.switchMode.bind(that),
4849
keydown: that.keydown.bind(that),
49-
mode: function (mode) {
50-
return mode === this.get("format");
51-
},
50+
isHEXMode: function () { return this.get("format") === 'hex' },
51+
isRGBMode: function () { return this.get("format") === 'rgb' },
5252
format: options.format,
5353
formats: options.formats,
5454
rgb: null,
@@ -67,44 +67,66 @@ import "./contrastToolUtils.js";
6767

6868
Observable.fn.init.call(that);
6969
},
70-
_template: kendo.template(
71-
'# if (options.formats && options.formats.length > 1) { #' +
72-
'<div class="k-vstack">' +
73-
'<button class="k-colorgradient-toggle-mode" data-#:ns#role="button" data-#:ns#icon="arrows-kpi" data data-#:ns#bind="click: switchMode" data-#:ns#fill-mode="flat" data-#:ns#size="#: options.size #" title="#: options.messages.toggleFormat #">' +
74-
'</button>' +
75-
'</div>' +
76-
'# } #' +
70+
_template: kendo.template(({ options, ns }) => {
71+
let optionsSize = encode(options.size);
72+
let optionsTabIndex = encode(options.tabindex);
73+
74+
let vStackElement = "";
75+
if (options.formats && options.formats.length > 1) {
76+
let optionsMessagesToggleFormat = encode(options.messages.toggleFormat);
7777

78+
vStackElement =
79+
'<div class="k-vstack">' +
80+
`<button class="k-colorgradient-toggle-mode" data-${ns}role="button" data-${ns}icon="arrows-kpi" data data-${ns}bind="click: switchMode" data-${ns}fill-mode="flat" data-${ns}size="${optionsSize}" title="${optionsMessagesToggleFormat}">` +
81+
'</button>' +
82+
'</div>';
83+
}
7884

7985
// HEX input
80-
'# if (options.formats && options.formats.indexOf("hex") >= 0) { #' +
81-
'<div class="k-vstack k-flex-1" data-#:ns#bind="visible: mode(\'hex\')">' +
82-
'<input type="text" data-#:ns#bind="value: hex" data-#:ns#role="textbox" data-#:ns#size="#: options.size #" tabindex="#:options.tabindex#" aria-label="#: options.messages.hex #"/>' +
83-
'<label class="k-colorgradient-input-label">HEX</label>' +
84-
'</div>' +
85-
'# } #' +
86+
let hexInputElement = "";
87+
if (options.formats && options.formats.indexOf("hex") >= 0) {
88+
let optionsMessagesHex = encode(options.messages.hex);
89+
90+
hexInputElement =
91+
`<div class="k-vstack k-flex-1" data-${ns}bind="visible: isHEXMode">` +
92+
`<input type="text" data-${ns}bind="value: hex" data-${ns}role="textbox" data-${ns}size="${optionsSize}" tabindex="${optionsTabIndex}" aria-label="${optionsMessagesHex}"/>` +
93+
'<label class="k-colorgradient-input-label">HEX</label>' +
94+
'</div>'
95+
}
8696

8797
// RGBA input
88-
'# if (options.formats && options.formats.indexOf("rgb") >= 0) { #' +
89-
'<div class="k-vstack" data-#:ns#bind="visible: mode(\'rgb\')">' +
90-
'<input tabindex="#:options.tabindex#" data-#:ns#bind="value: rgb.r" data-#:ns#role="numerictextbox" data-#:ns#size="#: options.size #" data-#:ns#max="255" data-#:ns#min="0" data-#:ns#decimals="0" data-#:ns#spinners="false" data-#:ns#format="n0" aria-label="#: options.messages.red #" />' +
91-
'<label class="k-colorgradient-input-label">R</label>' +
92-
'</div>' +
93-
'<div class="k-vstack" data-#:ns#bind="visible: mode(\'rgb\')">' +
94-
'<input tabindex="#:options.tabindex#" data-#:ns#bind="value: rgb.g" data-#:ns#role="numerictextbox" data-#:ns#size="#: options.size #" data-#:ns#max="255" data-#:ns#min="0" data-#:ns#decimals="0" data-#:ns#spinners="false" data-#:ns#format="n0" aria-label="#: options.messages.green #" />' +
95-
'<label class="k-colorgradient-input-label">G</label>' +
96-
'</div>' +
97-
'<div class="k-vstack" data-#:ns#bind="visible: mode(\'rgb\')">' +
98-
'<input tabindex="#:options.tabindex#" data-#:ns#bind="value: rgb.b" data-#:ns#role="numerictextbox" data-#:ns#size="#: options.size #" data-#:ns#max="255" data-#:ns#min="0" data-#:ns#decimals="0" data-#:ns#spinners="false" data-#:ns#format="n0" aria-label="#: options.messages.blue #"/>' +
99-
'<label class="k-colorgradient-input-label">B</label>' +
100-
'</div>' +
101-
'#if(options.opacity){#' +
102-
'<div class="k-vstack" data-#:ns#bind="visible: mode(\'rgb\')">' +
103-
'<input tabindex="#:options.tabindex#" data-#:ns#bind="value: rgb.a" data-#:ns#role="numerictextbox" data-#:ns#size="#: options.size #" 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="#: options.messages.alpha #" />' +
104-
'<label class="k-colorgradient-input-label">A</label>' +
105-
'</div>' +
106-
'# } #' +
107-
'# } #'),
98+
let rgbaInputElement = "";
99+
if (options.formats && options.formats.indexOf("rgb") >= 0) {
100+
let optionsMessagesRed = encode(options.messages.red);
101+
let optionsMessagesGreen = encode(options.messages.green);
102+
let optionsMessagesBlue = encode(options.messages.blue);
103+
104+
rgbaInputElement =
105+
`<div class="k-vstack" data-${ns}bind="visible: isRGBMode">` +
106+
`<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="${optionsMessagesRed}" />` +
107+
'<label class="k-colorgradient-input-label">R</label>' +
108+
'</div>' +
109+
`<div class="k-vstack" data-${ns}bind="visible: isRGBMode">` +
110+
`<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="${optionsMessagesGreen}" />` +
111+
'<label class="k-colorgradient-input-label">G</label>' +
112+
'</div>' +
113+
`<div class="k-vstack" data-${ns}bind="visible: isRGBMode">` +
114+
`<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="${optionsMessagesBlue}"/>` +
115+
'<label class="k-colorgradient-input-label">B</label>' +
116+
'</div>';
117+
118+
if(options.opacity) {
119+
let optionsMessagesAlpha = options.messages.alpha;
120+
rgbaInputElement +=
121+
`<div class="k-vstack" data-${ns}bind="visible: isRGBMode">` +
122+
`<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}" />` +
123+
'<label class="k-colorgradient-input-label">A</label>' +
124+
'</div>';
125+
}
126+
}
127+
128+
return vStackElement + hexInputElement + rgbaInputElement;
129+
}),
108130
destroy: function(){
109131
var that = this;
110132

@@ -222,7 +244,7 @@ import "./contrastToolUtils.js";
222244
options: {
223245
name : "ColorGradient",
224246
opacity : false,
225-
hsvDragARIATemplate: 'Color well with two-dimensional slider for selecting saturation and value. Selected color is #=data || "none"#',
247+
hsvDragARIATemplate: (data) => `Color well with two-dimensional slider for selecting saturation and value. Selected color is ${data || "none"}`,
226248
input : true,
227249
format: "hex",
228250
formats: ["rgb", "hex"],
@@ -241,27 +263,16 @@ import "./contrastToolUtils.js";
241263
},
242264
_otOfPicker: true
243265
},
244-
_template: kendo.template(
245-
'<div class="k-colorgradient-canvas k-hstack">' +
246-
'<div class="k-hsv-rectangle"><div class="k-hsv-gradient"></div><div role="slider" aria-orientation="undefined" class="k-hsv-draghandle k-draghandle"></div></div>' +
247-
248-
'<div class="k-hsv-controls k-hstack">' +
249-
'<input class="k-hue-slider k-colorgradient-slider" />' +
250-
'# if (opacity) { #' +
251-
'<input class="k-alpha-slider k-colorgradient-slider" />' +
252-
'# } #' +
253-
'</div>' +
254-
'</div>' +
255-
256-
'# if (input) { #' +
257-
'<div class="k-colorgradient-inputs k-hstack">' +
258-
'</div>' +
259-
'# } #' +
260-
261-
'# if (contrastTool) { #' +
262-
'<div class="k-colorgradient-color-contrast k-vbox">' +
266+
_template: kendo.template((options) =>
267+
'<div class="k-colorgradient-canvas k-hstack">' +
268+
'<div class="k-hsv-rectangle"><div class="k-hsv-gradient"></div><div role="slider" aria-orientation="undefined" class="k-hsv-draghandle k-draghandle"></div></div>' +
269+
'<div class="k-hsv-controls k-hstack">' +
270+
'<input class="k-hue-slider k-colorgradient-slider" />' +
271+
(options.opacity ? '<input class="k-alpha-slider k-colorgradient-slider" />' : '') +
272+
'</div>' +
263273
'</div>' +
264-
'# } #'
274+
(options.input ? '<div class="k-colorgradient-inputs k-hstack"></div>' : '') +
275+
(options.contrastTool ? '<div class="k-colorgradient-color-contrast k-vbox"></div>' : '')
265276
),
266277
focus: function() {
267278
this._hsvHandle.focus();
@@ -518,23 +529,20 @@ import "./contrastToolUtils.js";
518529
contrastOptions = that.options.contrastTool,
519530
backgroundColor = contrastOptions.backgroundColor ? parseColor(contrastOptions.backgroundColor) : parseColor(WHITE),
520531
contrastRatio = contrastToolUtils.getContrastFromTwoRGBAs(parseColor(color.toCssRgba()), backgroundColor),
521-
contrastRatioTemplate = kendo.template('<div class="k-contrast-ratio">' +
522-
'<span class="k-contrast-ratio-text">#:messages.contrastRatio# #:kendo.toString(ratio, "n2")#</span>' +
523-
'<span class="k-contrast-validation k-text-success">' +
524-
'#if (ratio > 4.5) {#' +
525-
'<span class="k-icon k-i-check"></span>' +
526-
'#}#' +
527-
'#if (ratio > 7) {#' +
528-
'<span class="k-icon k-i-check"></span>' +
529-
'#}#' +
532+
contrastRatioTemplate = kendo.template(({ messages, ratio }) =>
533+
'<div class="k-contrast-ratio">' +
534+
`<span class="k-contrast-ratio-text">${encode(messages.contrastRatio)} ${encode(kendo.toString(ratio, "n2"))}</span>` +
535+
'<span class="k-contrast-validation k-text-success">' +
536+
(ratio > 4.5 ? '<span class="k-icon k-i-check"></span>' : '') +
537+
(ratio > 7 ? '<span class="k-icon k-i-check"></span>' : '') +
530538
'</span></div>'),
531-
labelTemplate = kendo.template('<div>' +
532-
'<span>#:level#: #:limit# </span>' +
533-
'#if (ratio > limit) {#' +
534-
'<span class="k-contrast-validation k-text-success">#:messages.pass# <span class="k-icon k-i-check"></span></span>' +
535-
'#} else {#' +
536-
'<span class="k-contrast-validation k-text-error">#:messages.fail# <span class="k-icon k-i-close"></span></span>' +
537-
'#}#' +
539+
labelTemplate = kendo.template(({ messages, ratio, limit, level }) =>
540+
'<div>' +
541+
`<span>${encode(level)}: ${encode(limit)} </span>` +
542+
(ratio > limit ?
543+
`<span class="k-contrast-validation k-text-success">${encode(messages.pass)} <span class="k-icon k-i-check"></span></span>`
544+
:
545+
`<span class="k-contrast-validation k-text-error">${encode(messages.fail)} <span class="k-icon k-i-close"></span></span>`) +
538546
'</div>'),
539547
output = "";
540548

‎src/colorpicker/colorpalette.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -198,20 +198,30 @@ import "../kendo.core.js";
198198
items.removeClass(ITEMSELECTEDCLASS).removeAttr("aria-selected");
199199
item.addClass(ITEMSELECTEDCLASS).attr("aria-selected", true);
200200
},
201-
_template: kendo.template(
201+
_template: kendo.template(({colors, columns, tileSize, value, id}) => {
202+
let startPart =
202203
'<div class="k-colorpalette-table-wrap">' +
203-
'<table class="k-colorpalette-table k-palette" role="presentation"><tr role="row">' +
204-
'# for (var i = 0; i < colors.length; ++i) { #' +
205-
'# var selected = colors[i].equals(value); #' +
206-
'# if (i && i % columns == 0) { # </tr><tr role="row"> # } #' +
207-
'<td role="gridcell" unselectable="on" style="background-color:#= colors[i].toCss() #"' +
208-
'#= selected ? " aria-selected=true" : "" # ' +
209-
'#=(id && i === 0) ? "id=\\""+id+"\\" " : "" # ' +
210-
'class="k-colorpalette-tile#= selected ? " ' + ITEMSELECTEDCLASS + '" : "" #" ' +
211-
'aria-label="#= colors[i].toCss() #"></td>' +
212-
'# } #' +
213-
'</tr></table></div>'
214-
),
204+
'<table class="k-colorpalette-table k-palette" role="presentation"><tr role="row">';
205+
206+
let cellElements = "";
207+
for (var i = 0; i < colors.length; ++i) {
208+
let selected = colors[i].equals(value);
209+
if (i && i % columns == 0) {
210+
cellElements += '</tr><tr role="row">';
211+
}
212+
213+
cellElements +=
214+
`<td role="gridcell" unselectable="on" style="background-color:${colors[i].toCss()}"` +
215+
`${selected ? " aria-selected=true" : ""} ` +
216+
`${(id && i === 0) ? 'id=\\"' + id + '\\" ' : '' } ` +
217+
218+
`class="k-colorpalette-tile${selected ? " " + ITEMSELECTEDCLASS : ""}" ` +
219+
`aria-label="${colors[i].toCss()}"></td>`;
220+
}
221+
222+
let endPart = '</tr></table></div>';
223+
return startPart + cellElements + endPart;
224+
}),
215225
_tileSize: function() {
216226
var tileSize = this.options.tileSize,
217227
width, height;

‎src/colorpicker/colorselector.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import "../kendo.core.js";
3939
},
4040
options: {
4141
name: "ColorSelector",
42-
ARIATemplate: 'Current selected color is #=data || "none"#',
42+
ARIATemplate: (data) => `Current selected color is ${data || "none"}`,
4343
value: null,
4444
_standalone: true
4545
},

0 commit comments

Comments
 (0)