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

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

@@ -6,17 +6,22 @@ import * as tslib_1 from "tslib";
 import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2 } from '@angular/core';
 import { getRGBA, parseColor, getColorFromRGBA } from './utils';
 import { isPresent } from '../common/utils';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
 /**
  * @hidden
  */
 var ColorInputComponent = /** @class */ (function () {
-    function ColorInputComponent(localization, host, renderer) {
-        this.localization = localization;
+    function ColorInputComponent(host, renderer, localizationService) {
         this.host = host;
         this.renderer = renderer;
+        this.localizationService = localizationService;
+        /**
+         * The id of the hex input.
+         */
+        this.focusableId = "k-" + guid();
         /**
          * Sets whether the alpha slider will be shown.
          */
@@ -75,11 +80,18 @@ var ColorInputComponent = /** @class */ (function () {
     };
     ColorInputComponent.prototype.ngOnChanges = function (changes) {
         if (isPresent(changes.value) && !this.isFocused) {
-            this.hex = parseColor(this.value, 'hex');
+            this.hex = parseColor(this.value, 'hex', this.opacity);
             this.rgba = getRGBA(this.value);
-            this.rgba.a = parseColor(this.value, 'rgba') ? this.rgba.a : 1;
+            this.rgba.a = parseColor(this.value, 'rgba', this.opacity) ? this.rgba.a : 1;
         }
     };
+    Object.defineProperty(ColorInputComponent.prototype, "formatButtonTitle", {
+        get: function () {
+            return this.localizationService.get('formatButton');
+        },
+        enumerable: true,
+        configurable: true
+    });
     ColorInputComponent.prototype.handleRgbaValueChange = function () {
         var color = getColorFromRGBA(this.rgba);
         if (!this.rgbaInputValid || color === this.value) {
@@ -87,12 +99,12 @@ var ColorInputComponent = /** @class */ (function () {
         }
         this.value = color;
         this.rgba = getRGBA(this.value);
-        this.hex = parseColor(color, 'hex');
+        this.hex = parseColor(color, 'hex', this.opacity);
         this.valueChange.emit(color);
     };
     ColorInputComponent.prototype.handleHexValueChange = function (hex) {
         this.hex = hex;
-        var color = parseColor(hex, 'rgba');
+        var color = parseColor(hex, 'rgba', this.opacity);
         if (!isPresent(color) || color === this.value) {
             return;
         }
@@ -106,10 +118,7 @@ var ColorInputComponent = /** @class */ (function () {
         }
     };
     ColorInputComponent.prototype.handleHexInputBlur = function () {
-        this.hex = parseColor(this.value, 'hex');
-    };
-    ColorInputComponent.prototype.textFor = function (key) {
-        return this.localization.get(key);
+        this.hex = parseColor(this.value, 'hex', this.opacity);
     };
     ColorInputComponent.prototype.toggleFormatView = function () {
         this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
@@ -121,6 +130,10 @@ var ColorInputComponent = /** @class */ (function () {
         }
         this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', function () { return _this.toggleFormatView(); }));
     };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorInputComponent.prototype, "focusableId", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -151,9 +164,17 @@ var ColorInputComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean)
     ], ColorInputComponent.prototype, "colorInputClass", void 0);
     tslib_1.__decorate([
-        ViewChild('opacityInput', { read: ElementRef, static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
+        ViewChild('opacityInput', { static: false }),
+        tslib_1.__metadata("design:type", NumericTextBoxComponent)
     ], ColorInputComponent.prototype, "opacityInput", void 0);
+    tslib_1.__decorate([
+        ViewChild('hexInput', { read: ElementRef, static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], ColorInputComponent.prototype, "hexInput", void 0);
+    tslib_1.__decorate([
+        ViewChild('blueInput', { read: ElementRef, static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], ColorInputComponent.prototype, "blueInput", void 0);
     tslib_1.__decorate([
         ViewChild('toggleFormatButton', { static: false }),
         tslib_1.__metadata("design:type", ElementRef)
@@ -161,11 +182,11 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-colorinput',
-            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    "
+            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-icon-button k-flat\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-textbox k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\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                    [(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                    [(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                    [(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                    [(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", [LocalizationService,
-            ElementRef,
-            Renderer2])
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            Renderer2,
+            LocalizationService])
     ], ColorInputComponent);
     return ColorInputComponent;
 }());

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

@@ -5,10 +5,11 @@
 import * as tslib_1 from "tslib";
 import { Component, Input, EventEmitter, Output, HostBinding, HostListener, forwardRef, ChangeDetectorRef, Renderer2, ElementRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { PALETTEPRESETS, parseColor } from './utils';
+import { PALETTEPRESETS } from './models';
+import { parseColor } from './utils';
 import { isPresent } from '../common/utils';
 import { ColorPaletteService } from './services/color-palette.service';
-import { Keys, KendoInput } from '@progress/kendo-angular-common';
+import { Keys, KendoInput, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { ColorPaletteLocalizationService } from './localization/colorpalette-localization.service';
 var DEFAULT_TILE_SIZE = 24;
@@ -77,6 +78,10 @@ var ColorPaletteComponent = /** @class */ (function () {
          * @hidden
          */
         this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.uniqueId = guid();
         this._tabindex = 0;
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
@@ -146,7 +151,7 @@ var ColorPaletteComponent = /** @class */ (function () {
                 value = PALETTEPRESETS[value].colors;
             }
             var colors = (typeof value === 'string') ? value.split(',') : value;
-            this._palette = colors.map(function (color) { return parseColor(color, _this.format, false); });
+            this._palette = colors.map(function (color) { return parseColor(color, _this.format, false, false); });
         },
         enumerable: true,
         configurable: true
@@ -273,27 +278,22 @@ var ColorPaletteComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    ColorPaletteComponent.prototype.handleCellSelection = function (value, cell) {
+    ColorPaletteComponent.prototype.handleCellSelection = function (value, focusedCell) {
         if (this.readonly) {
             return;
         }
-        this.selectedCell = cell;
+        this.selectedCell = focusedCell;
         this.focusedCell = this.selectedCell;
         this.focusInComponent = true;
-        var parsedColor = parseColor(value, this.format, false);
+        var parsedColor = parseColor(value, this.format, false, false);
         this.cellSelection.emit(parsedColor);
-        if (this.value !== parsedColor) {
-            this.value = parsedColor;
-            this.valueChange.emit(parsedColor);
-            this.notifyNgChanged(parsedColor);
-            this.setHostElementAriaLabel();
-        }
+        this.handleValueChange(parsedColor);
         if (this.selection !== parsedColor) {
             this.selection = parsedColor;
             this.selectionChange.emit(parsedColor);
         }
-        if (cell) {
-            this.activeCellId = this.selectedCell.row + "-" + this.selectedCell.col;
+        if (focusedCell) {
+            this.activeCellId = "k-" + this.selectedCell.row + "-" + this.selectedCell.col + "-" + this.uniqueId;
         }
     };
     /**
@@ -324,7 +324,7 @@ var ColorPaletteComponent = /** @class */ (function () {
     };
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     ColorPaletteComponent.prototype.isEmpty = function () {
         return false;
@@ -335,9 +335,18 @@ var ColorPaletteComponent = /** @class */ (function () {
     ColorPaletteComponent.prototype.reset = function () {
         this.focusedCell = null;
         if (isPresent(this.value)) {
-            this._value = undefined;
-            this.notifyNgChanged(undefined);
+            this.handleValueChange(undefined);
         }
+        this.selectedCell = undefined;
+    };
+    ColorPaletteComponent.prototype.handleValueChange = function (color) {
+        if (this.value === color) {
+            return;
+        }
+        this.value = color;
+        this.valueChange.emit(color);
+        this.notifyNgChanged(color);
+        this.setHostElementAriaLabel();
     };
     ColorPaletteComponent.prototype.handleCellFocusOnBlur = function () {
         this.focusInComponent = false;
@@ -464,6 +473,7 @@ var ColorPaletteComponent = /** @class */ (function () {
     ], ColorPaletteComponent.prototype, "handleHostBlur", null);
     ColorPaletteComponent = ColorPaletteComponent_1 = tslib_1.__decorate([
         Component({
+            exportAs: 'kendoColorPalette',
             selector: 'kendo-colorpalette',
             providers: [
                 {
@@ -485,7 +495,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\" 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    "
+            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]=\"'k-' + rowIndex + '-' + colIndex + '-' + uniqueId\"\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", [ElementRef,
             ColorPaletteService,