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

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

@@ -9,16 +9,21 @@ var core_1 = require("@angular/core");
 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");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var numerictextbox_component_1 = require("./../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-" + kendo_angular_common_1.guid();
         /**
          * Sets whether the alpha slider will be shown.
          */
@@ -77,11 +82,18 @@ var ColorInputComponent = /** @class */ (function () {
     };
     ColorInputComponent.prototype.ngOnChanges = function (changes) {
         if (utils_2.isPresent(changes.value) && !this.isFocused) {
-            this.hex = utils_1.parseColor(this.value, 'hex');
+            this.hex = utils_1.parseColor(this.value, 'hex', this.opacity);
             this.rgba = utils_1.getRGBA(this.value);
-            this.rgba.a = utils_1.parseColor(this.value, 'rgba') ? this.rgba.a : 1;
+            this.rgba.a = utils_1.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 = utils_1.getColorFromRGBA(this.rgba);
         if (!this.rgbaInputValid || color === this.value) {
@@ -89,12 +101,12 @@ var ColorInputComponent = /** @class */ (function () {
         }
         this.value = color;
         this.rgba = utils_1.getRGBA(this.value);
-        this.hex = utils_1.parseColor(color, 'hex');
+        this.hex = utils_1.parseColor(color, 'hex', this.opacity);
         this.valueChange.emit(color);
     };
     ColorInputComponent.prototype.handleHexValueChange = function (hex) {
         this.hex = hex;
-        var color = utils_1.parseColor(hex, 'rgba');
+        var color = utils_1.parseColor(hex, 'rgba', this.opacity);
         if (!utils_2.isPresent(color) || color === this.value) {
             return;
         }
@@ -108,10 +120,7 @@ var ColorInputComponent = /** @class */ (function () {
         }
     };
     ColorInputComponent.prototype.handleHexInputBlur = function () {
-        this.hex = utils_1.parseColor(this.value, 'hex');
-    };
-    ColorInputComponent.prototype.textFor = function (key) {
-        return this.localization.get(key);
+        this.hex = utils_1.parseColor(this.value, 'hex', this.opacity);
     };
     ColorInputComponent.prototype.toggleFormatView = function () {
         this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
@@ -123,6 +132,10 @@ var ColorInputComponent = /** @class */ (function () {
         }
         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, "focusableId", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -153,9 +166,17 @@ var ColorInputComponent = /** @class */ (function () {
         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)
+        core_1.ViewChild('opacityInput', { static: false }),
+        tslib_1.__metadata("design:type", numerictextbox_component_1.NumericTextBoxComponent)
     ], ColorInputComponent.prototype, "opacityInput", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('hexInput', { read: core_1.ElementRef, static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ColorInputComponent.prototype, "hexInput", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('blueInput', { read: core_1.ElementRef, static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ColorInputComponent.prototype, "blueInput", void 0);
     tslib_1.__decorate([
         core_1.ViewChild('toggleFormatButton', { static: false }),
         tslib_1.__metadata("design:type", core_1.ElementRef)
@@ -163,11 +184,11 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = tslib_1.__decorate([
         core_1.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", [kendo_angular_l10n_1.LocalizationService,
-            core_1.ElementRef,
-            core_1.Renderer2])
+        tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
+            core_1.Renderer2,
+            kendo_angular_l10n_1.LocalizationService])
     ], ColorInputComponent);
     return ColorInputComponent;
 }());

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
+var models_1 = require("./models");
 var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
 var color_palette_service_1 = require("./services/color-palette.service");
@@ -79,6 +80,10 @@ var ColorPaletteComponent = /** @class */ (function () {
          * @hidden
          */
         this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.uniqueId = kendo_angular_common_1.guid();
         this._tabindex = 0;
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
@@ -143,12 +148,12 @@ var ColorPaletteComponent = /** @class */ (function () {
             if (!utils_2.isPresent(value)) {
                 value = DEFAULT_PRESET;
             }
-            if (typeof value === 'string' && utils_2.isPresent(utils_1.PALETTEPRESETS[value])) {
-                this.columns = this.columns || utils_1.PALETTEPRESETS[value].columns;
-                value = utils_1.PALETTEPRESETS[value].colors;
+            if (typeof value === 'string' && utils_2.isPresent(models_1.PALETTEPRESETS[value])) {
+                this.columns = this.columns || models_1.PALETTEPRESETS[value].columns;
+                value = models_1.PALETTEPRESETS[value].colors;
             }
             var colors = (typeof value === 'string') ? value.split(',') : value;
-            this._palette = colors.map(function (color) { return utils_1.parseColor(color, _this.format, false); });
+            this._palette = colors.map(function (color) { return utils_1.parseColor(color, _this.format, false, false); });
         },
         enumerable: true,
         configurable: true
@@ -275,27 +280,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 = utils_1.parseColor(value, this.format, false);
+        var parsedColor = utils_1.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;
         }
     };
     /**
@@ -326,7 +326,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;
@@ -337,9 +337,18 @@ var ColorPaletteComponent = /** @class */ (function () {
     ColorPaletteComponent.prototype.reset = function () {
         this.focusedCell = null;
         if (utils_2.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;
@@ -466,6 +475,7 @@ var ColorPaletteComponent = /** @class */ (function () {
     ], ColorPaletteComponent.prototype, "handleHostBlur", null);
     ColorPaletteComponent = ColorPaletteComponent_1 = tslib_1.__decorate([
         core_1.Component({
+            exportAs: 'kendoColorPalette',
             selector: 'kendo-colorpalette',
             providers: [
                 {
@@ -487,7 +497,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", [core_1.ElementRef,
             color_palette_service_1.ColorPaletteService,