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

package/dist/es2015/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
  */
 let ColorInputComponent = class ColorInputComponent {
-    constructor(localization, host, renderer) {
-        this.localization = localization;
+    constructor(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.
          */
@@ -66,11 +71,14 @@ let ColorInputComponent = class ColorInputComponent {
     }
     ngOnChanges(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;
         }
     }
+    get formatButtonTitle() {
+        return this.localizationService.get('formatButton');
+    }
     handleRgbaValueChange() {
         const color = getColorFromRGBA(this.rgba);
         if (!this.rgbaInputValid || color === this.value) {
@@ -78,12 +86,12 @@ let ColorInputComponent = class ColorInputComponent {
         }
         this.value = color;
         this.rgba = getRGBA(this.value);
-        this.hex = parseColor(color, 'hex');
+        this.hex = parseColor(color, 'hex', this.opacity);
         this.valueChange.emit(color);
     }
     handleHexValueChange(hex) {
         this.hex = hex;
-        const color = parseColor(hex, 'rgba');
+        const color = parseColor(hex, 'rgba', this.opacity);
         if (!isPresent(color) || color === this.value) {
             return;
         }
@@ -97,10 +105,7 @@ let ColorInputComponent = class ColorInputComponent {
         }
     }
     handleHexInputBlur() {
-        this.hex = parseColor(this.value, 'hex');
-    }
-    textFor(key) {
-        return this.localization.get(key);
+        this.hex = parseColor(this.value, 'hex', this.opacity);
     }
     toggleFormatView() {
         this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
@@ -112,6 +117,10 @@ let ColorInputComponent = class ColorInputComponent {
         this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', () => 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)
@@ -142,9 +151,17 @@ tslib_1.__decorate([
     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)
@@ -154,20 +171,27 @@ ColorInputComponent = tslib_1.__decorate([
         selector: 'kendo-colorinput',
         template: `
         <div class="k-vstack">
-            <button class="k-colorgradient-toggle-mode k-button k-icon-button k-flat" #toggleFormatButton>
+            <button #toggleFormatButton
+                class="k-colorgradient-toggle-mode k-button k-icon-button k-flat"
+                [attr.aria-label]="formatButtonTitle"
+                [attr.title]="formatButtonTitle"
+            >
                 <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
             </button>
         </div>
-        <input *ngIf="formatView === 'hex'"
-            #hexInput
-            class="k-textbox k-hex-value"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [value]="hex || ''"
-            [placeholder]="textFor('hexInputPlaceholder')"
-            (blur)="handleHexInputBlur()"
-            (input)="handleHexValueChange(hexInput.value)"
-        />
+        <div *ngIf="formatView === 'hex'" class="k-vstack">
+            <input
+                #hexInput
+                [id]="focusableId"
+                class="k-textbox k-hex-value"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [value]="hex || ''"
+                (blur)="handleHexInputBlur()"
+                (input)="handleHexValueChange(hexInput.value)"
+            />
+            <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
+        </div>
         <ng-container *ngIf="formatView === 'rgba'">
             <div class="k-vstack">
                 <kendo-numerictextbox
@@ -176,7 +200,6 @@ ColorInputComponent = tslib_1.__decorate([
                     [readonly]="readonly"
                     [min]="0"
                     [max]="255"
-                    [placeholder]="textFor('redInputPlaceholder')"
                     [(value)]="rgba.r"
                     [autoCorrect]="true"
                     [spinners]="false"
@@ -194,7 +217,6 @@ ColorInputComponent = tslib_1.__decorate([
                     [readonly]="readonly"
                     [min]="0"
                     [max]="255"
-                    [placeholder]="textFor('greenInputPlaceholder')"
                     [(value)]="rgba.g"
                     [autoCorrect]="true"
                     [spinners]="false"
@@ -212,7 +234,6 @@ ColorInputComponent = tslib_1.__decorate([
                     [readonly]="readonly"
                     [min]="0"
                     [max]="255"
-                    [placeholder]="textFor('blueInputPlaceholder')"
                     [(value)]="rgba.b"
                     [autoCorrect]="true"
                     [spinners]="false"
@@ -230,7 +251,6 @@ ColorInputComponent = tslib_1.__decorate([
                     [readonly]="readonly"
                     [min]="0"
                     [max]="1"
-                    [placeholder]="textFor('alphaInputPlaceholder')"
                     [(value)]="rgba.a"
                     [autoCorrect]="true"
                     [spinners]="false"
@@ -245,8 +265,8 @@ ColorInputComponent = tslib_1.__decorate([
         </ng-container>
     `
     }),
-    tslib_1.__metadata("design:paramtypes", [LocalizationService,
-        ElementRef,
-        Renderer2])
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        Renderer2,
+        LocalizationService])
 ], ColorInputComponent);
 export { ColorInputComponent };

package/dist/es2015/colorpicker/color-palette.component.d.ts

@@ -12,7 +12,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
  * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {
-    private host;
+    host: ElementRef;
     private service;
     private cdr;
     private renderer;
@@ -132,6 +132,10 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
      * @hidden
      */
     focusInComponent: boolean;
+    /**
+     * @hidden
+     */
+    uniqueId: string;
     private selection;
     private _value;
     private _columns;
@@ -154,7 +158,7 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
     /**
      * @hidden
      */
-    handleCellSelection(value: string, cell?: TableCell): void;
+    handleCellSelection(value: string, focusedCell?: TableCell): void;
     /**
      * @hidden
      */
@@ -173,13 +177,14 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
     setDisabledState(isDisabled: boolean): void;
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty(): boolean;
     /**
      * Clears the color value of the ColorPalette.
      */
     reset(): void;
+    private handleValueChange;
     private handleCellFocusOnBlur;
     private setRows;
     private handleCellNavigation;

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

@@ -6,10 +6,11 @@ import * as tslib_1 from "tslib";
 var ColorPaletteComponent_1;
 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';
 const DEFAULT_TILE_SIZE = 24;
@@ -77,6 +78,10 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
          * @hidden
          */
         this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.uniqueId = guid();
         this._tabindex = 0;
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
@@ -127,7 +132,7 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
             value = PALETTEPRESETS[value].colors;
         }
         const colors = (typeof value === 'string') ? value.split(',') : value;
-        this._palette = colors.map(color => parseColor(color, this.format, false));
+        this._palette = colors.map(color => parseColor(color, this.format, false, false));
     }
     get palette() {
         return this._palette;
@@ -230,27 +235,22 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
     /**
      * @hidden
      */
-    handleCellSelection(value, cell) {
+    handleCellSelection(value, focusedCell) {
         if (this.readonly) {
             return;
         }
-        this.selectedCell = cell;
+        this.selectedCell = focusedCell;
         this.focusedCell = this.selectedCell;
         this.focusInComponent = true;
-        const parsedColor = parseColor(value, this.format, false);
+        const 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}`;
         }
     }
     /**
@@ -281,7 +281,7 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
     }
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty() {
         return false;
@@ -292,9 +292,18 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
     reset() {
         this.focusedCell = null;
         if (isPresent(this.value)) {
-            this._value = undefined;
-            this.notifyNgChanged(undefined);
+            this.handleValueChange(undefined);
         }
+        this.selectedCell = undefined;
+    }
+    handleValueChange(color) {
+        if (this.value === color) {
+            return;
+        }
+        this.value = color;
+        this.valueChange.emit(color);
+        this.notifyNgChanged(color);
+        this.setHostElementAriaLabel();
     }
     handleCellFocusOnBlur() {
         this.focusInComponent = false;
@@ -421,6 +430,7 @@ tslib_1.__decorate([
 ], ColorPaletteComponent.prototype, "handleHostBlur", null);
 ColorPaletteComponent = ColorPaletteComponent_1 = tslib_1.__decorate([
     Component({
+        exportAs: 'kendoColorPalette',
         selector: 'kendo-colorpalette',
         providers: [
             {
@@ -459,7 +469,7 @@ ColorPaletteComponent = ColorPaletteComponent_1 = tslib_1.__decorate([
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
-                            [id]="rowIndex + '-' + colIndex"
+                            [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
                             [attr.value]="color"
                             (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
                             [ngStyle]="{

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

@@ -2,55 +2,62 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, OnDestroy, ViewContainerRef, ChangeDetectorRef, NgZone } from '@angular/core';
+import { EventEmitter, OnDestroy, ViewContainerRef, ChangeDetectorRef, NgZone, OnChanges, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { PopupSettings, PreventableEvent, PaletteSettings, OutputFormat, ActiveColorClickEvent, ColorPickerView, GradientSettings } from './models';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PopupSettings, PaletteSettings, OutputFormat, ColorPickerView, GradientSettings, ColorPickerActionsLayout } from './models';
+import { ActiveColorClickEvent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
- * Designed to replace the `<input type="color">` HTML5 tag which is not widely supported in browsers.
+ *
+ * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
+ * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
-export declare class ColorPickerComponent implements OnDestroy, ControlValueAccessor {
+export declare class ColorPickerComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
     private popupService;
     private cdr;
     private localizationService;
     private ngZone;
-    /**
-     * @hidden
-     */
     hostClasses: boolean;
-    /**
-     * @hidden
-     */
     direction: string;
     /**
      * @hidden
      */
     focusableId: string;
     /**
-     * Sets what view the ColorPicker will render in the popup.
+     * Specifies the views that will be rendered in the popup.
+     * By default both the gradient and palette views will be rendered.
+     */
+    views: Array<ColorPickerView>;
+    /**
+     * Sets the initially active view in the popup. The property supports two-way binding.
+     *
+     * The supported values are:
+     * * `gradient`
+     * * `palette`
      */
-    view: ColorPickerView;
+    activeView: ColorPickerView;
     /**
      * Sets the read-only state of the ColorPicker.
+     *
+     * @default false
      */
     readonly: boolean;
     /**
      * Sets the disabled state of the ColorPicker.
+     *
+     * @default false
      */
     disabled: boolean;
     /**
      * Specifies the output format of the ColorPicker.
-     * The input value may be in a different format. However, it will be parsed into the output `format`
-     * after the component processes it.
      *
-     * If the `gradient` view is used with the `opacity` option set to true, this setting will be ignored and `rgba` will be used instead.
+     * If the input value is in a different format, it will be parsed into the specified output `format`.
      *
      * The supported values are:
      * * `rgba` (default)
      * * `hex`
-     * * [name](https://www.w3.org/wiki/CSS/Properties/color/keywords)
      */
     format: OutputFormat;
     /**
@@ -72,6 +79,7 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
     /**
      * Defines the name of an [existing icon in the Kendo UI theme]({% slug icons %}).
      * Provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
+     *
      * For example, `edit-tools` will be parsed to `k-icon k-i-edit-tools`.
      */
     icon: string;
@@ -84,10 +92,40 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
     iconClass: string | Array<string> | {
         [key: string]: boolean;
     };
+    /**
+     * Specifies whether the ColorPicker should display a 'Clear color' button.
+     *
+     * @default true
+     */
+    clearButton: boolean;
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
      */
     tabindex: number;
+    /**
+     * Displays `Apply` and `Cancel` action buttons and color preview panes.
+     *
+     * When enabled, the component value will not change immediately upon
+     * color selection, but only after the `Apply` button is clicked.
+     *
+     * The `Cancel` button reverts the current selection to its
+     * previous state i.e. to the current value.
+     *
+     * @default false
+     */
+    preview: boolean;
+    /**
+     * Configures the layout of the `Apply` and `Cancel` action buttons.
+     *
+     * The possible values are:
+     * * `start`
+     * * `center`
+     * * `end` (default)
+     * * `stretch`
+     */
+    actionsLayout: ColorPickerActionsLayout;
     /**
      * Fires each time the value is changed.
      */
@@ -96,12 +134,12 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
      * Fires each time the popup is about to open.
      * This event is preventable. If you cancel it, the popup will remain closed.
      */
-    open: EventEmitter<PreventableEvent>;
+    open: EventEmitter<ColorPickerOpenEvent>;
     /**
      * Fires each time the popup is about to close.
      * This event is preventable. If you cancel it, the popup will remain open.
      */
-    close: EventEmitter<PreventableEvent>;
+    close: EventEmitter<ColorPickerCloseEvent>;
     /**
      * Fires each time ColorPicker is focused.
      */
@@ -110,6 +148,12 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
      * Fires each time the ColorPicker is blurred.
      */
     onBlur: EventEmitter<any>;
+    /**
+     * Fires when the user cancels the current color selection.
+     *
+     * Fires on preview pane or 'Cancel' button click.
+     */
+    cancel: EventEmitter<ColorPickerCancelEvent>;
     /**
      * Fires each time the left side of the ColorPicker wrapper is clicked.
      * The event is triggered regardless of whether a ColorPicker icon is set or not.
@@ -117,6 +161,11 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
      * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
      */
     activeColorClick: EventEmitter<ActiveColorClickEvent>;
+    /**
+     * Fires each time the view is about to change.
+     * Used to provide a two-way binding for the `activeView` property.
+     */
+    activeViewChange: EventEmitter<string>;
     /**
      * Indicates whether the ColorPicker wrapper is focused.
      */
@@ -139,8 +188,7 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
     container: ViewContainerRef;
     private wrapper;
     private popupTemplate;
-    private palette;
-    private colorGradient;
+    private flatColorPicker;
     private popupRef;
     private _value;
     private _tabindex;
@@ -155,7 +203,15 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
     /**
      * @hidden
      */
-    handleWrapperClick(): void;
+    readonly colorPickerAriaLabel: string;
+    /**
+     * @hidden
+     */
+    handleCancelEvent(ev: ColorPickerCancelEvent): void;
+    /**
+     * @hidden
+     */
+    togglePopup(): void;
     /**
      * @hidden
      */
@@ -177,7 +233,7 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
      */
     handleWrapperBlur(): void;
     /**
-     * Clears the color value of the ColorPicker.
+     * Clears the value of the ColorPicker.
      */
     reset(): void;
     /**
@@ -190,7 +246,7 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
     /**
      * @hidden
      */
-    handleValueChange(color: string, closePopup: boolean): void;
+    handleValueChange(color: string): void;
     /**
      * @hidden
      */
@@ -221,12 +277,16 @@ export declare class ColorPickerComponent implements OnDestroy, ControlValueAcce
     handlePopupKeyDown(event: any): void;
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty(): boolean;
+    private popupBlurInvalid;
     private toggleWithEvents;
+    private focusFirstElement;
     private openPopup;
     private closePopup;
+    private readonly firstFocusableElement;
+    private readonly lastFocusableElement;
     private notifyNgTouched;
     private notifyNgChanged;
 }