@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.
- package/dist/cdn/js/kendo-angular-inputs.js +2 -2
- package/dist/cdn/main.js +1 -1
- package/dist/es/colorpicker/color-contrast-svg.component.js +95 -0
- package/dist/es/colorpicker/color-gradient.component.js +109 -81
- package/dist/es/colorpicker/color-input.component.js +39 -18
- package/dist/es/colorpicker/color-palette.component.js +28 -18
- package/dist/es/colorpicker/colorpicker.component.js +170 -76
- package/dist/es/colorpicker/constants.js +12 -0
- package/dist/es/colorpicker/contrast-validation.component.js +8 -6
- package/dist/es/colorpicker/contrast.component.js +6 -8
- package/dist/es/colorpicker/{models → events}/active-color-click-event.js +0 -0
- package/dist/es/colorpicker/events/cancel-event.js +19 -0
- package/dist/es/colorpicker/events/close-event.js +17 -0
- package/dist/es/colorpicker/{models → events}/kendo-drag-event.js +0 -0
- package/dist/es/colorpicker/events/open-event.js +17 -0
- package/dist/es/colorpicker/events.js +8 -0
- package/dist/es/colorpicker/flatcolorpicker-actions.component.js +50 -0
- package/dist/es/colorpicker/flatcolorpicker-header.component.js +94 -0
- package/dist/es/colorpicker/flatcolorpicker.component.js +553 -0
- package/dist/es/colorpicker/localization/colorgradient-localization.service.js +7 -7
- package/dist/es/colorpicker/localization/colorpalette-localization.service.js +7 -7
- package/dist/es/colorpicker/localization/custom-messages.component.js +1 -1
- package/dist/es/colorpicker/localization/flatcolorpicker-localization.service.js +34 -0
- package/dist/es/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
- package/dist/es/colorpicker/localization/messages.js +36 -0
- package/dist/es/colorpicker/models/{color-picker-view.js → actions-layout.js} +0 -0
- package/dist/{es2015/colorpicker/models/color-picker-view.js → es/colorpicker/models/colorpicker-view.js} +0 -0
- package/dist/es/colorpicker/{utils → models}/palette-presets.js +0 -0
- package/dist/es/colorpicker/models.js +1 -2
- package/dist/es/colorpicker/services/flatcolorpicker.service.js +41 -0
- package/dist/es/colorpicker/utils/color-parser.js +18 -5
- package/dist/es/colorpicker/utils/contrast-curve.js +91 -0
- package/dist/es/colorpicker/utils.js +1 -1
- package/dist/es/colorpicker.module.js +9 -1
- package/dist/es/index.js +5 -0
- package/dist/es/main.js +4 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/shared/utils.js +23 -0
- package/dist/es/textbox/textbox.component.js +3 -1
- package/dist/es2015/colorpicker/color-contrast-svg.component.d.ts +26 -0
- package/dist/es2015/colorpicker/color-contrast-svg.component.js +97 -0
- package/dist/es2015/colorpicker/color-gradient.component.d.ts +32 -43
- package/dist/es2015/colorpicker/color-gradient.component.js +125 -92
- package/dist/es2015/colorpicker/color-input.component.d.ts +11 -4
- package/dist/es2015/colorpicker/color-input.component.js +52 -32
- package/dist/es2015/colorpicker/color-palette.component.d.ts +8 -3
- package/dist/es2015/colorpicker/color-palette.component.js +28 -18
- package/dist/es2015/colorpicker/colorpicker.component.d.ts +84 -24
- package/dist/es2015/colorpicker/colorpicker.component.js +195 -112
- package/dist/es2015/colorpicker/constants.d.ts +12 -0
- package/dist/es2015/colorpicker/constants.js +12 -0
- package/dist/es2015/colorpicker/contrast-validation.component.d.ts +1 -1
- package/dist/es2015/colorpicker/contrast-validation.component.js +16 -12
- package/dist/es2015/colorpicker/contrast.component.d.ts +1 -3
- package/dist/es2015/colorpicker/contrast.component.js +17 -17
- package/dist/es2015/colorpicker/{models → events}/active-color-click-event.d.ts +0 -0
- package/dist/es2015/colorpicker/{models → events}/active-color-click-event.js +0 -0
- package/dist/es2015/colorpicker/events/cancel-event.d.ts +15 -0
- package/dist/es2015/colorpicker/events/cancel-event.js +14 -0
- package/dist/es2015/colorpicker/events/close-event.d.ts +10 -0
- package/dist/es2015/colorpicker/events/close-event.js +10 -0
- package/dist/es2015/colorpicker/{models → events}/kendo-drag-event.d.ts +0 -0
- package/dist/es2015/colorpicker/{models → events}/kendo-drag-event.js +0 -0
- package/dist/es2015/colorpicker/events/open-event.d.ts +10 -0
- package/dist/es2015/colorpicker/events/open-event.js +10 -0
- package/dist/es2015/colorpicker/events.d.ts +8 -0
- package/dist/es2015/colorpicker/events.js +8 -0
- package/dist/es2015/colorpicker/flatcolorpicker-actions.component.d.ts +18 -0
- package/dist/es2015/colorpicker/flatcolorpicker-actions.component.js +60 -0
- package/dist/es2015/colorpicker/flatcolorpicker-header.component.d.ts +30 -0
- package/dist/es2015/colorpicker/flatcolorpicker-header.component.js +131 -0
- package/dist/es2015/colorpicker/flatcolorpicker.component.d.ts +214 -0
- package/dist/es2015/colorpicker/flatcolorpicker.component.js +593 -0
- package/dist/es2015/colorpicker/localization/colorgradient-localization.service.d.ts +3 -3
- package/dist/es2015/colorpicker/localization/colorgradient-localization.service.js +7 -7
- package/dist/es2015/colorpicker/localization/colorpalette-localization.service.d.ts +3 -3
- package/dist/es2015/colorpicker/localization/colorpalette-localization.service.js +7 -7
- package/dist/es2015/colorpicker/localization/custom-messages.component.js +1 -1
- package/dist/es2015/colorpicker/localization/flatcolorpicker-localization.service.d.ts +14 -0
- package/dist/es2015/colorpicker/localization/flatcolorpicker-localization.service.js +31 -0
- package/dist/es2015/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
- package/dist/es2015/colorpicker/localization/messages.d.ts +36 -0
- package/dist/es2015/colorpicker/localization/messages.js +36 -0
- package/dist/es2015/colorpicker/models/actions-layout.d.ts +8 -0
- package/dist/es2015/colorpicker/models/actions-layout.js +4 -0
- package/dist/es2015/colorpicker/models/colorpicker-view.d.ts +8 -0
- package/dist/es2015/colorpicker/models/colorpicker-view.js +4 -0
- package/dist/es2015/colorpicker/models/gradient-settings.d.ts +4 -3
- package/dist/es2015/colorpicker/models/output-format.d.ts +0 -5
- package/dist/es2015/colorpicker/{utils → models}/palette-presets.d.ts +0 -0
- package/dist/es2015/colorpicker/{utils → models}/palette-presets.js +0 -0
- package/dist/es2015/colorpicker/models/palette-settings.d.ts +2 -3
- package/dist/es2015/colorpicker/models/tile-size.d.ts +1 -5
- package/dist/es2015/colorpicker/models.d.ts +10 -10
- package/dist/es2015/colorpicker/models.js +1 -2
- package/dist/es2015/colorpicker/services/flatcolorpicker.service.d.ts +12 -0
- package/dist/es2015/colorpicker/services/flatcolorpicker.service.js +38 -0
- package/dist/es2015/colorpicker/utils/color-parser.d.ts +8 -2
- package/dist/es2015/colorpicker/utils/color-parser.js +15 -5
- package/dist/es2015/colorpicker/utils/contrast-curve.d.ts +37 -0
- package/dist/es2015/colorpicker/utils/contrast-curve.js +85 -0
- package/dist/es2015/colorpicker/utils.d.ts +1 -1
- package/dist/es2015/colorpicker/utils.js +1 -1
- package/dist/es2015/colorpicker.module.js +9 -1
- package/dist/es2015/index.d.ts +5 -0
- package/dist/es2015/index.js +5 -0
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/main.d.ts +4 -1
- package/dist/es2015/main.js +4 -1
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/{colorpicker/models/color-picker-view.d.ts → shared/utils.d.ts} +9 -6
- package/dist/es2015/shared/utils.js +23 -0
- package/dist/es2015/textbox/textbox.component.js +3 -1
- package/dist/fesm2015/index.js +2229 -1046
- package/dist/fesm5/index.js +2026 -904
- package/dist/npm/colorpicker/color-contrast-svg.component.js +97 -0
- package/dist/npm/colorpicker/color-gradient.component.js +109 -81
- package/dist/npm/colorpicker/color-input.component.js +38 -17
- package/dist/npm/colorpicker/color-palette.component.js +29 -19
- package/dist/npm/colorpicker/colorpicker.component.js +177 -83
- package/dist/npm/colorpicker/constants.js +12 -0
- package/dist/npm/colorpicker/contrast-validation.component.js +8 -6
- package/dist/npm/colorpicker/contrast.component.js +6 -8
- package/dist/npm/colorpicker/{models → events}/active-color-click-event.js +0 -0
- package/dist/npm/colorpicker/events/cancel-event.js +21 -0
- package/dist/npm/colorpicker/events/close-event.js +19 -0
- package/dist/npm/colorpicker/{models → events}/kendo-drag-event.js +0 -0
- package/dist/npm/colorpicker/events/open-event.js +19 -0
- package/dist/npm/colorpicker/events.js +11 -0
- package/dist/npm/colorpicker/flatcolorpicker-actions.component.js +52 -0
- package/dist/npm/colorpicker/flatcolorpicker-header.component.js +96 -0
- package/dist/npm/colorpicker/flatcolorpicker.component.js +555 -0
- package/dist/npm/colorpicker/localization/colorgradient-localization.service.js +7 -7
- package/dist/npm/colorpicker/localization/colorpalette-localization.service.js +7 -7
- package/dist/npm/colorpicker/localization/custom-messages.component.js +1 -1
- package/dist/npm/colorpicker/localization/flatcolorpicker-localization.service.js +36 -0
- package/dist/npm/colorpicker/localization/localized-colorpicker-messages.directive.js +1 -1
- package/dist/npm/colorpicker/localization/messages.js +36 -0
- package/dist/npm/colorpicker/models/{color-picker-view.js → actions-layout.js} +0 -0
- package/dist/npm/colorpicker/models/colorpicker-view.js +6 -0
- package/dist/npm/colorpicker/{utils → models}/palette-presets.js +0 -0
- package/dist/npm/colorpicker/models.js +1 -2
- package/dist/npm/colorpicker/services/flatcolorpicker.service.js +43 -0
- package/dist/npm/colorpicker/utils/color-parser.js +18 -5
- package/dist/npm/colorpicker/utils/contrast-curve.js +93 -0
- package/dist/npm/colorpicker/utils.js +1 -1
- package/dist/npm/colorpicker.module.js +9 -1
- package/dist/npm/index.js +10 -0
- package/dist/npm/main.js +7 -2
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/shared/utils.js +25 -0
- package/dist/npm/textbox/textbox.component.js +6 -4
- package/dist/systemjs/kendo-angular-inputs.js +1 -1
- package/package.json +10 -7
- package/dist/es/colorpicker/models/preventable-event.js +0 -29
- package/dist/es2015/colorpicker/models/preventable-event.d.ts +0 -21
- package/dist/es2015/colorpicker/models/preventable-event.js +0 -27
- 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 };
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -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/
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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:
|
|
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 };
|