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

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

@@ -6,16 +6,16 @@ import * as tslib_1 from "tslib";
 var ColorGradientComponent_1;
 import { Component, Input, ViewChild, ElementRef, Renderer2, NgZone, Output, EventEmitter, HostBinding, forwardRef, ChangeDetectorRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { parseColor, getHSV, getColorFromHSV, getColorFromHue } from './utils';
-import { isPresent, fitIntoBounds } from '../common/utils';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isChanged, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
 import { containsFocus, isUntouched } from '../common/dom-utils';
+import { parseColor, getHSV, getColorFromHSV, getColorFromHue } from './utils';
+import { isPresent, fitIntoBounds } from '../common/utils';
 import { SliderComponent } from '../slider/slider.component';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { Subject } from 'rxjs';
 import { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
 import { ColorInputComponent } from './color-input.component';
-import { throttleTime } from 'rxjs/operators';
 import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED } from './constants';
 let serial = 0;
 /**
@@ -29,9 +29,6 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.renderer = renderer;
         this.cdr = cdr;
         this.localizationService = localizationService;
-        /**
-         * @hidden
-         */
         this.hostClasses = true;
         /**
          * @hidden
@@ -39,18 +36,26 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.id = `k-colorgradient-${serial++}`;
         /**
          * Defines whether the alpha slider will be displayed.
+         *
+         * @default true
          */
         this.opacity = true;
         /**
          * Sets the disabled state of the ColorGradient.
+         *
+         * @default false
          */
         this.disabled = false;
         /**
          * Sets the read-only state of the ColorGradient.
+         *
+         * @default false
          */
         this.readonly = false;
         /**
          * Specifies whether the ColorGradient should display a 'Clear color' button.
+         *
+         * @default false
          */
         this.clearButton = false;
         /**
@@ -59,6 +64,16 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
          * @default 0
          */
         this.delay = 0;
+        /**
+         * Specifies the output format of the ColorGradientComponent.
+         * The input value may be in a different format, but it will be parsed into the output `format`
+         * after the component processes it.
+         *
+         * The supported values are:
+         * * (Default) `rgba`
+         * * `hex`
+         */
+        this.format = DEFAULT_OUTPUT_FORMAT;
         /**
          * Fires each time the user selects a new color.
          */
@@ -74,17 +89,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
          * The values are initially set in `ngOnInit` or in `ngOnChanges` and are
          * updated on moving the drag handle or the sliders.
          */
-        this.hsva = {};
-        /**
-         * Specifies the output format of the ColorGradientComponent.
-         * The input value may be in a different format. However, it will be parsed into the output `format`
-         * after the component processes it.
-         *
-         * The supported values are:
-         * * (Default) `rgba`
-         * * `hex`
-         */
-        this.format = DEFAULT_OUTPUT_FORMAT;
+        this.hsva = new BehaviorSubject({});
         this._tabindex = 0;
         this.listeners = [];
         this.updateValues = new Subject();
@@ -94,46 +99,51 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
-    /**
-     * @hidden
-     */
     get readonlyAttribute() {
         return this.readonly;
     }
-    /**
-     * @hidden
-     */
     get disabledClass() {
         return this.disabled;
     }
-    /**
-     * @hidden
-     */
-    get hostTabindex() {
-        return this.tabindex;
-    }
-    /**
-     * @hidden
-     */
     get gradientId() {
         return this.id;
     }
+    get hostTabindex() {
+        return this.tabindex;
+    }
     /**
      * Specifies the value of the initially selected color.
      */
     set value(value) {
-        this._value = parseColor(value, this.format);
+        this._value = parseColor(value, this.format, this.opacity);
     }
     get value() {
         return this._value;
     }
+    /**
+     * Enables the color contrast tool. Accepts the background color that will be compared to the selected value.
+     * The tool will calculate the contrast ratio between the two colors.
+     */
+    set contrastTool(value) {
+        this._contrastTool = parseColor(value, this.format, this.opacity);
+    }
+    get contrastTool() {
+        return this._contrastTool;
+    }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
      */
     set tabindex(value) {
-        const tabindex = Number(value);
-        const defaultValue = 0;
-        this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+        if (isPresent(value)) {
+            const tabindex = Number(value);
+            this._tabindex = !isNaN(tabindex) ? tabindex : 0;
+        }
+        else {
+            // Allows removal of the tabindex attribute
+            this._tabindex = value;
+        }
     }
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
@@ -152,10 +162,10 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
      */
     get alphaSliderValue() {
         // setting the initial value to undefined to force the slider to recalculate the height of the slider track on the next cdr run
-        if (!(isPresent(this.hsva) && isPresent(this.hsva.a))) {
+        if (!(isPresent(this.hsva.value) && isPresent(this.hsva.value.a))) {
             return;
         }
-        return this.hsva.a * 100;
+        return this.hsva.value.a * 100;
     }
     get gradientRect() {
         return this.gradientWrapper.nativeElement.getBoundingClientRect();
@@ -164,7 +174,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
      * @hidden
      */
     get contrastToolVisible() {
-        return typeof this.contrastTool === 'string' && this.contrastTool !== '';
+        return this.contrastTool && this.contrastTool.length > 0;
     }
     ngAfterViewInit() {
         this.updateUI();
@@ -195,7 +205,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         if (this.disabled) {
             return;
         }
-        this.host.nativeElement.focus();
+        this.gradientDragHandle.nativeElement.focus();
     }
     /**
      * @hidden
@@ -233,7 +243,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             return;
         }
         this.renderer.removeClass(this.gradientWrapper.nativeElement, 'k-dragging');
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
     }
     /**
      * @hidden
@@ -278,15 +288,19 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             return;
         }
         this.gradientDragHandle.nativeElement.focus();
-        const newX = position.clientX - this.gradientRect.left;
-        const newY = position.clientY - this.gradientRect.top;
+        const gradientRect = this.gradientRect;
+        const newX = position.clientX - gradientRect.left;
+        const newY = position.clientY - gradientRect.top;
         this.ngZone.run(() => this.moveDragHandle(newX, newY));
     }
     /**
      * @hidden
      */
     handleHueSliderChange(hue) {
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        const hsva = this.hsva.value;
+        hsva.h = hue;
+        this.hsva.next(hsva);
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.backgroundColor = getColorFromHue(hue);
         this.setAlphaSliderBackground(this.backgroundColor);
     }
@@ -294,14 +308,16 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
      * @hidden
      */
     handleAlphaSliderChange(alpha) {
-        this.hsva.a = alpha / 100;
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        const hsva = this.hsva.value;
+        hsva.a = alpha / 100;
+        this.hsva.next(hsva);
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
     }
     /**
      * @hidden
      */
     handleInputsValueChange(color) {
-        const parsed = parseColor(color, this.format);
+        const parsed = parseColor(color, this.format, this.opacity);
         if (this.value !== parsed) {
             this.handleValueChange(parsed);
             this.updateUI();
@@ -345,7 +361,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
      * @hidden
      */
     get colorGradientHandleAriaLabel() {
-        const parsed = parseColor(this.value, this.format);
+        const parsed = parseColor(this.value, this.format, this.opacity);
         return `${this.value ? parsed : this.localizationService.get('colorGradientHandle')}`;
     }
     /**
@@ -368,29 +384,35 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
     }
     /**
      * @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;
     }
     moveDragHandle(positionX, positionY) {
-        const top = fitIntoBounds(positionY, 0, this.gradientRect.height);
-        const left = fitIntoBounds(positionX, 0, this.gradientRect.width);
+        const gradientRect = this.gradientRect;
+        const gradientRectWidth = gradientRect.width;
+        const gradientRectHeight = gradientRect.height;
+        const top = fitIntoBounds(positionY, 0, gradientRectHeight);
+        const left = fitIntoBounds(positionX, 0, gradientRectWidth);
         this.setDragHandleElementPosition(top, left);
-        this.hsva.s = left / this.gradientRect.width;
-        this.hsva.v = 1 - top / this.gradientRect.height;
-        this.updateValues.next(getColorFromHSV(this.hsva));
-        this.setAlphaSliderBackground(getColorFromHSV(Object.assign({}, this.hsva, { a: 1 })));
+        const hsva = this.hsva.value;
+        hsva.s = left / gradientRectWidth;
+        hsva.v = 1 - top / gradientRectHeight;
+        this.hsva.next(hsva);
+        this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.setAlphaSliderBackground(getColorFromHSV(Object.assign({}, this.hsva.value, { a: 1 }), this.format, this.opacity));
     }
     updateUI() {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.hsva = this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 };
-        const top = (1 - this.hsva.v) * this.gradientRect.height;
-        const left = this.hsva.s * this.gradientRect.width;
+        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
+        const gradientRect = this.gradientRect;
+        const top = (1 - this.hsva.value.v) * gradientRect.height;
+        const left = this.hsva.value.s * gradientRect.width;
         this.setDragHandleElementPosition(top, left);
-        this.backgroundColor = getColorFromHue(this.hsva.h);
+        this.backgroundColor = getColorFromHue(this.hsva.value.h);
         this.setAlphaSliderBackground(this.backgroundColor);
         this.setHostElementAriaLabel();
     }
@@ -416,7 +438,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to top, transparent, ${backgroundColor})`);
     }
     setHostElementAriaLabel() {
-        const parsed = parseColor(this.value, this.format);
+        const parsed = parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
     }
     addEventListeners() {
@@ -432,7 +454,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             const keyupListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'keyup', () => {
                 this.renderer.removeClass(this.gradientWrapper.nativeElement, 'k-dragging');
                 if (!this.readonly && !this.disabled) {
-                    this.ngZone.run(() => this.handleValueChange(getColorFromHSV(this.hsva)));
+                    this.ngZone.run(() => this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity)));
                 }
             });
             const dragHandleFocusInListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusin', () => {
@@ -469,24 +491,24 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ColorGradientComponent.prototype, "disabledClass", null);
-tslib_1.__decorate([
-    HostBinding('attr.tabindex'),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorGradientComponent.prototype, "hostTabindex", null);
 tslib_1.__decorate([
     HostBinding('attr.id'),
     tslib_1.__metadata("design:type", String),
     tslib_1.__metadata("design:paramtypes", [])
 ], ColorGradientComponent.prototype, "gradientId", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorGradientComponent.prototype, "id", void 0);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", String)
 ], ColorGradientComponent.prototype, "direction", void 0);
+tslib_1.__decorate([
+    HostBinding('attr.tabindex'),
+    tslib_1.__metadata("design:type", Number),
+    tslib_1.__metadata("design:paramtypes", [])
+], ColorGradientComponent.prototype, "hostTabindex", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorGradientComponent.prototype, "id", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
@@ -514,21 +536,22 @@ tslib_1.__decorate([
 ], ColorGradientComponent.prototype, "value", null);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorGradientComponent.prototype, "contrastTool", void 0);
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorGradientComponent.prototype, "contrastTool", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number),
     tslib_1.__metadata("design:paramtypes", [Number])
 ], ColorGradientComponent.prototype, "tabindex", null);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorGradientComponent.prototype, "valueChange", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ColorGradientComponent.prototype, "format", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], ColorGradientComponent.prototype, "valueChange", void 0);
 tslib_1.__decorate([
     ViewChild('gradientDragHandle', { read: ElementRef, static: false }),
     tslib_1.__metadata("design:type", ElementRef)
@@ -547,6 +570,7 @@ tslib_1.__decorate([
 ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
 ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
     Component({
+        exportAs: 'kendoColorGradient',
         selector: 'kendo-colorgradient',
         providers: [
             {
@@ -580,22 +604,14 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
             hueSliderHandle="Set hue"
             i18n-opacitySliderHandle="kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle."
             opacitySliderHandle="Set opacity"
-            i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
-            hexInputPlaceholder="HEX Color"
-            i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
-            redInputPlaceholder="Red"
-            i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
-            greenInputPlaceholder="Green"
-            i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
-            blueInputPlaceholder="Blue"
-            i18n-alphaInputPlaceholder="kendo.colorgradient.alphaInputPlaceholder|The placeholder for the alpha input."
-            alphaInputPlaceholder="Alpha"
             i18n-passContrast="kendo.colorgradient.passContrast|The pass message for the contrast tool."
             passContrast="Pass"
             i18n-failContrast="kendo.colorgradient.failContrast|The fail message for the contrast tool."
             failContrast="Fail"
             i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
-            contrastRatio="Contrast ratio">
+            contrastRatio="Contrast ratio"
+            i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
+            formatButton="Change color format">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
             <div class="k-hsv-rectangle" [style.background]="backgroundColor">
@@ -616,6 +632,14 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
                     >
                     </div>
                 </div>
+                <svg kendoColorContrastSvg
+                    *ngIf="contrastToolVisible && gradientWrapper"
+                    class="k-color-contrast-svg"
+                    xmlns="http://www.w3.org/2000/svg"
+                    [wrapper]="gradientWrapper ? gradientWrapper : undefined"
+                    [hsva]="hsva"
+                    [backgroundColor]="contrastTool">
+                </svg>
             </div>
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
                 <span class="k-clear-color k-button k-flat k-button-icon"
@@ -641,12 +665,12 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
                     [max]="360"
                     [smallStep]="5"
                     [largeStep]="10"
-                    [(value)]="hsva.h"
+                    [value]="hsva.value.h"
                     (valueChange)="handleHueSliderChange($event)"
                 >
                 </kendo-slider>
                 <kendo-slider
-                    *ngIf="opacity && format === 'rgba'"
+                    *ngIf="opacity"
                     #alphaSlider
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-alpha-slider k-colorgradient-slider"
@@ -684,12 +708,21 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
         styles: [`
         .k-clear-color {
             position: absolute;
+            top: 0;
             left: 50%;
             transform: translateX(-50%);
         }
-        .k-align-self-end {
+        .k-colorgradient-slider.k-align-self-end {
             height: 140px;
         }
+
+        .k-color-contrast-svg {
+            position: absolute;
+            overflow: visible;
+            pointer-events: none;
+            left: 0px;
+            top: 0px;
+        }
     `]
     }),
     tslib_1.__metadata("design:paramtypes", [ElementRef,

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

@@ -5,13 +5,18 @@
 import { OnChanges, SimpleChanges, EventEmitter, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
 import { RGBA } from './models';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
 /**
  * @hidden
  */
 export declare class ColorInputComponent implements AfterViewInit, OnChanges {
-    private localization;
     private host;
     private renderer;
+    private localizationService;
+    /**
+     * The id of the hex input.
+     */
+    focusableId: string;
     /**
      * The color format view.
      */
@@ -38,7 +43,9 @@ export declare class ColorInputComponent implements AfterViewInit, OnChanges {
      */
     valueChange: EventEmitter<string>;
     colorInputClass: boolean;
-    opacityInput: ElementRef;
+    opacityInput: NumericTextBoxComponent;
+    hexInput: ElementRef;
+    blueInput: ElementRef;
     toggleFormatButton: ElementRef;
     /**
      * The rgba inputs values.
@@ -54,15 +61,15 @@ export declare class ColorInputComponent implements AfterViewInit, OnChanges {
      */
     private readonly rgbaInputValid;
     private subscriptions;
-    constructor(localization: LocalizationService, host: ElementRef, renderer: Renderer2);
+    constructor(host: ElementRef, renderer: Renderer2, localizationService: LocalizationService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    readonly formatButtonTitle: string;
     handleRgbaValueChange(): void;
     handleHexValueChange(hex: string): void;
     handleRgbaInputBlur(): void;
     handleHexInputBlur(): void;
-    textFor(key: string): string;
     private toggleFormatView;
     private initDomEvents;
 }