@progress/kendo-angular-inputs 7.5.1-dev.202110280909 → 8.0.0-dev.202112161434

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (158) hide show
  1. package/dist/cdn/js/kendo-angular-inputs.js +2 -2
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/colorpicker/color-contrast-svg.component.js +95 -0
  4. package/dist/es/colorpicker/color-gradient.component.js +109 -81
  5. package/dist/es/colorpicker/color-input.component.js +39 -18
  6. package/dist/es/colorpicker/color-palette.component.js +28 -18
  7. package/dist/es/colorpicker/colorpicker.component.js +170 -76
  8. package/dist/es/colorpicker/constants.js +12 -0
  9. package/dist/es/colorpicker/contrast-validation.component.js +8 -6
  10. package/dist/es/colorpicker/contrast.component.js +6 -8
  11. package/dist/es/colorpicker/{models → events}/active-color-click-event.js +0 -0
  12. package/dist/es/colorpicker/events/cancel-event.js +19 -0
  13. package/dist/es/colorpicker/events/close-event.js +17 -0
  14. package/dist/es/colorpicker/{models → events}/kendo-drag-event.js +0 -0
  15. package/dist/es/colorpicker/events/open-event.js +17 -0
  16. package/dist/es/colorpicker/events.js +8 -0
  17. package/dist/es/colorpicker/flatcolorpicker-actions.component.js +50 -0
  18. package/dist/es/colorpicker/flatcolorpicker-header.component.js +94 -0
  19. package/dist/es/colorpicker/flatcolorpicker.component.js +553 -0
  20. package/dist/es/colorpicker/localization/colorgradient-localization.service.js +7 -7
  21. package/dist/es/colorpicker/localization/colorpalette-localization.service.js +7 -7
  22. package/dist/es/colorpicker/localization/custom-messages.component.js +1 -1
  23. package/dist/es/colorpicker/localization/flatcolorpicker-localization.service.js +34 -0
  24. package/dist/es/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
  25. package/dist/es/colorpicker/localization/messages.js +36 -0
  26. package/dist/es/colorpicker/models/{color-picker-view.js → actions-layout.js} +0 -0
  27. package/dist/{es2015/colorpicker/models/color-picker-view.js → es/colorpicker/models/colorpicker-view.js} +0 -0
  28. package/dist/es/colorpicker/{utils → models}/palette-presets.js +0 -0
  29. package/dist/es/colorpicker/models.js +1 -2
  30. package/dist/es/colorpicker/services/flatcolorpicker.service.js +41 -0
  31. package/dist/es/colorpicker/utils/color-parser.js +18 -5
  32. package/dist/es/colorpicker/utils/contrast-curve.js +91 -0
  33. package/dist/es/colorpicker/utils.js +1 -1
  34. package/dist/es/colorpicker.module.js +9 -1
  35. package/dist/es/index.js +5 -0
  36. package/dist/es/main.js +4 -1
  37. package/dist/es/package-metadata.js +1 -1
  38. package/dist/es/shared/utils.js +23 -0
  39. package/dist/es/textbox/textbox.component.js +3 -1
  40. package/dist/es2015/colorpicker/color-contrast-svg.component.d.ts +26 -0
  41. package/dist/es2015/colorpicker/color-contrast-svg.component.js +97 -0
  42. package/dist/es2015/colorpicker/color-gradient.component.d.ts +32 -43
  43. package/dist/es2015/colorpicker/color-gradient.component.js +125 -92
  44. package/dist/es2015/colorpicker/color-input.component.d.ts +11 -4
  45. package/dist/es2015/colorpicker/color-input.component.js +52 -32
  46. package/dist/es2015/colorpicker/color-palette.component.d.ts +8 -3
  47. package/dist/es2015/colorpicker/color-palette.component.js +28 -18
  48. package/dist/es2015/colorpicker/colorpicker.component.d.ts +84 -24
  49. package/dist/es2015/colorpicker/colorpicker.component.js +195 -112
  50. package/dist/es2015/colorpicker/constants.d.ts +12 -0
  51. package/dist/es2015/colorpicker/constants.js +12 -0
  52. package/dist/es2015/colorpicker/contrast-validation.component.d.ts +1 -1
  53. package/dist/es2015/colorpicker/contrast-validation.component.js +16 -12
  54. package/dist/es2015/colorpicker/contrast.component.d.ts +1 -3
  55. package/dist/es2015/colorpicker/contrast.component.js +17 -17
  56. package/dist/es2015/colorpicker/{models → events}/active-color-click-event.d.ts +0 -0
  57. package/dist/es2015/colorpicker/{models → events}/active-color-click-event.js +0 -0
  58. package/dist/es2015/colorpicker/events/cancel-event.d.ts +15 -0
  59. package/dist/es2015/colorpicker/events/cancel-event.js +14 -0
  60. package/dist/es2015/colorpicker/events/close-event.d.ts +10 -0
  61. package/dist/es2015/colorpicker/events/close-event.js +10 -0
  62. package/dist/es2015/colorpicker/{models → events}/kendo-drag-event.d.ts +0 -0
  63. package/dist/es2015/colorpicker/{models → events}/kendo-drag-event.js +0 -0
  64. package/dist/es2015/colorpicker/events/open-event.d.ts +10 -0
  65. package/dist/es2015/colorpicker/events/open-event.js +10 -0
  66. package/dist/es2015/colorpicker/events.d.ts +8 -0
  67. package/dist/es2015/colorpicker/events.js +8 -0
  68. package/dist/es2015/colorpicker/flatcolorpicker-actions.component.d.ts +18 -0
  69. package/dist/es2015/colorpicker/flatcolorpicker-actions.component.js +60 -0
  70. package/dist/es2015/colorpicker/flatcolorpicker-header.component.d.ts +30 -0
  71. package/dist/es2015/colorpicker/flatcolorpicker-header.component.js +131 -0
  72. package/dist/es2015/colorpicker/flatcolorpicker.component.d.ts +214 -0
  73. package/dist/es2015/colorpicker/flatcolorpicker.component.js +593 -0
  74. package/dist/es2015/colorpicker/localization/colorgradient-localization.service.d.ts +3 -3
  75. package/dist/es2015/colorpicker/localization/colorgradient-localization.service.js +7 -7
  76. package/dist/es2015/colorpicker/localization/colorpalette-localization.service.d.ts +3 -3
  77. package/dist/es2015/colorpicker/localization/colorpalette-localization.service.js +7 -7
  78. package/dist/es2015/colorpicker/localization/custom-messages.component.js +1 -1
  79. package/dist/es2015/colorpicker/localization/flatcolorpicker-localization.service.d.ts +14 -0
  80. package/dist/es2015/colorpicker/localization/flatcolorpicker-localization.service.js +31 -0
  81. package/dist/es2015/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
  82. package/dist/es2015/colorpicker/localization/messages.d.ts +36 -0
  83. package/dist/es2015/colorpicker/localization/messages.js +36 -0
  84. package/dist/es2015/colorpicker/models/actions-layout.d.ts +8 -0
  85. package/dist/es2015/colorpicker/models/actions-layout.js +4 -0
  86. package/dist/es2015/colorpicker/models/colorpicker-view.d.ts +8 -0
  87. package/dist/es2015/colorpicker/models/colorpicker-view.js +4 -0
  88. package/dist/es2015/colorpicker/models/gradient-settings.d.ts +4 -3
  89. package/dist/es2015/colorpicker/models/output-format.d.ts +0 -5
  90. package/dist/es2015/colorpicker/{utils → models}/palette-presets.d.ts +0 -0
  91. package/dist/es2015/colorpicker/{utils → models}/palette-presets.js +0 -0
  92. package/dist/es2015/colorpicker/models/palette-settings.d.ts +2 -3
  93. package/dist/es2015/colorpicker/models/tile-size.d.ts +1 -5
  94. package/dist/es2015/colorpicker/models.d.ts +10 -10
  95. package/dist/es2015/colorpicker/models.js +1 -2
  96. package/dist/es2015/colorpicker/services/flatcolorpicker.service.d.ts +12 -0
  97. package/dist/es2015/colorpicker/services/flatcolorpicker.service.js +38 -0
  98. package/dist/es2015/colorpicker/utils/color-parser.d.ts +8 -2
  99. package/dist/es2015/colorpicker/utils/color-parser.js +15 -5
  100. package/dist/es2015/colorpicker/utils/contrast-curve.d.ts +37 -0
  101. package/dist/es2015/colorpicker/utils/contrast-curve.js +85 -0
  102. package/dist/es2015/colorpicker/utils.d.ts +1 -1
  103. package/dist/es2015/colorpicker/utils.js +1 -1
  104. package/dist/es2015/colorpicker.module.js +9 -1
  105. package/dist/es2015/index.d.ts +5 -0
  106. package/dist/es2015/index.js +5 -0
  107. package/dist/es2015/index.metadata.json +1 -1
  108. package/dist/es2015/main.d.ts +4 -1
  109. package/dist/es2015/main.js +4 -1
  110. package/dist/es2015/package-metadata.js +1 -1
  111. package/dist/es2015/{colorpicker/models/color-picker-view.d.ts → shared/utils.d.ts} +9 -6
  112. package/dist/es2015/shared/utils.js +23 -0
  113. package/dist/es2015/textbox/textbox.component.js +3 -1
  114. package/dist/fesm2015/index.js +2229 -1046
  115. package/dist/fesm5/index.js +2026 -904
  116. package/dist/npm/colorpicker/color-contrast-svg.component.js +97 -0
  117. package/dist/npm/colorpicker/color-gradient.component.js +109 -81
  118. package/dist/npm/colorpicker/color-input.component.js +38 -17
  119. package/dist/npm/colorpicker/color-palette.component.js +29 -19
  120. package/dist/npm/colorpicker/colorpicker.component.js +177 -83
  121. package/dist/npm/colorpicker/constants.js +12 -0
  122. package/dist/npm/colorpicker/contrast-validation.component.js +8 -6
  123. package/dist/npm/colorpicker/contrast.component.js +6 -8
  124. package/dist/npm/colorpicker/{models → events}/active-color-click-event.js +0 -0
  125. package/dist/npm/colorpicker/events/cancel-event.js +21 -0
  126. package/dist/npm/colorpicker/events/close-event.js +19 -0
  127. package/dist/npm/colorpicker/{models → events}/kendo-drag-event.js +0 -0
  128. package/dist/npm/colorpicker/events/open-event.js +19 -0
  129. package/dist/npm/colorpicker/events.js +11 -0
  130. package/dist/npm/colorpicker/flatcolorpicker-actions.component.js +52 -0
  131. package/dist/npm/colorpicker/flatcolorpicker-header.component.js +96 -0
  132. package/dist/npm/colorpicker/flatcolorpicker.component.js +555 -0
  133. package/dist/npm/colorpicker/localization/colorgradient-localization.service.js +7 -7
  134. package/dist/npm/colorpicker/localization/colorpalette-localization.service.js +7 -7
  135. package/dist/npm/colorpicker/localization/custom-messages.component.js +1 -1
  136. package/dist/npm/colorpicker/localization/flatcolorpicker-localization.service.js +36 -0
  137. package/dist/npm/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
  138. package/dist/npm/colorpicker/localization/messages.js +36 -0
  139. package/dist/npm/colorpicker/models/{color-picker-view.js → actions-layout.js} +0 -0
  140. package/dist/npm/colorpicker/models/colorpicker-view.js +6 -0
  141. package/dist/npm/colorpicker/{utils → models}/palette-presets.js +0 -0
  142. package/dist/npm/colorpicker/models.js +1 -2
  143. package/dist/npm/colorpicker/services/flatcolorpicker.service.js +43 -0
  144. package/dist/npm/colorpicker/utils/color-parser.js +18 -5
  145. package/dist/npm/colorpicker/utils/contrast-curve.js +93 -0
  146. package/dist/npm/colorpicker/utils.js +1 -1
  147. package/dist/npm/colorpicker.module.js +9 -1
  148. package/dist/npm/index.js +10 -0
  149. package/dist/npm/main.js +7 -2
  150. package/dist/npm/package-metadata.js +1 -1
  151. package/dist/npm/shared/utils.js +25 -0
  152. package/dist/npm/textbox/textbox.component.js +6 -4
  153. package/dist/systemjs/kendo-angular-inputs.js +1 -1
  154. package/package.json +10 -7
  155. package/dist/es/colorpicker/models/preventable-event.js +0 -29
  156. package/dist/es2015/colorpicker/models/preventable-event.d.ts +0 -21
  157. package/dist/es2015/colorpicker/models/preventable-event.js +0 -27
  158. package/dist/npm/colorpicker/models/preventable-event.js +0 -31
@@ -26,7 +26,7 @@ var LocalizedColorPickerMessagesDirective = /** @class */ (function (_super) {
26
26
  useExisting: forwardRef(function () { return LocalizedColorPickerMessagesDirective_1; }) // tslint:disable-line:no-forward-ref
27
27
  }
28
28
  ],
29
- selector: '[kendoColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
29
+ selector: '[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
30
30
  }),
31
31
  tslib_1.__metadata("design:paramtypes", [LocalizationService])
32
32
  ], LocalizedColorPickerMessagesDirective);
@@ -21,6 +21,14 @@ var ColorPickerMessages = /** @class */ (function (_super) {
21
21
  Input(),
22
22
  tslib_1.__metadata("design:type", String)
23
23
  ], ColorPickerMessages.prototype, "colorGradientNoColor", void 0);
24
+ tslib_1.__decorate([
25
+ Input(),
26
+ tslib_1.__metadata("design:type", String)
27
+ ], ColorPickerMessages.prototype, "flatColorPickerNoColor", void 0);
28
+ tslib_1.__decorate([
29
+ Input(),
30
+ tslib_1.__metadata("design:type", String)
31
+ ], ColorPickerMessages.prototype, "colorPickerNoColor", void 0);
24
32
  tslib_1.__decorate([
25
33
  Input(),
26
34
  tslib_1.__metadata("design:type", String)
@@ -69,6 +77,34 @@ var ColorPickerMessages = /** @class */ (function (_super) {
69
77
  Input(),
70
78
  tslib_1.__metadata("design:type", String)
71
79
  ], ColorPickerMessages.prototype, "contrastRatio", void 0);
80
+ tslib_1.__decorate([
81
+ Input(),
82
+ tslib_1.__metadata("design:type", String)
83
+ ], ColorPickerMessages.prototype, "previewColor", void 0);
84
+ tslib_1.__decorate([
85
+ Input(),
86
+ tslib_1.__metadata("design:type", String)
87
+ ], ColorPickerMessages.prototype, "revertSelection", void 0);
88
+ tslib_1.__decorate([
89
+ Input(),
90
+ tslib_1.__metadata("design:type", String)
91
+ ], ColorPickerMessages.prototype, "gradientView", void 0);
92
+ tslib_1.__decorate([
93
+ Input(),
94
+ tslib_1.__metadata("design:type", String)
95
+ ], ColorPickerMessages.prototype, "paletteView", void 0);
96
+ tslib_1.__decorate([
97
+ Input(),
98
+ tslib_1.__metadata("design:type", String)
99
+ ], ColorPickerMessages.prototype, "formatButton", void 0);
100
+ tslib_1.__decorate([
101
+ Input(),
102
+ tslib_1.__metadata("design:type", String)
103
+ ], ColorPickerMessages.prototype, "applyButton", void 0);
104
+ tslib_1.__decorate([
105
+ Input(),
106
+ tslib_1.__metadata("design:type", String)
107
+ ], ColorPickerMessages.prototype, "cancelButton", void 0);
72
108
  return ColorPickerMessages;
73
109
  }(ComponentMessages));
74
110
  export { ColorPickerMessages };
@@ -2,5 +2,4 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- export * from './models/preventable-event';
6
- export * from './models/active-color-click-event';
5
+ export * from './models/palette-presets';
@@ -0,0 +1,41 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import * as tslib_1 from "tslib";
6
+ import { Injectable } from "@angular/core";
7
+ import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from "../constants";
8
+ import { PALETTEPRESETS } from "../models";
9
+ /**
10
+ * @hidden
11
+ */
12
+ var FlatColorPickerService = /** @class */ (function () {
13
+ function FlatColorPickerService() {
14
+ }
15
+ FlatColorPickerService.prototype.getPaletteSettings = function (settings, format) {
16
+ var defaultPreset = (format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
17
+ var settingsPalette = settings.palette;
18
+ var presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
19
+ PALETTEPRESETS[settingsPalette].columns :
20
+ undefined;
21
+ return {
22
+ palette: settingsPalette || defaultPreset,
23
+ tileSize: settings.tileSize || 24,
24
+ columns: settings.columns || presetColumns || 10
25
+ };
26
+ };
27
+ FlatColorPickerService.prototype.paletteTileLayout = function (tileSize) {
28
+ if (typeof tileSize === 'number') {
29
+ return { width: tileSize, height: tileSize };
30
+ }
31
+ return {
32
+ width: tileSize.width ? tileSize.width : tileSize.height,
33
+ height: tileSize.height ? tileSize.height : tileSize.width
34
+ };
35
+ };
36
+ FlatColorPickerService = tslib_1.__decorate([
37
+ Injectable()
38
+ ], FlatColorPickerService);
39
+ return FlatColorPickerService;
40
+ }());
41
+ export { FlatColorPickerService };
@@ -9,7 +9,8 @@ import { isPresent, fitIntoBounds } from '../../common/utils';
9
9
  *
10
10
  * Returns the hex or rgba string representation of the color.
11
11
  */
12
- export var parseColor = function (value, format, safe) {
12
+ export var parseColor = function (value, format, opacityEnabled, safe) {
13
+ if (opacityEnabled === void 0) { opacityEnabled = false; }
13
14
  if (safe === void 0) { safe = true; }
14
15
  var allowedFormats = ['hex', 'rgba', 'name'];
15
16
  if (allowedFormats.indexOf(format) === -1) {
@@ -25,7 +26,8 @@ export var parseColor = function (value, format, safe) {
25
26
  if (!isPresent(parsedColor)) {
26
27
  return;
27
28
  }
28
- return format === 'hex' ? parsedColor.toCss() : parsedColor.toCssRgba();
29
+ var parsedColorResult = format === 'hex' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
30
+ return parsedColorResult;
29
31
  };
30
32
  /**
31
33
  * @hidden
@@ -58,12 +60,23 @@ export var getRGBA = function (value, safe) {
58
60
  *
59
61
  * Returns the RGBA string representation of the color.
60
62
  */
61
- export var getColorFromHSV = function (hsva) {
63
+ export var getColorFromHSV = function (hsva, format, opacityEnabled) {
64
+ if (format === void 0) { format = 'rgba'; }
65
+ if (opacityEnabled === void 0) { opacityEnabled = false; }
62
66
  var hue = fitIntoBounds(hsva.h, 0, 359.9);
63
67
  var saturation = fitIntoBounds(hsva.s, 0, 1);
64
68
  var value = fitIntoBounds(hsva.v, 0, 1);
65
69
  var alpha = fitIntoBounds(hsva.a, 0, 1);
66
- return Color.fromHSV(hue, saturation, value, alpha).toCssRgba();
70
+ var color = Color.fromHSV(hue, saturation, value, alpha);
71
+ return format === 'hex' ? getHexValue(color, opacityEnabled) : color.toCssRgba();
72
+ };
73
+ /**
74
+ * @hidden
75
+ *
76
+ * Returns the HEX value.
77
+ */
78
+ export var getHexValue = function (color, opacity) {
79
+ return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
67
80
  };
68
81
  /**
69
82
  * @hidden
@@ -99,7 +112,7 @@ export function nameFormat(value, safe) {
99
112
  }
100
113
  var key = Object.keys(colors).find(function (key) { return colors[key] === value; });
101
114
  if (!key && !safe) {
102
- throw new Error("The provided color " + value + " is not supported for 'format=\"name\"' property.To display " + value + " color, the component 'format' property shoud be set to 'hex' or 'rgba' ");
115
+ throw new Error("The provided color " + value + " is not supported for 'format=\"name\"' property.To display " + value + " color, the component 'format' property should be set to 'hex' or 'rgba' ");
103
116
  }
104
117
  return key;
105
118
  }
@@ -0,0 +1,91 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * @hidden
7
+ */
8
+ export var bezierCommand = function (controlPointCalc) { return function (point, i, a) {
9
+ // start control point
10
+ var _a = controlPointCalc(a[i - 1], a[i - 2], point), cpsX = _a[0], cpsY = _a[1];
11
+ // end control point
12
+ var _b = controlPointCalc(point, a[i - 1], a[i + 1], true), cpeX = _b[0], cpeY = _b[1];
13
+ return "C " + cpsX + "," + cpsY + " " + cpeX + "," + cpeY + " " + point[0] + "," + point[1];
14
+ }; };
15
+ /**
16
+ * @hidden
17
+ */
18
+ export var controlPoint = function (lineCalc) {
19
+ return function (current, previous, next, reverse) {
20
+ // when 'current' is the first or last point of the array
21
+ // 'previous' and 'next' are undefined
22
+ // replace with 'current'
23
+ var p = previous || current;
24
+ var n = next || current;
25
+ var smooth = 0.1;
26
+ // properties of the line between previous and next
27
+ var l = lineCalc(p, n);
28
+ // If is end-control-point, add PI to the angle to go backward
29
+ var angle = l.angle + (reverse ? Math.PI : 0);
30
+ var length = l.length * smooth;
31
+ // The control point position is relative to the current point
32
+ var x = current[0] + Math.cos(angle) * length;
33
+ var y = current[1] + Math.sin(angle) * length;
34
+ return [x, y];
35
+ };
36
+ };
37
+ /**
38
+ * @hidden
39
+ */
40
+ export var line = function (pointA, pointB) {
41
+ var lengthX = pointB[0] - pointA[0];
42
+ var lengthY = pointB[1] - pointA[1];
43
+ return {
44
+ length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
45
+ angle: Math.atan2(lengthY, lengthX)
46
+ };
47
+ };
48
+ /**
49
+ * @hidden
50
+ */
51
+ export var d = function (points, command) {
52
+ if (points.length === 0) {
53
+ return '';
54
+ }
55
+ // build the d attributes by looping over the points
56
+ var d = points.reduce(function (acc, point, i, a) {
57
+ return i === 0 ?
58
+ // if first point
59
+ "M " + point[0] + "," + point[1] :
60
+ // else
61
+ acc + " " + command(point, i, a);
62
+ }, '');
63
+ return d;
64
+ };
65
+ /**
66
+ * @hidden
67
+ *
68
+ * Render the svg <path> element.
69
+ *
70
+ * @param points (array) Represents the points coordinates as an array of tuples.
71
+ * @param command (function) The command that is used (bezierCommand, lineCommand).
72
+ * @param point (array) [x,y] Represents the current point coordinates.
73
+ * @param i (integer) Represents the index of 'point' in the array 'a'.
74
+ * @param a (array) Represents the complete array of points coordinates.
75
+ * @output (string) a svg path command.
76
+ * @output (string) a Svg <path> element
77
+ */
78
+ export var svgPath = function (points, command) {
79
+ if (points.length === 0) {
80
+ return '';
81
+ }
82
+ // build the d attributes by looping over the points
83
+ var d = points.reduce(function (acc, point, i, a) {
84
+ return i === 0 ?
85
+ // if first point
86
+ "M " + point[0] + "," + point[1] :
87
+ // else
88
+ acc + " " + command(point, i, a);
89
+ }, '');
90
+ return d;
91
+ };
@@ -2,5 +2,5 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- export * from './utils/palette-presets';
6
5
  export * from './utils/color-parser';
6
+ export * from './utils/contrast-curve';
@@ -13,15 +13,20 @@ import { ColorPickerComponent } from './colorpicker/colorpicker.component';
13
13
  import { ColorPaletteComponent } from './colorpicker/color-palette.component';
14
14
  import { ColorGradientComponent } from './colorpicker/color-gradient.component';
15
15
  import { ColorInputComponent } from './colorpicker/color-input.component';
16
+ import { FlatColorPickerHeaderComponent } from './colorpicker/flatcolorpicker-header.component';
17
+ import { FlatColorPickerActionButtonsComponent } from './colorpicker/flatcolorpicker-actions.component';
18
+ import { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
16
19
  import { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
17
20
  import { LocalizedColorPickerMessagesDirective } from './colorpicker/localization/localized-colorpicker-messages.directive';
18
21
  import { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
19
22
  import { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
20
23
  import { ContrastComponent } from './colorpicker/contrast.component';
24
+ import { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
21
25
  var PUBLIC_DIRECTIVES = [
22
26
  ColorPickerComponent,
23
27
  ColorPaletteComponent,
24
28
  ColorGradientComponent,
29
+ FlatColorPickerComponent,
25
30
  LocalizedColorPickerMessagesDirective,
26
31
  ColorPickerCustomMessagesComponent
27
32
  ];
@@ -29,7 +34,10 @@ var INTERNAL_DIRECTIVES = [
29
34
  ColorInputComponent,
30
35
  FocusOnDomReadyDirective,
31
36
  ContrastComponent,
32
- ContrastValidationComponent
37
+ ContrastValidationComponent,
38
+ FlatColorPickerHeaderComponent,
39
+ FlatColorPickerActionButtonsComponent,
40
+ ColorContrastSvgComponent
33
41
  ];
34
42
  /**
35
43
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
package/dist/es/index.js CHANGED
@@ -7,16 +7,21 @@
7
7
  */
8
8
  export * from './main';
9
9
  export { CheckBoxModule } from './checkbox.module';
10
+ export { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
10
11
  export { ColorInputComponent } from './colorpicker/color-input.component';
11
12
  export { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
12
13
  export { ContrastComponent } from './colorpicker/contrast.component';
14
+ export { FlatColorPickerActionButtonsComponent } from './colorpicker/flatcolorpicker-actions.component';
15
+ export { FlatColorPickerHeaderComponent } from './colorpicker/flatcolorpicker-header.component';
13
16
  export { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
14
17
  export { ColorGradientLocalizationService } from './colorpicker/localization/colorgradient-localization.service';
15
18
  export { ColorPaletteLocalizationService } from './colorpicker/localization/colorpalette-localization.service';
16
19
  export { ColorPickerLocalizationService } from './colorpicker/localization/colorpicker-localization.service';
17
20
  export { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
21
+ export { FlatColorPickerLocalizationService } from './colorpicker/localization/flatcolorpicker-localization.service';
18
22
  export { ColorPickerMessages } from './colorpicker/localization/messages';
19
23
  export { ColorPaletteService } from './colorpicker/services/color-palette.service';
24
+ export { FlatColorPickerService } from './colorpicker/services/flatcolorpicker.service';
20
25
  export { MaskingService } from './maskedtextbox/masking.service';
21
26
  export { NumericTextBoxMessages } from './numerictextbox/localization/messages';
22
27
  export { RadioButtonModule } from './radiobutton.module';
package/dist/es/main.js CHANGED
@@ -21,11 +21,14 @@ export { NumericTextBoxModule } from './numerictextbox.module';
21
21
  export { MaskedTextBoxModule } from './maskedtextbox.module';
22
22
  export { TextBoxModule } from './textbox.module';
23
23
  export { TextAreaModule } from './textarea.module';
24
+ // All ColorPicker Components
24
25
  export { ColorPickerComponent } from './colorpicker/colorpicker.component';
25
26
  export { ColorPaletteComponent } from './colorpicker/color-palette.component';
26
27
  export { ColorGradientComponent } from './colorpicker/color-gradient.component';
27
28
  export { ColorPickerModule } from './colorpicker.module';
28
- export { ActiveColorClickEvent } from './colorpicker/models';
29
+ export * from './colorpicker/events';
30
+ export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
31
+ export { ColorPickerCancelEvent } from './colorpicker/events';
29
32
  export { CheckBoxDirective } from './checkbox/checkbox.directive';
30
33
  export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
31
34
  export { HintComponent } from './formfield/hint.component';
@@ -9,7 +9,7 @@ export var packageMetadata = {
9
9
  name: '@progress/kendo-angular-inputs',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1635411998,
12
+ publishDate: 1639665048,
13
13
  version: '',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
15
15
  };
@@ -0,0 +1,23 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { detectDesktopBrowser, detectMobileOS } from "@progress/kendo-common";
6
+ /**
7
+ * @hidden
8
+ *
9
+ * Returns true if the used browser is Safari.
10
+ */
11
+ export var isSafari = function (userAgent) {
12
+ return detectDesktopBrowser(userAgent).safari ||
13
+ (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
14
+ };
15
+ /**
16
+ * @hidden
17
+ *
18
+ * Checks if input is Japanese IME
19
+ */
20
+ export var isJapanese = function (input) {
21
+ var japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
22
+ return japaneseRegex.test(input);
23
+ };
@@ -3,6 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as tslib_1 from "tslib";
6
+ import { isJapanese } from './../shared/utils';
6
7
  import { closest } from './../common/dom-utils';
7
8
  import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
8
9
  import { Component, ElementRef, forwardRef, Input, Output, EventEmitter, HostBinding, ViewChild, NgZone, ChangeDetectorRef, Injector, ContentChild, Renderer2 } from '@angular/core';
@@ -14,6 +15,7 @@ import { guid, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-co
14
15
  import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
15
16
  import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
16
17
  import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
18
+ import { isSafari } from '../shared/utils';
17
19
  var FOCUSED = 'k-state-focused';
18
20
  var TextBoxComponent = /** @class */ (function () {
19
21
  function TextBoxComponent(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
@@ -197,7 +199,7 @@ var TextBoxComponent = /** @class */ (function () {
197
199
  * @hidden
198
200
  */
199
201
  this.handleInput = function (ev) {
200
- var incomingValue = ev.target.value;
202
+ var incomingValue = isSafari(navigator.userAgent) && isJapanese(ev.target.value) ? ev.data : ev.target.value;
201
203
  _this.updateValue(incomingValue);
202
204
  };
203
205
  this.ngChange = function (_) { };
@@ -0,0 +1,26 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { SimpleChanges, AfterViewInit, OnChanges } from '@angular/core';
6
+ import { BehaviorSubject } from 'rxjs';
7
+ import { HSVA } from './models';
8
+ /**
9
+ * @hidden
10
+ */
11
+ export declare class ColorContrastSvgComponent implements AfterViewInit, OnChanges {
12
+ hostClass: boolean;
13
+ wrapper: any;
14
+ hsva: BehaviorSubject<HSVA>;
15
+ backgroundColor: string;
16
+ paths: any[];
17
+ oldHsva: HSVA;
18
+ oldH: number;
19
+ oldA: number;
20
+ metrics: any;
21
+ ngAfterViewInit(): void;
22
+ ngOnChanges(changes: SimpleChanges): void;
23
+ setPaths(): void;
24
+ private findValue;
25
+ private getPaths;
26
+ }
@@ -0,0 +1,97 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import * as tslib_1 from "tslib";
6
+ import { Component, HostBinding, Input } from '@angular/core';
7
+ import { BehaviorSubject } from 'rxjs';
8
+ import { isPresent } from '../common/utils';
9
+ import { AA_RATIO, STEP_COUNT, AAA_RATIO } from './constants';
10
+ import { bezierCommand, getContrastFromTwoRGBAs, getRGBA, getColorFromHSV, svgPath, controlPoint, line } from './utils';
11
+ /**
12
+ * @hidden
13
+ */
14
+ let ColorContrastSvgComponent = class ColorContrastSvgComponent {
15
+ /**
16
+ * @hidden
17
+ */
18
+ constructor() {
19
+ this.hostClass = true;
20
+ }
21
+ ngAfterViewInit() {
22
+ this.metrics = this.wrapper.getBoundingClientRect();
23
+ this.oldA = this.hsva.value.a;
24
+ this.oldH = this.hsva.value.h;
25
+ this.hsva.subscribe((value) => {
26
+ if (value.h !== this.oldH || value.a !== this.oldA) {
27
+ this.oldH = value.h;
28
+ this.oldA = value.a;
29
+ this.setPaths();
30
+ }
31
+ });
32
+ }
33
+ ngOnChanges(changes) {
34
+ if (isPresent(changes.backgroundColor) && this.metrics) {
35
+ this.setPaths();
36
+ }
37
+ }
38
+ setPaths() {
39
+ const bezierCommandCalc = bezierCommand(controlPoint(line));
40
+ this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
41
+ svgPath(this.getPaths(AA_RATIO, STEP_COUNT, true), bezierCommandCalc),
42
+ svgPath(this.getPaths(AAA_RATIO, STEP_COUNT), bezierCommandCalc),
43
+ svgPath(this.getPaths(AAA_RATIO, STEP_COUNT, true), bezierCommandCalc)];
44
+ }
45
+ findValue(contrast, saturation, low, high, comparer) {
46
+ const mid = (low + high) / 2;
47
+ const hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
48
+ const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.backgroundColor || ''));
49
+ if (low + 0.5 > high) {
50
+ if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
51
+ return mid;
52
+ }
53
+ else {
54
+ return null;
55
+ }
56
+ }
57
+ if (comparer(currentContrast, contrast)) {
58
+ return this.findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
59
+ }
60
+ return this.findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
61
+ }
62
+ getPaths(contrast, stepCount, reversed = false) {
63
+ const points = [];
64
+ for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
65
+ const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
66
+ if (value !== null) {
67
+ points.push([i, value]);
68
+ }
69
+ }
70
+ return points;
71
+ }
72
+ };
73
+ tslib_1.__decorate([
74
+ HostBinding('class.k-color-contrast-svg'),
75
+ tslib_1.__metadata("design:type", Boolean)
76
+ ], ColorContrastSvgComponent.prototype, "hostClass", void 0);
77
+ tslib_1.__decorate([
78
+ Input(),
79
+ tslib_1.__metadata("design:type", Object)
80
+ ], ColorContrastSvgComponent.prototype, "wrapper", void 0);
81
+ tslib_1.__decorate([
82
+ Input(),
83
+ tslib_1.__metadata("design:type", BehaviorSubject)
84
+ ], ColorContrastSvgComponent.prototype, "hsva", void 0);
85
+ tslib_1.__decorate([
86
+ Input(),
87
+ tslib_1.__metadata("design:type", String)
88
+ ], ColorContrastSvgComponent.prototype, "backgroundColor", void 0);
89
+ ColorContrastSvgComponent = tslib_1.__decorate([
90
+ Component({
91
+ selector: '[kendoColorContrastSvg]',
92
+ template: `
93
+ <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
94
+ `
95
+ })
96
+ ], ColorContrastSvgComponent);
97
+ export { ColorContrastSvgComponent };