@progress/kendo-angular-inputs 7.4.0-dev.202109021544 → 7.5.0-dev.202110261427

package/dist/npm/colorpicker/color-gradient.component.js

@@ -12,15 +12,13 @@ var utils_2 = require("../common/utils");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var dom_utils_1 = require("../common/dom-utils");
 var slider_component_1 = require("../slider/slider.component");
-var DEFAULT_OUTPUT_FORMAT = 'rgba';
-var DEFAULT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var rxjs_1 = require("rxjs");
 var colorgradient_localization_service_1 = require("./localization/colorgradient-localization.service");
 var color_input_component_1 = require("./color-input.component");
 var operators_1 = require("rxjs/operators");
+var constants_1 = require("./constants");
 var serial = 0;
-var DRAGHANDLE_MOVE_SPEED = 5;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
  * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
@@ -70,7 +68,7 @@ var ColorGradientComponent = /** @class */ (function () {
         /**
          * @hidden
          */
-        this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
+        this.backgroundColor = constants_1.DEFAULT_GRADIENT_BACKGROUND_COLOR;
         /**
          * @hidden
          *
@@ -88,7 +86,7 @@ var ColorGradientComponent = /** @class */ (function () {
          * * (Default) `rgba`
          * * `hex`
          */
-        this.format = DEFAULT_OUTPUT_FORMAT;
+        this.format = constants_1.DEFAULT_OUTPUT_FORMAT;
         this._tabindex = 0;
         this.listeners = [];
         this.updateValues = new rxjs_1.Subject();
@@ -202,6 +200,16 @@ var ColorGradientComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ColorGradientComponent.prototype, "contrastToolVisible", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return typeof this.contrastTool === 'string' && this.contrastTool !== '';
+        },
+        enumerable: true,
+        configurable: true
+    });
     ColorGradientComponent.prototype.ngAfterViewInit = function () {
         this.updateUI();
         this.cdr.detectChanges();
@@ -287,16 +295,16 @@ var ColorGradientComponent = /** @class */ (function () {
             var keyboardMoveY = 0;
             switch (args.key) {
                 case 'ArrowRight':
-                    keyboardMoveX = DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveX = constants_1.DRAGHANDLE_MOVE_SPEED;
                     break;
                 case 'ArrowLeft':
-                    keyboardMoveX = -DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveX = -constants_1.DRAGHANDLE_MOVE_SPEED;
                     break;
                 case 'ArrowUp':
-                    keyboardMoveY = -DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveY = -constants_1.DRAGHANDLE_MOVE_SPEED;
                     break;
                 case 'ArrowDown':
-                    keyboardMoveY = DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveY = constants_1.DRAGHANDLE_MOVE_SPEED;
                     break;
                 default: break;
             }
@@ -516,8 +524,7 @@ var ColorGradientComponent = /** @class */ (function () {
     };
     var ColorGradientComponent_1;
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
-        core_1.HostBinding('class.k-flatcolorpicker'),
+        core_1.HostBinding('class.k-colorgradient'),
         tslib_1.__metadata("design:type", Boolean)
     ], ColorGradientComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
@@ -573,6 +580,10 @@ var ColorGradientComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [String])
     ], ColorGradientComponent.prototype, "value", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorGradientComponent.prototype, "contrastTool", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Number),
@@ -625,7 +636,8 @@ var ColorGradientComponent = /** @class */ (function () {
                     useValue: 'kendo.colorgradient'
                 }
             ],
-            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-hexInputPlaceholder=\"kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input.\"\n            hexInputPlaceholder=\"HEX Color\"\n            i18n-redInputPlaceholder=\"kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input.\"\n            redInputPlaceholder=\"Red\"\n            i18n-greenInputPlaceholder=\"kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input.\"\n            greenInputPlaceholder=\"Green\"\n            i18n-blueInputPlaceholder=\"kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input.\"\n            blueInputPlaceholder=\"Blue\"\n            i18n-alphaInputPlaceholder=\"kendo.colorgradient.alphaInputPlaceholder|The placeholder for the alpha input.\"\n            alphaInputPlaceholder=\"Alpha\">\n        </ng-container>\n        <div class=\"k-hbox k-hsv-wrap\">\n            <div class=\"k-hsv-rectangle\" [style.background-color]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-hbox k-sliders-wrap {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-bare k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    class=\"k-hue-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [(value)]=\"hsva.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity && format === 'rgba'\"\n                    #alphaSlider\n                    class=\"k-alpha-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n"
+            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-hexInputPlaceholder=\"kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input.\"\n            hexInputPlaceholder=\"HEX Color\"\n            i18n-redInputPlaceholder=\"kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input.\"\n            redInputPlaceholder=\"Red\"\n            i18n-greenInputPlaceholder=\"kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input.\"\n            greenInputPlaceholder=\"Green\"\n            i18n-blueInputPlaceholder=\"kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input.\"\n            blueInputPlaceholder=\"Blue\"\n            i18n-alphaInputPlaceholder=\"kendo.colorgradient.alphaInputPlaceholder|The placeholder for the alpha input.\"\n            alphaInputPlaceholder=\"Alpha\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-flat k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [(value)]=\"hsva.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity && format === 'rgba'\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
+            styles: ["\n        .k-clear-color {\n            position: absolute;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-align-self-end {\n            height: 140px;\n        }\n    "]
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
             core_1.NgZone,

package/dist/npm/colorpicker/color-input.component.js

@@ -10,13 +10,15 @@ var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var rxjs_1 = require("rxjs");
 /**
  * @hidden
  */
 var ColorInputComponent = /** @class */ (function () {
-    function ColorInputComponent(localization, host) {
+    function ColorInputComponent(localization, host, renderer) {
         this.localization = localization;
         this.host = host;
+        this.renderer = renderer;
         /**
          * Sets whether the alpha slider will be shown.
          */
@@ -38,6 +40,7 @@ var ColorInputComponent = /** @class */ (function () {
          * The rgba inputs values.
          */
         this.rgba = {};
+        this.subscriptions = new rxjs_1.Subscription();
     }
     Object.defineProperty(ColorInputComponent.prototype, "isFocused", {
         /**
@@ -64,6 +67,14 @@ var ColorInputComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ColorInputComponent.prototype.ngAfterViewInit = function () {
+        this.initDomEvents();
+    };
+    ColorInputComponent.prototype.ngOnDestroy = function () {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    };
     ColorInputComponent.prototype.ngOnChanges = function (changes) {
         if (utils_2.isPresent(changes.value) && !this.isFocused) {
             this.hex = utils_1.parseColor(this.value, 'hex');
@@ -99,12 +110,23 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent.prototype.handleHexInputBlur = function () {
         this.hex = utils_1.parseColor(this.value, 'hex');
     };
-    /**
-     * @hidden
-     */
     ColorInputComponent.prototype.textFor = function (key) {
         return this.localization.get(key);
     };
+    ColorInputComponent.prototype.toggleFormatView = function () {
+        this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
+    };
+    ColorInputComponent.prototype.initDomEvents = function () {
+        var _this = this;
+        if (!this.host) {
+            return;
+        }
+        this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', function () { return _this.toggleFormatView(); }));
+    };
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorInputComponent.prototype, "formatView", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -126,20 +148,26 @@ var ColorInputComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], ColorInputComponent.prototype, "valueChange", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-colorinputs'),
+        core_1.HostBinding('class.k-colorgradient-inputs'),
+        core_1.HostBinding('class.k-hstack'),
         tslib_1.__metadata("design:type", Boolean)
     ], ColorInputComponent.prototype, "colorInputClass", void 0);
     tslib_1.__decorate([
         core_1.ViewChild('opacityInput', { read: core_1.ElementRef, static: false }),
         tslib_1.__metadata("design:type", core_1.ElementRef)
     ], ColorInputComponent.prototype, "opacityInput", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('toggleFormatButton', { static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ColorInputComponent.prototype, "toggleFormatButton", void 0);
     ColorInputComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-colorinput',
-            template: "\n        <div class=\"k-hbox k-gradient-values\">\n            <input\n                #hexInput\n                class=\"k-textbox k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                [placeholder]=\"textFor('hexInputPlaceholder')\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <kendo-numerictextbox\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [min]=\"0\"\n                [max]=\"255\"\n                [placeholder]=\"textFor('redInputPlaceholder')\"\n                [(value)]=\"rgba.r\"\n                [autoCorrect]=\"true\"\n                [spinners]=\"false\"\n                [format]=\"'n'\"\n                [decimals]=\"0\"\n                (blur)=\"handleRgbaInputBlur()\"\n                (valueChange)=\"handleRgbaValueChange()\"\n            >\n            </kendo-numerictextbox>\n            <kendo-numerictextbox\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [min]=\"0\"\n                [max]=\"255\"\n                [placeholder]=\"textFor('greenInputPlaceholder')\"\n                [(value)]=\"rgba.g\"\n                [autoCorrect]=\"true\"\n                [spinners]=\"false\"\n                [format]=\"'n'\"\n                [decimals]=\"0\"\n                (blur)=\"handleRgbaInputBlur()\"\n                (valueChange)=\"handleRgbaValueChange()\"\n            >\n            </kendo-numerictextbox>\n            <kendo-numerictextbox\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [min]=\"0\"\n                [max]=\"255\"\n                [placeholder]=\"textFor('blueInputPlaceholder')\"\n                [(value)]=\"rgba.b\"\n                [autoCorrect]=\"true\"\n                [spinners]=\"false\"\n                [format]=\"'n'\"\n                [decimals]=\"0\"\n                (blur)=\"handleRgbaInputBlur()\"\n                (valueChange)=\"handleRgbaValueChange()\"\n            >\n            </kendo-numerictextbox>\n            <kendo-numerictextbox  #opacityInput\n                *ngIf=\"opacity\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [min]=\"0\"\n                [max]=\"1\"\n                [placeholder]=\"textFor('alphaInputPlaceholder')\"\n                [(value)]=\"rgba.a\"\n                [autoCorrect]=\"true\"\n                [spinners]=\"false\"\n                [step]=\"0.01\"\n                [format]=\"'n2'\"\n                [decimals]=\"2\"\n                (blur)=\"handleRgbaInputBlur()\"\n                (valueChange)=\"handleRgbaValueChange()\"\n            >\n            </kendo-numerictextbox>\n        </div>\n        <div class=\"k-hbox k-gradient-values\">\n            <div class=\"k-hex-value\">hex</div>\n            <div>r</div>\n            <div>g</div>\n            <div>b</div>\n            <div *ngIf=\"opacity\">a</div>\n        </div>\n    "
+            template: "\n        <div class=\"k-vstack\">\n            <button class=\"k-colorgradient-toggle-mode k-button k-icon-button k-flat\" #toggleFormatButton>\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <input *ngIf=\"formatView === 'hex'\"\n            #hexInput\n            class=\"k-textbox k-hex-value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [value]=\"hex || ''\"\n            [placeholder]=\"textFor('hexInputPlaceholder')\"\n            (blur)=\"handleHexInputBlur()\"\n            (input)=\"handleHexValueChange(hexInput.value)\"\n        />\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [placeholder]=\"textFor('redInputPlaceholder')\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [placeholder]=\"textFor('greenInputPlaceholder')\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [placeholder]=\"textFor('blueInputPlaceholder')\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [placeholder]=\"textFor('alphaInputPlaceholder')\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
-            core_1.ElementRef])
+            core_1.ElementRef,
+            core_1.Renderer2])
     ], ColorInputComponent);
     return ColorInputComponent;
 }());

package/dist/npm/colorpicker/color-palette.component.js

@@ -270,15 +270,18 @@ var ColorPaletteComponent = /** @class */ (function () {
      */
     ColorPaletteComponent.prototype.handleHostBlur = function () {
         this.notifyNgTouched();
+        this.handleCellFocusOnBlur();
     };
     /**
      * @hidden
      */
-    ColorPaletteComponent.prototype.handleCellSelection = function (value, focusedCell) {
+    ColorPaletteComponent.prototype.handleCellSelection = function (value, cell) {
         if (this.readonly) {
             return;
         }
-        this.focusedCell = focusedCell;
+        this.selectedCell = cell;
+        this.focusedCell = this.selectedCell;
+        this.focusInComponent = true;
         var parsedColor = utils_1.parseColor(value, this.format, false);
         this.cellSelection.emit(parsedColor);
         if (this.value !== parsedColor) {
@@ -291,8 +294,8 @@ var ColorPaletteComponent = /** @class */ (function () {
             this.selection = parsedColor;
             this.selectionChange.emit(parsedColor);
         }
-        if (focusedCell) {
-            this.activeCellId = "" + this.focusedCell.row + this.focusedCell.col;
+        if (cell) {
+            this.activeCellId = this.selectedCell.row + "-" + this.selectedCell.col;
         }
     };
     /**
@@ -338,6 +341,10 @@ var ColorPaletteComponent = /** @class */ (function () {
             this.notifyNgChanged(undefined);
         }
     };
+    ColorPaletteComponent.prototype.handleCellFocusOnBlur = function () {
+        this.focusInComponent = false;
+        this.focusedCell = this.selectedCell;
+    };
     ColorPaletteComponent.prototype.setRows = function () {
         if (!utils_2.isPresent(this.palette)) {
             return;
@@ -350,11 +357,7 @@ var ColorPaletteComponent = /** @class */ (function () {
             return;
         }
         this.focusedCell = this.service.getNextCell(this.focusedCell, horizontalStep, verticalStep);
-        var selection = this.service.getColorAt(this.focusedCell);
-        if (this.selection !== selection) {
-            this.selection = selection;
-            this.selectionChange.emit(selection);
-        }
+        this.focusInComponent = true;
     };
     ColorPaletteComponent.prototype.setHostElementAriaLabel = function () {
         var parsed = utils_1.parseColor(this.value, this.format);
@@ -435,7 +438,6 @@ var ColorPaletteComponent = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [])
     ], ColorPaletteComponent.prototype, "hostTabindex", null);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
         core_1.HostBinding('class.k-colorpalette'),
         tslib_1.__metadata("design:type", Boolean)
     ], ColorPaletteComponent.prototype, "hostClasses", void 0);
@@ -485,7 +487,7 @@ var ColorPaletteComponent = /** @class */ (function () {
                     useValue: 'kendo.colorpalette'
                 }
             ],
-            template: "\n        <ng-container kendoColorPaletteLocalizedMessages\n            i18n-colorPaletteNoColor=\"kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\">\n        </ng-container>\n        <div role=\"listbox\"\n            [attr.aria-activedescendant]=\"activeCellId\">\n            <table class=\"k-palette k-reset\">\n                <tbody>\n                    <tr *ngFor=\"let row of colorRows; let rowIndex = index\">\n                        <td *ngFor=\"let color of row; let colIndex = index\"\n                            role=\"option\"\n                            [class.k-state-selected]=\"focusedCell?.row === rowIndex && focusedCell?.col === colIndex\"\n                            [attr.aria-selected]=\"focusedCell?.row === rowIndex && focusedCell?.col === colIndex\"\n                            [attr.aria-label]=\"color\"\n                            class=\"k-item\"\n                            [id]=\"rowIndex + '' + colIndex\"\n                            [attr.value]=\"color\"\n                            (click)=\"handleCellSelection(color, { row: rowIndex, col: colIndex })\"\n                            [ngStyle]=\"{\n                                backgroundColor: color,\n                                width: tileLayout.width + 'px',\n                                height: tileLayout.height + 'px',\n                                minWidth: tileLayout.width + 'px'\n                            }\">\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    "
+            template: "\n        <ng-container kendoColorPaletteLocalizedMessages\n            i18n-colorPaletteNoColor=\"kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\">\n        </ng-container>\n        <div role=\"listbox\" class=\"k-colorpalette-table-wrap\"\n            [attr.aria-activedescendant]=\"activeCellId\">\n            <table class=\"k-colorpalette-table k-palette\">\n                <tbody>\n                    <tr *ngFor=\"let row of colorRows; let rowIndex = index\">\n                        <td *ngFor=\"let color of row; let colIndex = index\"\n                            role=\"option\"\n                            [class.k-state-selected]=\"selectedCell?.row === rowIndex && selectedCell?.col === colIndex\"\n                            [class.k-state-focus]=\"focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex\"\n                            [attr.aria-selected]=\"selectedCell?.row === rowIndex && selectedCell?.col === colIndex\"\n                            [attr.aria-label]=\"color\"\n                            class=\"k-colorpalette-tile\"\n                            [id]=\"rowIndex + '-' + colIndex\"\n                            [attr.value]=\"color\"\n                            (click)=\"handleCellSelection(color, { row: rowIndex, col: colIndex })\"\n                            [ngStyle]=\"{\n                                backgroundColor: color,\n                                width: tileLayout.width + 'px',\n                                height: tileLayout.height + 'px',\n                                minWidth: tileLayout.width + 'px'\n                            }\">\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
             color_palette_service_1.ColorPaletteService,

package/dist/npm/colorpicker/constants.js

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @hidden
+ */
+exports.DEFAULT_OUTPUT_FORMAT = 'rgba';
+/**
+ * @hidden
+ */
+exports.DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
+/**
+ * @hidden
+ */
+exports.DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+exports.AAA_RATIO = 7.0;
+/**
+ * @hidden
+ */
+exports.AA_RATIO = 4.5;

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

@@ -0,0 +1,59 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"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");
+/**
+ * @hidden
+ */
+var ContrastValidationComponent = /** @class */ (function () {
+    function ContrastValidationComponent(localization) {
+        this.localization = localization;
+    }
+    Object.defineProperty(ContrastValidationComponent.prototype, "passMessage", {
+        get: function () {
+            return this.localization.get('passContrast');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ContrastValidationComponent.prototype, "failMessage", {
+        get: function () {
+            return this.localization.get('failContrast');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ContrastValidationComponent.prototype, "contrastText", {
+        get: function () {
+            return this.type + ": " + this.ratio.toFixed(1);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    tslib_1.__decorate([
+        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);
+    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    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
+    ], ContrastValidationComponent);
+    return ContrastValidationComponent;
+}());
+exports.ContrastValidationComponent = ContrastValidationComponent;

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

@@ -0,0 +1,74 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"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 utils_1 = require("./utils");
+var constants_1 = require("./constants");
+/**
+ * @hidden
+ */
+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 () {
+            return this.contrastRatio.toFixed(2);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ContrastComponent.prototype, "contrastRatioMessage", {
+        get: function () {
+            return this.localization.get('contrastRatio');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ContrastComponent.prototype, "satisfiesAACondition", {
+        get: function () {
+            return this.contrastRatio >= this.aaRatio;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ContrastComponent.prototype, "satisfiesAAACondition", {
+        get: function () {
+            return this.contrastRatio >= this.aaaRatio;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ContrastComponent.prototype, "contrastRatio", {
+        get: function () {
+            var contrast = utils_1.getContrastFromTwoRGBAs(utils_1.getRGBA(this.value), utils_1.getRGBA(this.ratio));
+            return contrast;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ContrastComponent.prototype, "value", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ContrastComponent.prototype, "ratio", void 0);
+    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    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
+    ], ContrastComponent);
+    return ContrastComponent;
+}());
+exports.ContrastComponent = ContrastComponent;

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

@@ -59,6 +59,18 @@ var ColorPickerMessages = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerMessages.prototype, "alphaInputPlaceholder", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "passContrast", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "failContrast", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "contrastRatio", void 0);
     return ColorPickerMessages;
 }(kendo_angular_l10n_1.ComponentMessages));
 exports.ColorPickerMessages = ColorPickerMessages;

package/dist/npm/colorpicker/models/rgb.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -106,3 +106,55 @@ function nameFormat(value, safe) {
     return key;
 }
 exports.nameFormat = nameFormat;
+/**
+ * @hidden
+ *
+ * Returns the RGB object representation of the color based on the background color.
+ */
+exports.getRGBFromRGBA = function (foregroundColor, backgroundColor) {
+    var r1 = utils_1.fitIntoBounds(foregroundColor.r, 0, 255);
+    var g1 = utils_1.fitIntoBounds(foregroundColor.g, 0, 255);
+    var b1 = utils_1.fitIntoBounds(foregroundColor.b, 0, 255);
+    var a1 = utils_1.fitIntoBounds(foregroundColor.a, 0, 1);
+    var r2 = utils_1.fitIntoBounds(backgroundColor.r, 0, 255);
+    var g2 = utils_1.fitIntoBounds(backgroundColor.g, 0, 255);
+    var b2 = utils_1.fitIntoBounds(backgroundColor.b, 0, 255);
+    return {
+        r: Math.round(((1 - a1) * r2) + (a1 * r1)),
+        g: Math.round(((1 - a1) * g2) + (a1 * g1)),
+        b: Math.round(((1 - a1) * b2) + (a1 * b1))
+    };
+};
+/**
+ * @hidden
+ *
+ * Returns the relative luminance.
+ */
+exports.getLuminance = function (rgb) {
+    var a = [rgb.r, rgb.g, rgb.b].map(function (v) {
+        v /= 255;
+        return v <= 0.03928
+            ? v / 12.92
+            : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+/**
+ * @hidden
+ *
+ * Returns the color contrast.
+ */
+exports.getContrast = function (luminance1, luminance2) {
+    var brightest = Math.max(luminance1, luminance2);
+    var darkest = Math.min(luminance1, luminance2);
+    return (brightest + 0.05)
+        / (darkest + 0.05);
+};
+/**
+ * @hidden
+ *
+ * Returns the color contrast from two RGBA colors.
+ */
+exports.getContrastFromTwoRGBAs = function (a, b) {
+    return exports.getContrast(exports.getLuminance(exports.getRGBFromRGBA(a, b)), exports.getLuminance(exports.getRGBFromRGBA(b, { r: 0, g: 0, b: 0, a: 1 })));
+};

package/dist/npm/colorpicker.module.js

@@ -18,6 +18,8 @@ var color_input_component_1 = require("./colorpicker/color-input.component");
 var custom_messages_component_1 = require("./colorpicker/localization/custom-messages.component");
 var localized_colorpicker_messages_directive_1 = require("./colorpicker/localization/localized-colorpicker-messages.directive");
 var focus_on_dom_ready_directive_1 = require("./colorpicker/focus-on-dom-ready.directive");
+var contrast_validation_component_1 = require("./colorpicker/contrast-validation.component");
+var contrast_component_1 = require("./colorpicker/contrast.component");
 var PUBLIC_DIRECTIVES = [
     colorpicker_component_1.ColorPickerComponent,
     color_palette_component_1.ColorPaletteComponent,
@@ -27,7 +29,9 @@ var PUBLIC_DIRECTIVES = [
 ];
 var INTERNAL_DIRECTIVES = [
     color_input_component_1.ColorInputComponent,
-    focus_on_dom_ready_directive_1.FocusOnDomReadyDirective
+    focus_on_dom_ready_directive_1.FocusOnDomReadyDirective,
+    contrast_component_1.ContrastComponent,
+    contrast_validation_component_1.ContrastValidationComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})

package/dist/npm/index.js

@@ -13,6 +13,10 @@ var checkbox_module_1 = require("./checkbox.module");
 exports.CheckBoxModule = checkbox_module_1.CheckBoxModule
 var color_input_component_1 = require("./colorpicker/color-input.component");
 exports.ColorInputComponent = color_input_component_1.ColorInputComponent
+var contrast_validation_component_1 = require("./colorpicker/contrast-validation.component");
+exports.ContrastValidationComponent = contrast_validation_component_1.ContrastValidationComponent
+var contrast_component_1 = require("./colorpicker/contrast.component");
+exports.ContrastComponent = contrast_component_1.ContrastComponent
 var focus_on_dom_ready_directive_1 = require("./colorpicker/focus-on-dom-ready.directive");
 exports.FocusOnDomReadyDirective = focus_on_dom_ready_directive_1.FocusOnDomReadyDirective
 var colorgradient_localization_service_1 = require("./colorpicker/localization/colorgradient-localization.service");

package/dist/npm/numerictextbox/numerictextbox.component.js

@@ -535,7 +535,7 @@ var NumericTextBoxComponent = /** @class */ (function () {
     });
     NumericTextBoxComponent.prototype.arrowPress = function (direction, e) {
         e.preventDefault();
-        if (this.isDisabled) {
+        if (this.isDisabled || utils_2.isRightClick(e)) {
             return;
         }
         if (!kendo_common_1.mobileOS) {

package/dist/npm/numerictextbox/utils.js

@@ -84,3 +84,11 @@ exports.extractSignificantNumericChars = function (formattedString, separator) {
     var significantCharacters = separator + "0123456789-";
     return formattedString.split('').reduce(function (acc, curr) { return significantCharacters.includes(curr) ? ++acc : acc; }, 0);
 };
+/**
+ * @hidden
+ */
+exports.isRightClick = function (event) {
+    var isRightClickIE = event.button && event.button === 2;
+    var isRightClickOther = event.which && event.which === 3;
+    return isRightClickIE || isRightClickOther;
+};

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1630597338,
+    publishDate: 1635258302,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };