@progress/kendo-angular-inputs 7.5.2 → 8.0.0-dev.202201101634

package/dist/es2015/colorpicker/localization/colorpalette-localization.service.js

@@ -5,18 +5,18 @@
 import * as tslib_1 from "tslib";
 import { Inject, Optional } from '@angular/core';
 import { LocalizationService, L10N_PREFIX, MessageService, RTL } from '@progress/kendo-angular-l10n';
-import { ColorPickerLocalizationService } from './colorpicker-localization.service';
+import { FlatColorPickerLocalizationService } from './flatcolorpicker-localization.service';
 /**
  * @hidden
  */
 let ColorPaletteLocalizationService = class ColorPaletteLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl, colorPickerLocalization) {
+    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
         super(prefix, messageService, _rtl);
-        this.colorPickerLocalization = colorPickerLocalization;
+        this.flatColorPickerLocalization = flatColorPickerLocalization;
     }
     get(shortKey) {
-        if (this.colorPickerLocalization) {
-            return this.colorPickerLocalization.get(shortKey);
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
         }
         return super.get(shortKey);
     }
@@ -25,7 +25,7 @@ ColorPaletteLocalizationService = tslib_1.__decorate([
     tslib_1.__param(0, Inject(L10N_PREFIX)),
     tslib_1.__param(1, Optional()),
     tslib_1.__param(2, Optional()), tslib_1.__param(2, Inject(RTL)),
-    tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(ColorPickerLocalizationService)),
-    tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, ColorPickerLocalizationService])
+    tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(FlatColorPickerLocalizationService)),
+    tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
 ], ColorPaletteLocalizationService);
 export { ColorPaletteLocalizationService };

package/dist/es2015/colorpicker/localization/custom-messages.component.js

@@ -27,7 +27,7 @@ ColorPickerCustomMessagesComponent = ColorPickerCustomMessagesComponent_1 = tsli
                 useExisting: forwardRef(() => ColorPickerCustomMessagesComponent_1) // tslint:disable-line:no-forward-ref
             }
         ],
-        selector: 'kendo-colorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages',
+        selector: 'kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages',
         template: ``
     }),
     tslib_1.__metadata("design:paramtypes", [LocalizationService])

package/dist/es2015/colorpicker/localization/flatcolorpicker-localization.service.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { LocalizationService, MessageService } from '@progress/kendo-angular-l10n';
+import { ColorPickerLocalizationService } from './colorpicker-localization.service';
+/**
+ * @hidden
+ */
+export declare class FlatColorPickerLocalizationService extends LocalizationService {
+    private colorPickerLocalization?;
+    constructor(prefix: string, messageService: MessageService, _rtl: boolean, colorPickerLocalization?: ColorPickerLocalizationService);
+    get(shortKey: string): string;
+}

package/dist/es2015/colorpicker/localization/flatcolorpicker-localization.service.js

@@ -0,0 +1,31 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Inject, Optional } from '@angular/core';
+import { LocalizationService, L10N_PREFIX, MessageService, RTL } from '@progress/kendo-angular-l10n';
+import { ColorPickerLocalizationService } from './colorpicker-localization.service';
+/**
+ * @hidden
+ */
+let FlatColorPickerLocalizationService = class FlatColorPickerLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl, colorPickerLocalization) {
+        super(prefix, messageService, _rtl);
+        this.colorPickerLocalization = colorPickerLocalization;
+    }
+    get(shortKey) {
+        if (this.colorPickerLocalization) {
+            return this.colorPickerLocalization.get(shortKey);
+        }
+        return super.get(shortKey);
+    }
+};
+FlatColorPickerLocalizationService = tslib_1.__decorate([
+    tslib_1.__param(0, Inject(L10N_PREFIX)),
+    tslib_1.__param(1, Optional()),
+    tslib_1.__param(2, Optional()), tslib_1.__param(2, Inject(RTL)),
+    tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(ColorPickerLocalizationService)),
+    tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, ColorPickerLocalizationService])
+], FlatColorPickerLocalizationService);
+export { FlatColorPickerLocalizationService };

package/dist/es2015/colorpicker/localization/localized-colorpicker-messages.directive.js

@@ -24,7 +24,7 @@ LocalizedColorPickerMessagesDirective = LocalizedColorPickerMessagesDirective_1
                 useExisting: forwardRef(() => LocalizedColorPickerMessagesDirective_1) // tslint:disable-line:no-forward-ref
             }
         ],
-        selector: '[kendoColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
+        selector: '[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
     }),
     tslib_1.__metadata("design:paramtypes", [LocalizationService])
 ], LocalizedColorPickerMessagesDirective);

package/dist/es2015/colorpicker/localization/messages.d.ts

@@ -15,6 +15,14 @@ export declare class ColorPickerMessages extends ComponentMessages {
      * The aria-label applied to the ColorGradient component when the value is empty.
      */
     colorGradientNoColor: string;
+    /**
+     * The aria-label applied to the FlatColorPicker component when the value is empty.
+     */
+    flatColorPickerNoColor: string;
+    /**
+     * The aria-label applied to the ColorPicker component when the value is empty.
+     */
+    colorPickerNoColor: string;
     /**
      * The title for the gradient color drag handle chooser.
      */
@@ -63,4 +71,32 @@ export declare class ColorPickerMessages extends ComponentMessages {
      * The "Contrast ratio" message for the contrast tool.
      */
     contrastRatio: string;
+    /**
+     * The message for the color preview pane.
+     */
+    previewColor: string;
+    /**
+     * The message for the selected color pane.
+     */
+    revertSelection: string;
+    /**
+     * The message for the gradient view button.
+     */
+    gradientView: string;
+    /**
+     * The message for the palette view button.
+     */
+    paletteView: string;
+    /**
+     * The message for the input format toggle button.
+     */
+    formatButton: string;
+    /**
+     * The message for the Apply action button.
+     */
+    applyButton: string;
+    /**
+     * The message for the Cancel action button.
+     */
+    cancelButton: string;
 }

package/dist/es2015/colorpicker/localization/messages.js

@@ -18,6 +18,14 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ColorPickerMessages.prototype, "colorGradientNoColor", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "flatColorPickerNoColor", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "colorPickerNoColor", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -66,3 +74,31 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ColorPickerMessages.prototype, "contrastRatio", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "previewColor", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "revertSelection", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "gradientView", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "paletteView", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "formatButton", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "applyButton", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "cancelButton", void 0);

package/dist/es2015/colorpicker/models/actions-layout.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * The possible layouts of the ColorPicker and FlatColorPicker action buttons.
+ */
+export declare type ColorPickerActionsLayout = 'start' | 'center' | 'end' | 'stretch';

package/dist/es2015/colorpicker/models/actions-layout.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/colorpicker/models/colorpicker-view.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * The possible popup views of the ColorPicker and FlatColorPicker components.
+ */
+export declare type ColorPickerView = 'gradient' | 'palette';

package/dist/es2015/colorpicker/models/colorpicker-view.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/colorpicker/models/gradient-settings.d.ts

@@ -11,10 +11,11 @@ export interface GradientSettings {
      */
     opacity?: boolean;
     /**
-     * Specifies whether the ColorGradient should display a 'Clear color' button.
-     * Applicable only for ColorPicker with ColorGradient, when a pallete is not specified.
+     * Enables the color contrast tool.
+     * Accepts the background color that will be compared to the selected value.
+     * The tool will calculate the contrast ratio between two colors.
      */
-    clearButton?: boolean;
+    contrastTool?: string;
     /**
      * Determines the delay time (in milliseconds) before the ColorGradient value is changed on handle drag. A value of 0 indicates no delay.
      */

package/dist/es2015/colorpicker/models/output-format.d.ts

@@ -4,10 +4,5 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Specifies the output format of the ColorPicker.
- *
- * The possible values are:
- * * `hex`
- * * `rgba`
- * * [name](https://www.w3.org/wiki/CSS/Properties/color/keywords)
  */
 export declare type OutputFormat = 'hex' | 'rgba' | 'name';

package/dist/es2015/colorpicker/models/palette-settings.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { TileSize } from './tile-size';
+import { TileSize } from '../models';
 /**
  * Configures the color palette that opens in the popup.
  */
@@ -20,14 +20,13 @@ export interface PaletteSettings {
     palette?: string | Array<string>;
     /**
      * Specifies the number of columns that will be displayed.
-     * Defaults to `10`.
      */
     columns?: number;
     /**
      * Specifies the size of a color cell.
      *
      * The possible values are:
-     * * (Default) `24`
+     * * `number`
      * * `{ width: number, height: number }`
      */
     tileSize?: number | TileSize;

package/dist/es2015/colorpicker/models/tile-size.d.ts

@@ -3,11 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the size of a color cell.
- *
- * The possible values are:
- * * (Default) `number = 24`
- * * `{ width: number, height: number }`
+ * Specifies the size of a color cell in the ColorPalette component.
  */
 export declare type TileSize = {
     width: number;

package/dist/es2015/colorpicker/models.d.ts

@@ -2,15 +2,15 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './models/popup-settings';
-export * from './models/preventable-event';
-export * from './models/tile-size';
-export * from './models/palette-settings';
-export * from './models/output-format';
-export * from './models/table-cell';
-export * from './models/active-color-click-event';
-export * from './models/kendo-drag-event';
+export * from './models/actions-layout';
+export * from './models/colorpicker-view';
+export * from './models/gradient-settings';
 export * from './models/hsva';
+export * from './models/output-format';
+export * from './models/palette-presets';
+export * from './models/palette-settings';
+export * from './models/popup-settings';
+export * from './models/rgb';
 export * from './models/rgba';
-export * from './models/color-picker-view';
-export * from './models/gradient-settings';
+export * from './models/table-cell';
+export * from './models/tile-size';

package/dist/es2015/colorpicker/models.js

@@ -2,5 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './models/preventable-event';
-export * from './models/active-color-click-event';
+export * from './models/palette-presets';

package/dist/es2015/colorpicker/services/flatcolorpicker.service.d.ts

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TileSize, PaletteSettings } from "../models";
+/**
+ * @hidden
+ */
+export declare class FlatColorPickerService {
+    getPaletteSettings(settings: PaletteSettings, format: string): PaletteSettings;
+    paletteTileLayout(tileSize: number | TileSize): TileSize;
+}

package/dist/es2015/colorpicker/services/flatcolorpicker.service.js

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable } from "@angular/core";
+import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from "../constants";
+import { PALETTEPRESETS } from "../models";
+/**
+ * @hidden
+ */
+let FlatColorPickerService = class FlatColorPickerService {
+    getPaletteSettings(settings, format) {
+        const defaultPreset = (format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        const settingsPalette = settings.palette;
+        const presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
+            PALETTEPRESETS[settingsPalette].columns :
+            undefined;
+        return {
+            palette: settingsPalette || defaultPreset,
+            tileSize: settings.tileSize || 24,
+            columns: settings.columns || presetColumns || 10
+        };
+    }
+    paletteTileLayout(tileSize) {
+        if (typeof tileSize === 'number') {
+            return { width: tileSize, height: tileSize };
+        }
+        return {
+            width: tileSize.width ? tileSize.width : tileSize.height,
+            height: tileSize.height ? tileSize.height : tileSize.width
+        };
+    }
+};
+FlatColorPickerService = tslib_1.__decorate([
+    Injectable()
+], FlatColorPickerService);
+export { FlatColorPickerService };

package/dist/es2015/colorpicker/utils/color-parser.d.ts

@@ -9,7 +9,7 @@ import { RGB } from '../models/rgb';
  *
  * Returns the hex or rgba string representation of the color.
  */
-export declare const parseColor: (value: string, format: OutputFormat, safe?: boolean) => string;
+export declare const parseColor: (value: string, format: OutputFormat, opacityEnabled?: boolean, safe?: boolean) => string;
 /**
  * @hidden
  *
@@ -27,7 +27,13 @@ export declare const getRGBA: (value: string, safe?: boolean) => RGBA;
  *
  * Returns the RGBA string representation of the color.
  */
-export declare const getColorFromHSV: (hsva: HSVA) => string;
+export declare const getColorFromHSV: (hsva: HSVA, format?: OutputFormat, opacityEnabled?: boolean) => string;
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+export declare const getHexValue: (color: any, opacity: boolean) => string;
 /**
  * @hidden
  *

package/dist/es2015/colorpicker/utils/color-parser.js

@@ -9,7 +9,7 @@ import { isPresent, fitIntoBounds } from '../../common/utils';
  *
  * Returns the hex or rgba string representation of the color.
  */
-export const parseColor = (value, format, safe = true) => {
+export const parseColor = (value, format, opacityEnabled = false, safe = true) => {
     const allowedFormats = ['hex', 'rgba', 'name'];
     if (allowedFormats.indexOf(format) === -1) {
         throw new Error(`Unsupported color output format '${format}'. The available options are 'hex', 'rgba' or 'name'.`);
@@ -24,7 +24,8 @@ export const parseColor = (value, format, safe = true) => {
     if (!isPresent(parsedColor)) {
         return;
     }
-    return format === 'hex' ? parsedColor.toCss() : parsedColor.toCssRgba();
+    const parsedColorResult = format === 'hex' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
+    return parsedColorResult;
 };
 /**
  * @hidden
@@ -55,12 +56,21 @@ export const getRGBA = (value, safe = true) => {
  *
  * Returns the RGBA string representation of the color.
  */
-export const getColorFromHSV = (hsva) => {
+export const getColorFromHSV = (hsva, format = 'rgba', opacityEnabled = false) => {
     const hue = fitIntoBounds(hsva.h, 0, 359.9);
     const saturation = fitIntoBounds(hsva.s, 0, 1);
     const value = fitIntoBounds(hsva.v, 0, 1);
     const alpha = fitIntoBounds(hsva.a, 0, 1);
-    return Color.fromHSV(hue, saturation, value, alpha).toCssRgba();
+    const color = Color.fromHSV(hue, saturation, value, alpha);
+    return format === 'hex' ? getHexValue(color, opacityEnabled) : color.toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+export const getHexValue = (color, opacity) => {
+    return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
 };
 /**
  * @hidden
@@ -96,7 +106,7 @@ export function nameFormat(value, safe) {
     }
     const key = Object.keys(colors).find(key => colors[key] === value);
     if (!key && !safe) {
-        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' `);
+        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' `);
     }
     return key;
 }

package/dist/es2015/colorpicker/utils/contrast-curve.d.ts

@@ -0,0 +1,37 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare const bezierCommand: (controlPointCalc: Function) => (point: number[], i: number, a: number[]) => string;
+/**
+ * @hidden
+ */
+export declare const controlPoint: (lineCalc: Function) => (current: number[], previous: number[], next: number[], reverse?: boolean) => number[];
+/**
+ * @hidden
+ */
+export declare const line: (pointA: number[], pointB: number[]) => {
+    length: number;
+    angle: number;
+};
+/**
+ * @hidden
+ */
+export declare const d: (points: number[][], command: Function) => string;
+/**
+ * @hidden
+ *
+ * Render the svg <path> element.
+ *
+ * @param points (array) Represents the points coordinates as an array of tuples.
+ * @param command (function) The command that is used (bezierCommand, lineCommand).
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) a svg path command.
+ * @output (string) a Svg <path> element
+ */
+export declare const svgPath: (points: number[][], command: Function) => string;

package/dist/es2015/colorpicker/utils/contrast-curve.js

@@ -0,0 +1,85 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const bezierCommand = (controlPointCalc) => (point, i, a) => {
+    // start control point
+    const [cpsX, cpsY] = controlPointCalc(a[i - 1], a[i - 2], point);
+    // end control point
+    const [cpeX, cpeY] = controlPointCalc(point, a[i - 1], a[i + 1], true);
+    return `C ${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`;
+};
+/**
+ * @hidden
+ */
+export const controlPoint = (lineCalc) => (current, previous, next, reverse) => {
+    // when 'current' is the first or last point of the array
+    // 'previous' and 'next' are undefined
+    // replace with 'current'
+    const p = previous || current;
+    const n = next || current;
+    const smooth = 0.1;
+    // properties of the line between previous and next
+    const l = lineCalc(p, n);
+    // If is end-control-point, add PI to the angle to go backward
+    const angle = l.angle + (reverse ? Math.PI : 0);
+    const length = l.length * smooth;
+    // The control point position is relative to the current point
+    const x = current[0] + Math.cos(angle) * length;
+    const y = current[1] + Math.sin(angle) * length;
+    return [x, y];
+};
+/**
+ * @hidden
+ */
+export const line = (pointA, pointB) => {
+    const lengthX = pointB[0] - pointA[0];
+    const lengthY = pointB[1] - pointA[1];
+    return {
+        length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+        angle: Math.atan2(lengthY, lengthX)
+    };
+};
+/**
+ * @hidden
+ */
+export const d = (points, command) => {
+    if (points.length === 0) {
+        return '';
+    }
+    // build the d attributes by looping over the points
+    const d = points.reduce((acc, point, i, a) => i === 0 ?
+        // if first point
+        `M ${point[0]},${point[1]}` :
+        // else
+        `${acc} ${command(point, i, a)}`, '');
+    return d;
+};
+/**
+ * @hidden
+ *
+ * Render the svg <path> element.
+ *
+ * @param points (array) Represents the points coordinates as an array of tuples.
+ * @param command (function) The command that is used (bezierCommand, lineCommand).
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) a svg path command.
+ * @output (string) a Svg <path> element
+ */
+export const svgPath = (points, command) => {
+    if (points.length === 0) {
+        return '';
+    }
+    // build the d attributes by looping over the points
+    const d = points.reduce((acc, point, i, a) => i === 0 ?
+        // if first point
+        `M ${point[0]},${point[1]}` :
+        // else
+        `${acc} ${command(point, i, a)}`, '');
+    return d;
+};

package/dist/es2015/colorpicker/utils.d.ts

@@ -2,5 +2,5 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './utils/palette-presets';
 export * from './utils/color-parser';
+export * from './utils/contrast-curve';

package/dist/es2015/colorpicker/utils.js

@@ -2,5 +2,5 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './utils/palette-presets';
 export * from './utils/color-parser';
+export * from './utils/contrast-curve';

package/dist/es2015/colorpicker.module.js

@@ -13,15 +13,20 @@ import { ColorPickerComponent } from './colorpicker/colorpicker.component';
 import { ColorPaletteComponent } from './colorpicker/color-palette.component';
 import { ColorGradientComponent } from './colorpicker/color-gradient.component';
 import { ColorInputComponent } from './colorpicker/color-input.component';
+import { FlatColorPickerHeaderComponent } from './colorpicker/flatcolorpicker-header.component';
+import { FlatColorPickerActionButtonsComponent } from './colorpicker/flatcolorpicker-actions.component';
+import { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
 import { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
 import { LocalizedColorPickerMessagesDirective } from './colorpicker/localization/localized-colorpicker-messages.directive';
 import { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
 import { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
 import { ContrastComponent } from './colorpicker/contrast.component';
+import { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
 const PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
     ColorPaletteComponent,
     ColorGradientComponent,
+    FlatColorPickerComponent,
     LocalizedColorPickerMessagesDirective,
     ColorPickerCustomMessagesComponent
 ];
@@ -29,7 +34,10 @@ const INTERNAL_DIRECTIVES = [
     ColorInputComponent,
     FocusOnDomReadyDirective,
     ContrastComponent,
-    ContrastValidationComponent
+    ContrastValidationComponent,
+    FlatColorPickerHeaderComponent,
+    FlatColorPickerActionButtonsComponent,
+    ColorContrastSvgComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})