@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
|
@@ -3,8 +3,8 @@
|
|
|
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 { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
6
|
import { Component, Input } from '@angular/core';
|
|
7
|
+
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { getContrastFromTwoRGBAs, getRGBA } from './utils';
|
|
9
9
|
import { AA_RATIO, AAA_RATIO } from './constants';
|
|
10
10
|
/**
|
|
@@ -13,20 +13,18 @@ import { AA_RATIO, AAA_RATIO } from './constants';
|
|
|
13
13
|
let ContrastComponent = class ContrastComponent {
|
|
14
14
|
constructor(localization) {
|
|
15
15
|
this.localization = localization;
|
|
16
|
-
this.aaRatio = AA_RATIO;
|
|
17
|
-
this.aaaRatio = AAA_RATIO;
|
|
18
16
|
}
|
|
19
17
|
get formatedRatio() {
|
|
20
18
|
return this.contrastRatio.toFixed(2);
|
|
21
19
|
}
|
|
22
|
-
get
|
|
23
|
-
return this.localization.get('contrastRatio')
|
|
20
|
+
get contrastRatioText() {
|
|
21
|
+
return `${this.localization.get('contrastRatio')}: ${this.value ? this.formatedRatio : 'n/a'}`;
|
|
24
22
|
}
|
|
25
23
|
get satisfiesAACondition() {
|
|
26
|
-
return this.contrastRatio >=
|
|
24
|
+
return this.contrastRatio >= AA_RATIO;
|
|
27
25
|
}
|
|
28
26
|
get satisfiesAAACondition() {
|
|
29
|
-
return this.contrastRatio >=
|
|
27
|
+
return this.contrastRatio >= AAA_RATIO;
|
|
30
28
|
}
|
|
31
29
|
get contrastRatio() {
|
|
32
30
|
let contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
|
|
@@ -46,23 +44,25 @@ ContrastComponent = tslib_1.__decorate([
|
|
|
46
44
|
selector: '[kendoContrastTool]',
|
|
47
45
|
template: `
|
|
48
46
|
<div class="k-contrast-ratio">
|
|
49
|
-
<span class="k-contrast-ratio-text">{{
|
|
50
|
-
<
|
|
51
|
-
<span class="k-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<span class="k-
|
|
56
|
-
|
|
47
|
+
<span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
|
|
48
|
+
<ng-container *ngIf="value">
|
|
49
|
+
<span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
|
|
50
|
+
<span class="k-icon k-i-check"></span>
|
|
51
|
+
<span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
|
|
52
|
+
</span>
|
|
53
|
+
<span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
|
|
54
|
+
<span class="k-icon k-i-close"></span>
|
|
55
|
+
</span>
|
|
56
|
+
</ng-container>
|
|
57
57
|
</div>
|
|
58
58
|
<div kendoContrastValidation
|
|
59
59
|
type="AA"
|
|
60
|
-
[
|
|
60
|
+
[value]="value"
|
|
61
61
|
[pass]="satisfiesAACondition">
|
|
62
62
|
</div>
|
|
63
63
|
<div kendoContrastValidation
|
|
64
64
|
type="AAA"
|
|
65
|
-
[
|
|
65
|
+
[value]="value"
|
|
66
66
|
[pass]="satisfiesAAACondition">
|
|
67
67
|
</div>
|
|
68
68
|
`
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,15 @@
|
|
|
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 { PreventableEvent } from "@progress/kendo-angular-common";
|
|
6
|
+
/**
|
|
7
|
+
* Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
|
|
8
|
+
*/
|
|
9
|
+
export declare class ColorPickerCancelEvent extends PreventableEvent {
|
|
10
|
+
/**
|
|
11
|
+
* The DOM event that triggered the `cancel` event.
|
|
12
|
+
*/
|
|
13
|
+
originalEvent: any;
|
|
14
|
+
constructor(originalEvent: any);
|
|
15
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
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 { PreventableEvent } from "@progress/kendo-angular-common";
|
|
6
|
+
/**
|
|
7
|
+
* Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
|
|
8
|
+
*/
|
|
9
|
+
export class ColorPickerCancelEvent extends PreventableEvent {
|
|
10
|
+
constructor(originalEvent) {
|
|
11
|
+
super();
|
|
12
|
+
this.originalEvent = originalEvent;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
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 { PreventableEvent } from "@progress/kendo-angular-common";
|
|
6
|
+
/**
|
|
7
|
+
* Arguments for the `close` event of the ColorPicker component.
|
|
8
|
+
*/
|
|
9
|
+
export declare class ColorPickerCloseEvent extends PreventableEvent {
|
|
10
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
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 { PreventableEvent } from "@progress/kendo-angular-common";
|
|
6
|
+
/**
|
|
7
|
+
* Arguments for the `close` event of the ColorPicker component.
|
|
8
|
+
*/
|
|
9
|
+
export class ColorPickerCloseEvent extends PreventableEvent {
|
|
10
|
+
}
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,10 @@
|
|
|
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 { PreventableEvent } from "@progress/kendo-angular-common";
|
|
6
|
+
/**
|
|
7
|
+
* Arguments for the `open` event of the ColorPicker component.
|
|
8
|
+
*/
|
|
9
|
+
export declare class ColorPickerOpenEvent extends PreventableEvent {
|
|
10
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
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 { PreventableEvent } from "@progress/kendo-angular-common";
|
|
6
|
+
/**
|
|
7
|
+
* Arguments for the `open` event of the ColorPicker component.
|
|
8
|
+
*/
|
|
9
|
+
export class ColorPickerOpenEvent extends PreventableEvent {
|
|
10
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
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
|
+
export * from './events/cancel-event';
|
|
6
|
+
export * from './events/close-event';
|
|
7
|
+
export * from './events/open-event';
|
|
8
|
+
export * from './events/active-color-click-event';
|
|
@@ -0,0 +1,8 @@
|
|
|
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
|
+
export * from './events/cancel-event';
|
|
6
|
+
export * from './events/close-event';
|
|
7
|
+
export * from './events/open-event';
|
|
8
|
+
export * from './events/active-color-click-event';
|
|
@@ -0,0 +1,18 @@
|
|
|
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 { EventEmitter, ElementRef } from '@angular/core';
|
|
6
|
+
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
+
/**
|
|
8
|
+
* @hidden
|
|
9
|
+
*/
|
|
10
|
+
export declare class FlatColorPickerActionButtonsComponent {
|
|
11
|
+
localizationService: LocalizationService;
|
|
12
|
+
hostClasses: boolean;
|
|
13
|
+
actionButtonClick: EventEmitter<any>;
|
|
14
|
+
lastButton: ElementRef;
|
|
15
|
+
constructor(localizationService: LocalizationService);
|
|
16
|
+
getText(text: string): string;
|
|
17
|
+
onActionButtonClick(type: string, ev: any): void;
|
|
18
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
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, EventEmitter, Output, ElementRef, ViewChild } from '@angular/core';
|
|
7
|
+
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
let FlatColorPickerActionButtonsComponent = class FlatColorPickerActionButtonsComponent {
|
|
12
|
+
constructor(localizationService) {
|
|
13
|
+
this.localizationService = localizationService;
|
|
14
|
+
this.hostClasses = true;
|
|
15
|
+
this.actionButtonClick = new EventEmitter();
|
|
16
|
+
}
|
|
17
|
+
getText(text) {
|
|
18
|
+
return this.localizationService.get(text);
|
|
19
|
+
}
|
|
20
|
+
onActionButtonClick(type, ev) {
|
|
21
|
+
let args = {
|
|
22
|
+
target: type,
|
|
23
|
+
originalEvent: ev
|
|
24
|
+
};
|
|
25
|
+
this.actionButtonClick.emit(args);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
tslib_1.__decorate([
|
|
29
|
+
HostBinding('class.k-coloreditor-footer'),
|
|
30
|
+
HostBinding('class.k-actions'),
|
|
31
|
+
HostBinding('class.k-hstack'),
|
|
32
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
33
|
+
], FlatColorPickerActionButtonsComponent.prototype, "hostClasses", void 0);
|
|
34
|
+
tslib_1.__decorate([
|
|
35
|
+
Output(),
|
|
36
|
+
tslib_1.__metadata("design:type", EventEmitter)
|
|
37
|
+
], FlatColorPickerActionButtonsComponent.prototype, "actionButtonClick", void 0);
|
|
38
|
+
tslib_1.__decorate([
|
|
39
|
+
ViewChild('last', { read: ElementRef, static: false }),
|
|
40
|
+
tslib_1.__metadata("design:type", ElementRef)
|
|
41
|
+
], FlatColorPickerActionButtonsComponent.prototype, "lastButton", void 0);
|
|
42
|
+
FlatColorPickerActionButtonsComponent = tslib_1.__decorate([
|
|
43
|
+
Component({
|
|
44
|
+
selector: '[kendoFlatColorPickerActionButtons]',
|
|
45
|
+
template: `
|
|
46
|
+
<button
|
|
47
|
+
class="k-coloreditor-cancel k-button"
|
|
48
|
+
[attr.title]="getText('cancelButton')"
|
|
49
|
+
(click)="onActionButtonClick('cancel', $event)"
|
|
50
|
+
>{{getText('cancelButton')}}</button>
|
|
51
|
+
<button #last
|
|
52
|
+
class="k-coloreditor-apply k-button k-primary"
|
|
53
|
+
[attr.title]="getText('applyButton')"
|
|
54
|
+
(click)="onActionButtonClick('apply', $event)"
|
|
55
|
+
>{{getText('applyButton')}}</button>
|
|
56
|
+
`
|
|
57
|
+
}),
|
|
58
|
+
tslib_1.__metadata("design:paramtypes", [LocalizationService])
|
|
59
|
+
], FlatColorPickerActionButtonsComponent);
|
|
60
|
+
export { FlatColorPickerActionButtonsComponent };
|
|
@@ -0,0 +1,30 @@
|
|
|
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 { EventEmitter, QueryList, ElementRef } from '@angular/core';
|
|
6
|
+
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
+
import { ColorPickerView } from './models';
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
export declare class FlatColorPickerHeaderComponent {
|
|
12
|
+
private localizationService;
|
|
13
|
+
hostClasses: boolean;
|
|
14
|
+
clearButton: boolean;
|
|
15
|
+
activeView: ColorPickerView;
|
|
16
|
+
views: Array<ColorPickerView>;
|
|
17
|
+
preview: boolean;
|
|
18
|
+
value: string;
|
|
19
|
+
selection: string;
|
|
20
|
+
viewChange: EventEmitter<string>;
|
|
21
|
+
valuePaneClick: EventEmitter<any>;
|
|
22
|
+
clearButtonClick: EventEmitter<any>;
|
|
23
|
+
viewButtonsCollection: QueryList<ElementRef>;
|
|
24
|
+
clearButtonElement: ElementRef;
|
|
25
|
+
constructor(localizationService: LocalizationService);
|
|
26
|
+
onViewButtonClick(view: ColorPickerView): void;
|
|
27
|
+
readonly viewButtons: boolean;
|
|
28
|
+
getViewButtonIcon(view: string): string;
|
|
29
|
+
getText(text: string): string;
|
|
30
|
+
}
|
|
@@ -0,0 +1,131 @@
|
|
|
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, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef } from '@angular/core';
|
|
7
|
+
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
let FlatColorPickerHeaderComponent = class FlatColorPickerHeaderComponent {
|
|
12
|
+
constructor(localizationService) {
|
|
13
|
+
this.localizationService = localizationService;
|
|
14
|
+
this.hostClasses = true;
|
|
15
|
+
this.viewChange = new EventEmitter();
|
|
16
|
+
this.valuePaneClick = new EventEmitter();
|
|
17
|
+
this.clearButtonClick = new EventEmitter();
|
|
18
|
+
}
|
|
19
|
+
onViewButtonClick(view) {
|
|
20
|
+
this.activeView = view;
|
|
21
|
+
this.viewChange.emit(view);
|
|
22
|
+
}
|
|
23
|
+
get viewButtons() {
|
|
24
|
+
return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
|
|
25
|
+
}
|
|
26
|
+
getViewButtonIcon(view) {
|
|
27
|
+
return view === 'gradient' ? 'k-i-color-canvas' : 'k-i-palette';
|
|
28
|
+
}
|
|
29
|
+
getText(text) {
|
|
30
|
+
return this.localizationService.get(text);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
tslib_1.__decorate([
|
|
34
|
+
HostBinding('class.k-coloreditor-header'),
|
|
35
|
+
HostBinding('class.k-hstack'),
|
|
36
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
37
|
+
], FlatColorPickerHeaderComponent.prototype, "hostClasses", void 0);
|
|
38
|
+
tslib_1.__decorate([
|
|
39
|
+
Input(),
|
|
40
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
41
|
+
], FlatColorPickerHeaderComponent.prototype, "clearButton", void 0);
|
|
42
|
+
tslib_1.__decorate([
|
|
43
|
+
Input(),
|
|
44
|
+
tslib_1.__metadata("design:type", String)
|
|
45
|
+
], FlatColorPickerHeaderComponent.prototype, "activeView", void 0);
|
|
46
|
+
tslib_1.__decorate([
|
|
47
|
+
Input(),
|
|
48
|
+
tslib_1.__metadata("design:type", Array)
|
|
49
|
+
], FlatColorPickerHeaderComponent.prototype, "views", void 0);
|
|
50
|
+
tslib_1.__decorate([
|
|
51
|
+
Input(),
|
|
52
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
53
|
+
], FlatColorPickerHeaderComponent.prototype, "preview", void 0);
|
|
54
|
+
tslib_1.__decorate([
|
|
55
|
+
Input(),
|
|
56
|
+
tslib_1.__metadata("design:type", String)
|
|
57
|
+
], FlatColorPickerHeaderComponent.prototype, "value", void 0);
|
|
58
|
+
tslib_1.__decorate([
|
|
59
|
+
Input(),
|
|
60
|
+
tslib_1.__metadata("design:type", String)
|
|
61
|
+
], FlatColorPickerHeaderComponent.prototype, "selection", void 0);
|
|
62
|
+
tslib_1.__decorate([
|
|
63
|
+
Output(),
|
|
64
|
+
tslib_1.__metadata("design:type", EventEmitter)
|
|
65
|
+
], FlatColorPickerHeaderComponent.prototype, "viewChange", void 0);
|
|
66
|
+
tslib_1.__decorate([
|
|
67
|
+
Output(),
|
|
68
|
+
tslib_1.__metadata("design:type", EventEmitter)
|
|
69
|
+
], FlatColorPickerHeaderComponent.prototype, "valuePaneClick", void 0);
|
|
70
|
+
tslib_1.__decorate([
|
|
71
|
+
Output(),
|
|
72
|
+
tslib_1.__metadata("design:type", EventEmitter)
|
|
73
|
+
], FlatColorPickerHeaderComponent.prototype, "clearButtonClick", void 0);
|
|
74
|
+
tslib_1.__decorate([
|
|
75
|
+
ViewChildren('viewButtons', { read: ElementRef }),
|
|
76
|
+
tslib_1.__metadata("design:type", QueryList)
|
|
77
|
+
], FlatColorPickerHeaderComponent.prototype, "viewButtonsCollection", void 0);
|
|
78
|
+
tslib_1.__decorate([
|
|
79
|
+
ViewChild('clearButton', { read: ElementRef, static: false }),
|
|
80
|
+
tslib_1.__metadata("design:type", ElementRef)
|
|
81
|
+
], FlatColorPickerHeaderComponent.prototype, "clearButtonElement", void 0);
|
|
82
|
+
FlatColorPickerHeaderComponent = tslib_1.__decorate([
|
|
83
|
+
Component({
|
|
84
|
+
selector: '[kendoFlatColorPickerHeader]',
|
|
85
|
+
template: `
|
|
86
|
+
<div class="k-coloreditor-header-actions k-hstack">
|
|
87
|
+
<div *ngIf="viewButtons" class="k-button-group k-button-group-flat">
|
|
88
|
+
<button *ngFor="let view of views"
|
|
89
|
+
#viewButtons
|
|
90
|
+
(click)="onViewButtonClick(view)"
|
|
91
|
+
class="k-button k-icon-button k-flat"
|
|
92
|
+
[attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
|
|
93
|
+
[attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
|
|
94
|
+
[attr.aria-pressed]="activeView === view"
|
|
95
|
+
[ngClass]="activeView === view ? 'k-state-selected' : ''"
|
|
96
|
+
>
|
|
97
|
+
<span
|
|
98
|
+
class="k-button-icon k-icon"
|
|
99
|
+
[ngClass]="getViewButtonIcon(view)">
|
|
100
|
+
</span>
|
|
101
|
+
</button>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="k-spacer"></div>
|
|
105
|
+
<div class="k-coloreditor-header-actions k-hstack">
|
|
106
|
+
<button *ngIf="clearButton"
|
|
107
|
+
#clearButton
|
|
108
|
+
class="k-button k-icon-button k-flat k-coloreditor-reset"
|
|
109
|
+
[attr.aria-label]="getText('clearButton')"
|
|
110
|
+
[attr.title]="getText('clearButton')"
|
|
111
|
+
(click)="clearButtonClick.emit()">
|
|
112
|
+
<span class="k-button-icon k-icon k-i-reset-color"></span>
|
|
113
|
+
</button>
|
|
114
|
+
<div class="k-coloreditor-preview k-vstack" *ngIf="preview">
|
|
115
|
+
<span
|
|
116
|
+
class="k-coloreditor-preview-color k-color-preview"
|
|
117
|
+
[attr.title]="getText('previewColor')"
|
|
118
|
+
[style.background-color]="selection">
|
|
119
|
+
</span>
|
|
120
|
+
<span class="k-coloreditor-current-color k-color-preview"
|
|
121
|
+
[style.background-color]="value"
|
|
122
|
+
[attr.title]="getText('revertSelection')"
|
|
123
|
+
(click)="valuePaneClick.emit($event)">
|
|
124
|
+
</span>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
`
|
|
128
|
+
}),
|
|
129
|
+
tslib_1.__metadata("design:paramtypes", [LocalizationService])
|
|
130
|
+
], FlatColorPickerHeaderComponent);
|
|
131
|
+
export { FlatColorPickerHeaderComponent };
|
|
@@ -0,0 +1,214 @@
|
|
|
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 { ElementRef, EventEmitter, NgZone, ChangeDetectorRef, OnInit, AfterViewInit, OnDestroy, Renderer2, SimpleChanges } from "@angular/core";
|
|
6
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
7
|
+
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
|
+
import { FlatColorPickerService } from './services/flatcolorpicker.service';
|
|
9
|
+
import { ColorPickerView, GradientSettings, OutputFormat, PaletteSettings, ColorPickerActionsLayout } from "./models";
|
|
10
|
+
import { ColorPickerCancelEvent } from './events';
|
|
11
|
+
import { ColorGradientComponent } from './color-gradient.component';
|
|
12
|
+
import { ColorPaletteComponent } from './color-palette.component';
|
|
13
|
+
import { FlatColorPickerHeaderComponent } from './flatcolorpicker-header.component';
|
|
14
|
+
import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions.component';
|
|
15
|
+
/**
|
|
16
|
+
* Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
|
|
17
|
+
*
|
|
18
|
+
* The FlatColorPicker is a powerful tool which allows the user to choose colors through palettes with predefined sets of colors and
|
|
19
|
+
* through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
|
|
20
|
+
*/
|
|
21
|
+
export declare class FlatColorPickerComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
|
|
22
|
+
private service;
|
|
23
|
+
private host;
|
|
24
|
+
private localizationService;
|
|
25
|
+
private cdr;
|
|
26
|
+
private renderer;
|
|
27
|
+
private ngZone;
|
|
28
|
+
hostClasses: boolean;
|
|
29
|
+
readonly disabledClass: boolean;
|
|
30
|
+
readonly ariaReadonly: boolean;
|
|
31
|
+
direction: string;
|
|
32
|
+
readonly hostTabindex: number;
|
|
33
|
+
/**
|
|
34
|
+
* Sets the read-only state of the FlatColorPicker.
|
|
35
|
+
*
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
readonly: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Sets the disabled state of the FlatColorPicker.
|
|
41
|
+
*
|
|
42
|
+
* @default false
|
|
43
|
+
*/
|
|
44
|
+
disabled: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Specifies the output format of the FlatColorPicker.
|
|
47
|
+
*
|
|
48
|
+
* If the input value is in a different format, it will be parsed into the specified output `format`.
|
|
49
|
+
*
|
|
50
|
+
* The supported values are:
|
|
51
|
+
* * `rgba` (default)
|
|
52
|
+
* * `hex`
|
|
53
|
+
*/
|
|
54
|
+
format: OutputFormat;
|
|
55
|
+
/**
|
|
56
|
+
* Specifies the initially selected color.
|
|
57
|
+
*/
|
|
58
|
+
value: string;
|
|
59
|
+
/**
|
|
60
|
+
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
|
61
|
+
*
|
|
62
|
+
* @default 0
|
|
63
|
+
*/
|
|
64
|
+
tabindex: number;
|
|
65
|
+
/**
|
|
66
|
+
* Specifies whether the FlatColorPicker should display a 'Clear color' button.
|
|
67
|
+
*
|
|
68
|
+
* @default true
|
|
69
|
+
*/
|
|
70
|
+
clearButton: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Displays `Apply` and `Cancel` action buttons and a color preview pane.
|
|
73
|
+
*
|
|
74
|
+
* When enabled, the component value will not change immediately upon
|
|
75
|
+
* color selection, but only after the `Apply` button is clicked.
|
|
76
|
+
*
|
|
77
|
+
* The `Cancel` button reverts the current selection to its
|
|
78
|
+
* initial state i.e. to the current value.
|
|
79
|
+
*
|
|
80
|
+
* @default true
|
|
81
|
+
*/
|
|
82
|
+
preview: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Configures the layout of the `Apply` and `Cancel` action buttons.
|
|
85
|
+
* * `start`
|
|
86
|
+
* * `center`
|
|
87
|
+
* * `end` (default)
|
|
88
|
+
* * `stretch`
|
|
89
|
+
*/
|
|
90
|
+
actionsLayout: ColorPickerActionsLayout;
|
|
91
|
+
/**
|
|
92
|
+
* Sets the initially active view in the FlatColorPicker. The property supports two-way binding.
|
|
93
|
+
* * `gradient` (default)
|
|
94
|
+
* * `palette`
|
|
95
|
+
*/
|
|
96
|
+
activeView: ColorPickerView;
|
|
97
|
+
/**
|
|
98
|
+
* Specifies the views that will be rendered. Default value is gradient and palette.
|
|
99
|
+
*/
|
|
100
|
+
views: Array<ColorPickerView>;
|
|
101
|
+
/**
|
|
102
|
+
* Configures the gradient view.
|
|
103
|
+
*/
|
|
104
|
+
gradientSettings: GradientSettings;
|
|
105
|
+
/**
|
|
106
|
+
* Configures the palette view.
|
|
107
|
+
*/
|
|
108
|
+
paletteSettings: PaletteSettings;
|
|
109
|
+
/**
|
|
110
|
+
* Fires each time the component value is changed.
|
|
111
|
+
*/
|
|
112
|
+
valueChange: EventEmitter<any>;
|
|
113
|
+
/**
|
|
114
|
+
* Fires when the user cancels the current color selection.
|
|
115
|
+
*
|
|
116
|
+
* The event is emitted on preview pane or on 'Cancel' button click.
|
|
117
|
+
*/
|
|
118
|
+
cancel: EventEmitter<ColorPickerCancelEvent>;
|
|
119
|
+
/**
|
|
120
|
+
* Fires each time the view is about to change.
|
|
121
|
+
* Used to provide a two-way binding for the `activeView` property.
|
|
122
|
+
*/
|
|
123
|
+
activeViewChange: EventEmitter<string>;
|
|
124
|
+
/**
|
|
125
|
+
* @hidden
|
|
126
|
+
*/
|
|
127
|
+
actionButtonClick: EventEmitter<any>;
|
|
128
|
+
header: FlatColorPickerHeaderComponent;
|
|
129
|
+
gradient: ColorGradientComponent;
|
|
130
|
+
palette: ColorPaletteComponent;
|
|
131
|
+
footer: FlatColorPickerActionButtonsComponent;
|
|
132
|
+
/**
|
|
133
|
+
* @hidden
|
|
134
|
+
*/
|
|
135
|
+
selection: string;
|
|
136
|
+
private focused;
|
|
137
|
+
private _value;
|
|
138
|
+
private _tabindex;
|
|
139
|
+
private _gradientSettings;
|
|
140
|
+
private _paletteSettings;
|
|
141
|
+
private dynamicRTLSubscription;
|
|
142
|
+
private subscriptions;
|
|
143
|
+
constructor(service: FlatColorPickerService, host: ElementRef, localizationService: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone);
|
|
144
|
+
ngOnInit(): void;
|
|
145
|
+
ngAfterViewInit(): void;
|
|
146
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
147
|
+
ngOnDestroy(): void;
|
|
148
|
+
/**
|
|
149
|
+
* @hidden
|
|
150
|
+
*/
|
|
151
|
+
readonly headerHasContent: boolean;
|
|
152
|
+
/**
|
|
153
|
+
* @hidden
|
|
154
|
+
* Used by the FloatingLabel to determine if the component is empty.
|
|
155
|
+
*/
|
|
156
|
+
isEmpty(): boolean;
|
|
157
|
+
/**
|
|
158
|
+
* Focuses the wrapper of the FlatColorPicker.
|
|
159
|
+
*/
|
|
160
|
+
focus(): void;
|
|
161
|
+
/**
|
|
162
|
+
* Blurs the wrapper of the FlatColorPicker.
|
|
163
|
+
*/
|
|
164
|
+
blur(): void;
|
|
165
|
+
/**
|
|
166
|
+
* Clears the value of the FlatColorPicker.
|
|
167
|
+
*/
|
|
168
|
+
reset(): void;
|
|
169
|
+
/**
|
|
170
|
+
* @hidden
|
|
171
|
+
*/
|
|
172
|
+
onViewChange(view: ColorPickerView): void;
|
|
173
|
+
/**
|
|
174
|
+
* @hidden
|
|
175
|
+
*/
|
|
176
|
+
onClearButtonClick(): void;
|
|
177
|
+
/**
|
|
178
|
+
* @hidden
|
|
179
|
+
*/
|
|
180
|
+
handleValueChange(color: string): void;
|
|
181
|
+
/**
|
|
182
|
+
* @hidden
|
|
183
|
+
*/
|
|
184
|
+
onAction(ev: any): void;
|
|
185
|
+
/**
|
|
186
|
+
* @hidden
|
|
187
|
+
*/
|
|
188
|
+
writeValue(value: string): void;
|
|
189
|
+
/**
|
|
190
|
+
* @hidden
|
|
191
|
+
*/
|
|
192
|
+
registerOnChange(fn: any): void;
|
|
193
|
+
/**
|
|
194
|
+
* @hidden
|
|
195
|
+
*/
|
|
196
|
+
registerOnTouched(fn: any): void;
|
|
197
|
+
/**
|
|
198
|
+
* @hidden
|
|
199
|
+
*/
|
|
200
|
+
setDisabledState(isDisabled: boolean): void;
|
|
201
|
+
/**
|
|
202
|
+
* @hidden
|
|
203
|
+
*/
|
|
204
|
+
resetSelection(ev: any): void;
|
|
205
|
+
private setHostElementAriaLabel;
|
|
206
|
+
private setSizingVariables;
|
|
207
|
+
private changeCurrentValue;
|
|
208
|
+
private resetInnerComponentValue;
|
|
209
|
+
private setFlatColorPickerValue;
|
|
210
|
+
private setActiveView;
|
|
211
|
+
private notifyNgChanged;
|
|
212
|
+
private notifyNgTouched;
|
|
213
|
+
private initDomEvents;
|
|
214
|
+
}
|