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

package/dist/npm/colorpicker/colorpicker.component.js

@@ -7,23 +7,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
+var flatcolorpicker_component_1 = require("./flatcolorpicker.component");
 var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
-var package_metadata_1 = require("../package-metadata");
-var models_1 = require("./models");
-var color_parser_1 = require("./utils/color-parser");
-var utils_1 = require("../common/utils");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
-var palette_presets_1 = require("./utils/palette-presets");
+var package_metadata_1 = require("../package-metadata");
+var models_1 = require("./models");
+var events_1 = require("./events");
+var utils_1 = require("./utils");
+var utils_2 = require("../common/utils");
 var colorpicker_localization_service_1 = require("./localization/colorpicker-localization.service");
-var color_gradient_component_1 = require("./color-gradient.component");
-var DEFAULT_PRESET = 'office';
-var DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+var constants_1 = require("./constants");
 var serial = 0;
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
- * Designed to replace the `<input type="color">` HTML5 tag which is not widely supported in browsers.
+ *
+ * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
+ * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 var ColorPickerComponent = /** @class */ (function () {
     function ColorPickerComponent(popupService, cdr, localizationService, ngZone) {
@@ -32,39 +33,66 @@ var ColorPickerComponent = /** @class */ (function () {
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
-        /**
-         * @hidden
-         */
         this.hostClasses = true;
         /**
          * @hidden
          */
         this.focusableId = "k-colorpicker-" + serial++;
         /**
-         * Sets what view the ColorPicker will render in the popup.
+         * Specifies the views that will be rendered in the popup.
+         * By default both the gradient and palette views will be rendered.
          */
-        this.view = 'gradient';
+        this.views = ['gradient', 'palette'];
         /**
          * Sets the read-only state of the ColorPicker.
+         *
+         * @default false
          */
         this.readonly = false;
         /**
          * Sets the disabled state of the ColorPicker.
+         *
+         * @default false
          */
         this.disabled = false;
         /**
          * Specifies the output format of the ColorPicker.
-         * The input value may be in a different format. However, it will be parsed into the output `format`
-         * after the component processes it.
          *
-         * If the `gradient` view is used with the `opacity` option set to true, this setting will be ignored and `rgba` will be used instead.
+         * If the input value is in a different format, it will be parsed into the specified output `format`.
          *
          * The supported values are:
          * * `rgba` (default)
          * * `hex`
-         * * [name](https://www.w3.org/wiki/CSS/Properties/color/keywords)
          */
         this.format = 'rgba';
+        /**
+         * Specifies whether the ColorPicker should display a 'Clear color' button.
+         *
+         * @default true
+         */
+        this.clearButton = true;
+        /**
+         * Displays `Apply` and `Cancel` action buttons and color preview panes.
+         *
+         * When enabled, the component value will not change immediately upon
+         * color selection, but only after the `Apply` button is clicked.
+         *
+         * The `Cancel` button reverts the current selection to its
+         * previous state i.e. to the current value.
+         *
+         * @default false
+         */
+        this.preview = false;
+        /**
+         * Configures the layout of the `Apply` and `Cancel` action buttons.
+         *
+         * The possible values are:
+         * * `start`
+         * * `center`
+         * * `end` (default)
+         * * `stretch`
+         */
+        this.actionsLayout = 'end';
         /**
          * Fires each time the value is changed.
          */
@@ -87,6 +115,12 @@ var ColorPickerComponent = /** @class */ (function () {
          * Fires each time the ColorPicker is blurred.
          */
         this.onBlur = new core_1.EventEmitter();
+        /**
+         * Fires when the user cancels the current color selection.
+         *
+         * Fires on preview pane or 'Cancel' button click.
+         */
+        this.cancel = new core_1.EventEmitter();
         /**
          * Fires each time the left side of the ColorPicker wrapper is clicked.
          * The event is triggered regardless of whether a ColorPicker icon is set or not.
@@ -94,10 +128,15 @@ var ColorPickerComponent = /** @class */ (function () {
          * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
          */
         this.activeColorClick = new core_1.EventEmitter();
+        /**
+         * Fires each time the view is about to change.
+         * Used to provide a two-way binding for the `activeView` property.
+         */
+        this.activeViewChange = new core_1.EventEmitter();
         this._tabindex = 0;
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
-        this._gradientSettings = { opacity: true, clearButton: false, delay: 0 };
+        this._gradientSettings = { opacity: true, delay: 0 };
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
@@ -115,7 +154,7 @@ var ColorPickerComponent = /** @class */ (function () {
          * Specifies the value of the initially selected color.
          */
         set: function (value) {
-            this._value = color_parser_1.parseColor(value, this.format);
+            this._value = utils_1.parseColor(value, this.format, this.gradientSettings.opacity);
         },
         enumerable: true,
         configurable: true
@@ -165,6 +204,8 @@ var ColorPickerComponent = /** @class */ (function () {
         },
         /**
          * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         *
+         * @default 0
          */
         set: function (value) {
             var tabindex = Number(value);
@@ -179,7 +220,7 @@ var ColorPickerComponent = /** @class */ (function () {
          * Indicates whether the ColorPicker popup is open.
          */
         get: function () {
-            return utils_1.isPresent(this.popupRef);
+            return utils_2.isPresent(this.popupRef);
         },
         enumerable: true,
         configurable: true
@@ -200,10 +241,10 @@ var ColorPickerComponent = /** @class */ (function () {
         configurable: true
     });
     ColorPickerComponent.prototype.ngOnInit = function () {
-        var defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        var defaultPreset = (this.format !== 'name') ? constants_1.DEFAULT_PRESET : constants_1.DEFAULT_ACCESSIBLE_PRESET;
         var settingsPalette = this._paletteSettings.palette;
-        var presetColumns = typeof settingsPalette === 'string' && palette_presets_1.PALETTEPRESETS[settingsPalette] ?
-            palette_presets_1.PALETTEPRESETS[settingsPalette].columns :
+        var presetColumns = typeof settingsPalette === 'string' && models_1.PALETTEPRESETS[settingsPalette] ?
+            models_1.PALETTEPRESETS[settingsPalette].columns :
             undefined;
         this._paletteSettings = {
             palette: settingsPalette || defaultPreset,
@@ -213,11 +254,11 @@ var ColorPickerComponent = /** @class */ (function () {
     };
     ColorPickerComponent.prototype.ngOnChanges = function (changes) {
         if (changes.format && changes.format.currentValue === 'name') {
-            this.view = 'palette';
+            this.activeView = 'palette';
         }
-        if (this.view === 'gradient' && this.gradientSettings.opacity) {
+        if (this.activeView === 'gradient' && this.gradientSettings.opacity) {
             this.format = 'rgba';
-            this.value = color_parser_1.parseColor(this.value, this.format);
+            this.value = utils_1.parseColor(this.value, this.format, this.gradientSettings.opacity);
         }
     };
     ColorPickerComponent.prototype.ngOnDestroy = function () {
@@ -226,10 +267,26 @@ var ColorPickerComponent = /** @class */ (function () {
             this.dynamicRTLSubscription.unsubscribe();
         }
     };
+    Object.defineProperty(ColorPickerComponent.prototype, "colorPickerAriaLabel", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.handleCancelEvent = function (ev) {
+        this.cancel.emit(ev);
+    };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleWrapperClick = function () {
+    ColorPickerComponent.prototype.togglePopup = function () {
         this.toggleWithEvents(!this.isOpen);
         this.focus();
     };
@@ -238,10 +295,10 @@ var ColorPickerComponent = /** @class */ (function () {
      */
     ColorPickerComponent.prototype.handleActiveColorClick = function () {
         this.focus();
-        var event = new models_1.ActiveColorClickEvent(this.value);
+        var event = new events_1.ActiveColorClickEvent(this.value);
         this.activeColorClick.emit(event);
         if (!event.isOpenPrevented() || this.isOpen) {
-            this.handleWrapperClick();
+            this.togglePopup();
         }
     };
     /**
@@ -257,9 +314,6 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperFocus = function () {
-        if (utils_1.isPresent(this.palette)) {
-            this.palette.nativeElement.focus();
-        }
         if (this.isFocused) {
             return;
         }
@@ -284,10 +338,10 @@ var ColorPickerComponent = /** @class */ (function () {
         this.notifyNgTouched();
     };
     /**
-     * Clears the color value of the ColorPicker.
+     * Clears the value of the ColorPicker.
      */
     ColorPickerComponent.prototype.reset = function () {
-        if (!utils_1.isPresent(this.value)) {
+        if (!utils_2.isPresent(this.value)) {
             return;
         }
         this._value = undefined;
@@ -304,7 +358,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return;
         }
         this.closePopup();
-        open = utils_1.isPresent(open) ? open : !this.isOpen;
+        open = utils_2.isPresent(open) ? open : !this.isOpen;
         if (open) {
             this.openPopup();
         }
@@ -312,13 +366,9 @@ var ColorPickerComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleValueChange = function (color, closePopup) {
-        var parsedColor = color_parser_1.parseColor(color, this.format);
+    ColorPickerComponent.prototype.handleValueChange = function (color) {
+        var parsedColor = utils_1.parseColor(color, this.format, this.gradientSettings.opacity);
         var valueChange = parsedColor !== this.value;
-        if (closePopup) {
-            this.toggleWithEvents(false);
-            this.focus();
-        }
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
@@ -329,9 +379,7 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handlePopupBlur = function (event) {
-        var focusInPopupElement = this.popupRef.popupElement.contains(event.relatedTarget);
-        var wrapperClicked = event.relatedTarget === this.wrapper.nativeElement;
-        if (!this.isFocused || wrapperClicked || focusInPopupElement) {
+        if (this.popupBlurInvalid(event)) {
             return;
         }
         this.isFocused = false;
@@ -382,53 +430,57 @@ var ColorPickerComponent = /** @class */ (function () {
             this.wrapper.nativeElement.focus();
         }
         if (event.keyCode === kendo_angular_common_1.Keys.Tab) {
-            var firstElement = this.colorGradient ? this.colorGradient.gradientDragHandle.nativeElement : this.palette.nativeElement;
-            var lastElement = this.palette ? this.palette.nativeElement :
-                this.colorGradient.inputs.opacityInput.nativeElement.childNodes[1].children[0];
-            if (event.shiftKey) {
-                if (event.target === firstElement) {
-                    event.preventDefault();
-                    lastElement.focus();
-                    return;
-                }
-            }
-            else {
-                if (event.target === lastElement) {
-                    event.preventDefault();
-                    firstElement.focus();
-                    return;
-                }
+            var currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
+            var nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
+            if (event.target === currentElement) {
+                event.preventDefault();
+                nextElement.nativeElement.focus();
             }
         }
     };
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     ColorPickerComponent.prototype.isEmpty = function () {
         return false;
     };
+    ColorPickerComponent.prototype.popupBlurInvalid = function (ev) {
+        var focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        var wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
+        return !this.isFocused || wrapperClicked || focusInPopupElement;
+    };
     ColorPickerComponent.prototype.toggleWithEvents = function (open) {
-        var _this = this;
         var sameState = this.isOpen === open;
         if (this.disabled || this.readonly || sameState) {
             return;
         }
-        var eventArgs = new models_1.PreventableEvent();
-        open ? this.open.emit(eventArgs) : this.close.emit(eventArgs);
+        var eventArgs;
+        if (open) {
+            eventArgs = new events_1.ColorPickerOpenEvent();
+            this.open.emit(eventArgs);
+        }
+        else {
+            eventArgs = new events_1.ColorPickerCloseEvent();
+            this.close.emit(eventArgs);
+        }
         if (!eventArgs.isDefaultPrevented()) {
             this.toggle(open);
         }
         if (open) {
-            this.ngZone.runOutsideAngular(function () {
-                setTimeout(function () {
-                    if (_this.colorGradient) {
-                        _this.colorGradient.gradientDragHandle.nativeElement.focus();
-                    }
-                });
-            });
+            this.focusFirstElement();
         }
     };
+    ColorPickerComponent.prototype.focusFirstElement = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            setTimeout(function () {
+                var elementToFocus = _this.flatColorPicker.gradient ? _this.flatColorPicker.gradient.gradientDragHandle :
+                    _this.flatColorPicker.palette.host;
+                elementToFocus.nativeElement.focus();
+            });
+        });
+    };
     ColorPickerComponent.prototype.openPopup = function () {
         var _this = this;
         var horizontalAlign = this.direction === "rtl" ? "right" : "left";
@@ -459,11 +511,32 @@ var ColorPickerComponent = /** @class */ (function () {
         }
         this.popupRef.close();
         this.popupRef = null;
-        this.palette = null;
     };
+    Object.defineProperty(ColorPickerComponent.prototype, "firstFocusableElement", {
+        get: function () {
+            if (!this.flatColorPicker.header || (this.views.length <= 1 && !this.flatColorPicker.clearButton)) {
+                return this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle : this.flatColorPicker.palette.host;
+            }
+            return this.views.length > 1 ? this.flatColorPicker.header.viewButtonsCollection.toArray()[0] : this.flatColorPicker.header.clearButtonElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "lastFocusableElement", {
+        get: function () {
+            if (this.preview) {
+                return this.flatColorPicker.footer.lastButton;
+            }
+            if (this.flatColorPicker.palette) {
+                return this.flatColorPicker.palette.host;
+            }
+            return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
+        },
+        enumerable: true,
+        configurable: true
+    });
     var ColorPickerComponent_1;
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
         core_1.HostBinding('class.k-colorpicker'),
         tslib_1.__metadata("design:type", Boolean)
     ], ColorPickerComponent.prototype, "hostClasses", void 0);
@@ -475,10 +548,14 @@ var ColorPickerComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerComponent.prototype, "focusableId", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], ColorPickerComponent.prototype, "views", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "view", void 0);
+    ], ColorPickerComponent.prototype, "activeView", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -519,11 +596,23 @@ var ColorPickerComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Object)
     ], ColorPickerComponent.prototype, "iconClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColorPickerComponent.prototype, "clearButton", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Number),
         tslib_1.__metadata("design:paramtypes", [Number])
     ], ColorPickerComponent.prototype, "tabindex", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColorPickerComponent.prototype, "preview", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerComponent.prototype, "actionsLayout", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -544,10 +633,18 @@ var ColorPickerComponent = /** @class */ (function () {
         core_1.Output('blur'),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], ColorPickerComponent.prototype, "onBlur", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], ColorPickerComponent.prototype, "cancel", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], ColorPickerComponent.prototype, "activeColorClick", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], ColorPickerComponent.prototype, "activeViewChange", void 0);
     tslib_1.__decorate([
         core_1.ViewChild('container', { read: core_1.ViewContainerRef, static: true }),
         tslib_1.__metadata("design:type", core_1.ViewContainerRef)
@@ -561,15 +658,12 @@ var ColorPickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.TemplateRef)
     ], ColorPickerComponent.prototype, "popupTemplate", void 0);
     tslib_1.__decorate([
-        core_1.ViewChild('palette', { read: core_1.ElementRef, static: false }),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], ColorPickerComponent.prototype, "palette", void 0);
-    tslib_1.__decorate([
-        core_1.ViewChild('colorGradient', { static: false }),
-        tslib_1.__metadata("design:type", color_gradient_component_1.ColorGradientComponent)
-    ], ColorPickerComponent.prototype, "colorGradient", void 0);
+        core_1.ViewChild('flatColorPicker', { static: false }),
+        tslib_1.__metadata("design:type", flatcolorpicker_component_1.FlatColorPickerComponent)
+    ], ColorPickerComponent.prototype, "flatColorPicker", void 0);
     ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
         core_1.Component({
+            exportAs: 'kendoColorPicker',
             selector: 'kendo-colorpicker',
             providers: [{
                     multi: true,
@@ -589,7 +683,7 @@ var ColorPickerComponent = /** @class */ (function () {
                     useValue: 'kendo.colorpicker'
                 }
             ],
-            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorGradient=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradient=\"kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-hexInputPlaceholder=\"kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input.\"\n            hexInputPlaceholder=\"HEX Color\"\n            i18n-redInputPlaceholder=\"kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input.\"\n            redInputPlaceholder=\"Red\"\n            i18n-greenInputPlaceholder=\"kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input.\"\n            greenInputPlaceholder=\"Green\"\n            i18n-blueInputPlaceholder=\"kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input.\"\n            blueInputPlaceholder=\"Blue\"\n            i18n-alphaInputPlaceholder=\"kendo.colorpicker.alphaInputPlaceholder|The placeholder for the alpha input.\"\n            alphaInputPlaceholder=\"Alpha\">\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-picker-wrap': true,\n                'k-state-disabled': this.disabled,\n                'k-state-focused': this.isFocused\n            }\"\n            role=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-label]=\"value\"\n            [id]=\"focusableId\"\n            [attr.tabindex]=\"tabindex\"\n            (focus)=\"handleWrapperFocus()\"\n            (blur)=\"handleWrapperBlur()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown)=\"handleWrapperKeyDown($event)\"\n        >\n            <span *ngIf=\"!iconStyles\" class=\"k-selected-color\" [style.background-color]=\"value\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-icon k-i-line\" *ngIf=\"!value\"></span>\n            </span>\n            <span *ngIf=\"iconStyles\" class=\"k-tool-icon\" [ngClass]=\"iconStyles\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-selected-color\" [style.background-color]=\"value\"></span>\n            </span>\n            <span class=\"k-select\" (click)=\"handleWrapperClick()\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <kendo-colorgradient  #colorGradient\n                *ngIf=\"view === 'gradient' || view === 'combo'\"\n                [value]=\"value\"\n                [format]=\"format\"\n                [opacity]=\"gradientSettings.opacity\"\n                [clearButton]=\"gradientSettings.clearButton\"\n                [delay]=\"gradientSettings.delay\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (valueChange)=\"handleValueChange($event, false)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n            >\n            </kendo-colorgradient>\n            <kendo-colorpalette\n                #palette\n                *ngIf=\"view === 'palette' || view === 'combo'\"\n                kendoFocusOnDomReady\n                [palette]=\"paletteSettings.palette\"\n                [columns]=\"paletteSettings.columns\"\n                [tileSize]=\"paletteSettings.tileSize\"\n                [format]=\"format\"\n                [value]=\"value\"\n                (blur)=\"handlePopupBlur($event)\"\n                (cellSelection)=\"handleValueChange($event, true)\"\n                (mousedown)=\"$event.preventDefault()\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n            >\n            </kendo-colorpalette>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorPickerNoColor=\"kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty.\"\n            colorPickerNoColor=\"Colorpicker no color chosen\"\n            i18n-flatColorPickerNoColor=\"kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.colorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.colorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.colorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.colorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.colorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.colorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.colorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-picker-wrap': true,\n                'k-state-disabled': this.disabled,\n                'k-state-focused': this.isFocused\n            }\"\n            role=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-label]=\"colorPickerAriaLabel\"\n            [id]=\"focusableId\"\n            [attr.tabindex]=\"tabindex\"\n            (focus)=\"handleWrapperFocus()\"\n            (blur)=\"handleWrapperBlur()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown)=\"handleWrapperKeyDown($event)\"\n        >\n            <span *ngIf=\"!iconStyles\" class=\"k-selected-color\" [style.background]=\"value\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-icon k-i-line\" *ngIf=\"!value\"></span>\n            </span>\n            <span *ngIf=\"iconStyles\" class=\"k-tool-icon\" [ngClass]=\"iconStyles\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-selected-color\" [style.background-color]=\"value\"></span>\n            </span>\n            <span class=\"k-select\" (click)=\"togglePopup()\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_popup_1.PopupService,
             core_1.ChangeDetectorRef,

package/dist/npm/colorpicker/constants.js

@@ -24,3 +24,15 @@ exports.AAA_RATIO = 7.0;
  * @hidden
  */
 exports.AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+exports.DEFAULT_PRESET = 'office';
+/**
+ * @hidden
+ */
+exports.DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+/**
+ * @hidden
+ */
+exports.STEP_COUNT = 16;

package/dist/npm/colorpicker/contrast-validation.component.js

@@ -5,6 +5,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var constants_1 = require("./constants");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var core_1 = require("@angular/core");
 /**
@@ -30,7 +31,8 @@ var ContrastValidationComponent = /** @class */ (function () {
     });
     Object.defineProperty(ContrastValidationComponent.prototype, "contrastText", {
         get: function () {
-            return this.type + ": " + this.ratio.toFixed(1);
+            var ratio = this.type === 'AA' ? constants_1.AA_RATIO : constants_1.AAA_RATIO;
+            return this.type + ": " + ratio.toFixed(1);
         },
         enumerable: true,
         configurable: true
@@ -39,18 +41,18 @@ var ContrastValidationComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], ContrastValidationComponent.prototype, "type", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], ContrastValidationComponent.prototype, "ratio", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ContrastValidationComponent.prototype, "pass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ContrastValidationComponent.prototype, "value", void 0);
     ContrastValidationComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoContrastValidation]',
-            template: "\n        <span>{{contrastText}}</span>\n                <span class=\"k-contrast-validation k-text-success\" *ngIf=\"pass\">\n                    {{passMessage}}\n                    <span class=\"k-icon k-i-check\"></span>\n                </span>\n                <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!pass\">\n                    {{failMessage}}\n                <span class=\"k-icon k-i-close\"></span>\n        </span>\n    "
+            template: "\n        <span>{{contrastText}}</span>\n        <ng-container *ngIf=\"value\">\n            <span class=\"k-contrast-validation k-text-success\" *ngIf=\"pass\">\n                {{passMessage}}\n                <span class=\"k-icon k-i-check\"></span>\n            </span>\n            <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!pass\">\n                {{failMessage}}\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
     ], ContrastValidationComponent);

package/dist/npm/colorpicker/contrast.component.js

@@ -5,8 +5,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var core_1 = require("@angular/core");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var utils_1 = require("./utils");
 var constants_1 = require("./constants");
 /**
@@ -15,8 +15,6 @@ var constants_1 = require("./constants");
 var ContrastComponent = /** @class */ (function () {
     function ContrastComponent(localization) {
         this.localization = localization;
-        this.aaRatio = constants_1.AA_RATIO;
-        this.aaaRatio = constants_1.AAA_RATIO;
     }
     Object.defineProperty(ContrastComponent.prototype, "formatedRatio", {
         get: function () {
@@ -25,23 +23,23 @@ var ContrastComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ContrastComponent.prototype, "contrastRatioMessage", {
+    Object.defineProperty(ContrastComponent.prototype, "contrastRatioText", {
         get: function () {
-            return this.localization.get('contrastRatio');
+            return this.localization.get('contrastRatio') + ": " + (this.value ? this.formatedRatio : 'n/a');
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(ContrastComponent.prototype, "satisfiesAACondition", {
         get: function () {
-            return this.contrastRatio >= this.aaRatio;
+            return this.contrastRatio >= constants_1.AA_RATIO;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(ContrastComponent.prototype, "satisfiesAAACondition", {
         get: function () {
-            return this.contrastRatio >= this.aaaRatio;
+            return this.contrastRatio >= constants_1.AAA_RATIO;
         },
         enumerable: true,
         configurable: true
@@ -65,7 +63,7 @@ var ContrastComponent = /** @class */ (function () {
     ContrastComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoContrastTool]',
-            template: "\n        <div class=\"k-contrast-ratio\">\n            <span class=\"k-contrast-ratio-text\">{{contrastRatioMessage}}: {{formatedRatio}}</span>\n            <span class=\"k-contrast-validation k-text-success\" *ngIf=\"satisfiesAACondition\">\n                <span class=\"k-icon k-i-check\"></span>\n                <span class=\"k-icon k-i-check\" *ngIf=\"satisfiesAAACondition\"></span>\n            </span>\n            <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!satisfiesAACondition\">\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n        </div>\n        <div kendoContrastValidation\n            type=\"AA\"\n            [ratio]=\"aaaRatio\"\n            [pass]=\"satisfiesAACondition\">\n        </div>\n        <div kendoContrastValidation\n            type=\"AAA\"\n            [ratio]=\"aaaRatio\"\n            [pass]=\"satisfiesAAACondition\">\n        </div>\n    "
+            template: "\n        <div class=\"k-contrast-ratio\">\n            <span class=\"k-contrast-ratio-text\">{{contrastRatioText}}</span>\n            <ng-container *ngIf=\"value\">\n                <span class=\"k-contrast-validation k-text-success\" *ngIf=\"satisfiesAACondition\">\n                    <span class=\"k-icon k-i-check\"></span>\n                    <span class=\"k-icon k-i-check\" *ngIf=\"satisfiesAAACondition\"></span>\n                </span>\n                <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!satisfiesAACondition\">\n                    <span class=\"k-icon k-i-close\"></span>\n                </span>\n            </ng-container>\n        </div>\n        <div kendoContrastValidation\n            type=\"AA\"\n            [value]=\"value\"\n            [pass]=\"satisfiesAACondition\">\n        </div>\n        <div kendoContrastValidation\n            type=\"AAA\"\n            [value]=\"value\"\n            [pass]=\"satisfiesAAACondition\">\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
     ], ContrastComponent);