@progress/kendo-angular-inputs 8.0.4 → 9.0.0-next.202202161022

package/{dist/es2015 → esm2015}/colorpicker/color-gradient.component.js

@@ -2,9 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-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 { Component, Input, ViewChild, ElementRef, Output, EventEmitter, HostBinding, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
@@ -14,17 +12,24 @@ import { validatePackage } from '@progress/kendo-licensing';
 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 { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
-import { ColorInputComponent } from './color-input.component';
 import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED } from './constants';
 import { packageMetadata } from '../package-metadata';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./color-contrast-svg.component";
+import * as i3 from "../slider/slider.component";
+import * as i4 from "./color-input.component";
+import * as i5 from "./contrast.component";
+import * as i6 from "./localization/localized-colorpicker-messages.directive";
+import * as i7 from "@progress/kendo-angular-common";
+import * as i8 from "@angular/common";
 let serial = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
  * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
-let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientComponent {
+export class ColorGradientComponent {
     constructor(host, ngZone, renderer, cdr, localizationService) {
         this.host = host;
         this.ngZone = ngZone;
@@ -404,7 +409,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         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));
+        this.setAlphaSliderBackground(getColorFromHSV(Object.assign(Object.assign({}, this.hsva.value), { a: 1 }), this.format, this.opacity));
     }
     updateUI() {
         if (!isDocumentAvailable()) {
@@ -479,123 +484,166 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             this.changeRequestsSubscription.unsubscribe();
         }
     }
-};
-tslib_1.__decorate([
-    HostBinding('class.k-colorgradient'),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorGradientComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.aria-readonly'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorGradientComponent.prototype, "readonlyAttribute", null);
-tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorGradientComponent.prototype, "disabledClass", 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([
-    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)
-], ColorGradientComponent.prototype, "opacity", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorGradientComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorGradientComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorGradientComponent.prototype, "clearButton", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], ColorGradientComponent.prototype, "delay", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ColorGradientComponent.prototype, "value", null);
-tslib_1.__decorate([
-    Input(),
-    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([
-    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)
-], ColorGradientComponent.prototype, "gradientDragHandle", void 0);
-tslib_1.__decorate([
-    ViewChild('inputs', { static: false }),
-    tslib_1.__metadata("design:type", ColorInputComponent)
-], ColorGradientComponent.prototype, "inputs", void 0);
-tslib_1.__decorate([
-    ViewChild('alphaSlider', { static: false }),
-    tslib_1.__metadata("design:type", SliderComponent)
-], ColorGradientComponent.prototype, "alphaSlider", void 0);
-tslib_1.__decorate([
-    ViewChild('gradientWrapper', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ColorGradientComponent.prototype, "gradientWrapper", void 0);
-ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoColorGradient',
-        selector: 'kendo-colorgradient',
-        providers: [
-            {
-                multi: true,
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ColorGradientComponent_1)
-            },
-            {
-                provide: KendoInput,
-                useExisting: forwardRef(() => ColorGradientComponent_1)
-            },
-            ColorGradientLocalizationService,
-            {
-                provide: LocalizationService,
-                useExisting: ColorGradientLocalizationService
-            },
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.colorgradient'
-            }
-        ],
-        template: `
+}
+ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-state-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorGradientComponent)
+        },
+        {
+            provide: KendoInput,
+            useExisting: forwardRef(() => ColorGradientComponent)
+        },
+        ColorGradientLocalizationService,
+        {
+            provide: LocalizationService,
+            useExisting: ColorGradientLocalizationService
+        },
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.colorgradient'
+        }
+    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true, read: ElementRef }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoColorGradientLocalizedMessages
+            i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            colorGradientNoColor="Colorgradient no color chosen"
+            i18n-colorGradientHandle="kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser."
+            colorGradientHandle="Choose color"
+            i18n-clearButton="kendo.colorgradient.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.colorgradient.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            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"
+            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">
+                <div
+                    #gradientWrapper
+                    kendoDraggable
+                    class="k-hsv-gradient"
+                    (click)="changePosition($event)"
+                    (kendoPress)="handleDragPress($event)"
+                    (kendoDrag)="onHandleDrag($event)"
+                    (kendoRelease)="onHandleRelease()">
+                    <div
+                        #gradientDragHandle
+                        class="k-hsv-draghandle k-draghandle"
+                        tabindex="0"
+                        [attr.title]="colorGradientHandleTitle"
+                        [attr.aria-label]="colorGradientHandleAriaLabel"
+                    >
+                    </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-button-md k-button-flat k-button-flat-base k-button-icon"
+                    *ngIf="clearButton"
+                    (click)="reset()"
+                    (keydown.enter)="reset()"
+                    (keydown.space)="reset()"
+                    [attr.aria-label]="clearButtonTitle"
+                    [attr.title]="clearButtonTitle"
+                    tabindex="0">
+                    <span class="k-icon k-i-reset-color"></span>
+                </span>
+                <kendo-slider
+                    [ngClass]="{'k-align-self-end': clearButton}"
+                    class="k-hue-slider k-colorgradient-slider"
+                    [dragHandleTitle]="hueSliderTitle"
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [showButtons]="false"
+                    [tickPlacement]="'none'"
+                    [vertical]="true"
+                    [min]="0"
+                    [max]="360"
+                    [smallStep]="5"
+                    [largeStep]="10"
+                    [value]="hsva.value.h"
+                    (valueChange)="handleHueSliderChange($event)"
+                >
+                </kendo-slider>
+                <kendo-slider
+                    *ngIf="opacity"
+                    #alphaSlider
+                    [ngClass]="{'k-align-self-end': clearButton}"
+                    class="k-alpha-slider k-colorgradient-slider"
+                    [dragHandleTitle]="opacitySliderTitle"
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [showButtons]="false"
+                    [tickPlacement]="'none'"
+                    [vertical]="true"
+                    [min]="0"
+                    [max]="100"
+                    [smallStep]="1"
+                    [largeStep]="10"
+                    [value]="alphaSliderValue"
+                    (valueChange)="handleAlphaSliderChange($event)"
+                >
+                </kendo-slider>
+            </div>
+        </div>
+        <kendo-colorinput  #inputs
+            [opacity]="opacity"
+            [formatView]="format"
+            [value]="value"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            (valueChange)="handleInputsValueChange($event)"
+        >
+        </kendo-colorinput>
+        <div class="k-colorgradient-color-contrast k-vbox" *ngIf="contrastToolVisible"
+            kendoContrastTool
+            [value]="value"
+            [ratio]="contrastTool">
+        </div>
+    `, isInline: true, styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "], components: [{ type: i2.ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i3.SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: i4.ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange"] }, { type: i5.ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i7.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoColorGradient',
+                    selector: 'kendo-colorgradient',
+                    providers: [
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorGradientComponent)
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => ColorGradientComponent)
+                        },
+                        ColorGradientLocalizationService,
+                        {
+                            provide: LocalizationService,
+                            useExisting: ColorGradientLocalizationService
+                        },
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.colorgradient'
+                        }
+                    ],
+                    template: `
         <ng-container kendoColorGradientLocalizedMessages
             i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
             colorGradientNoColor="Colorgradient no color chosen"
@@ -708,7 +756,7 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
             [ratio]="contrastTool">
         </div>
     `,
-        styles: [`
+                    styles: [`
         .k-clear-color {
             position: absolute;
             top: 0;
@@ -727,11 +775,57 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
             top: 0px;
         }
     `]
-    }),
-    tslib_1.__metadata("design:paramtypes", [ElementRef,
-        NgZone,
-        Renderer2,
-        ChangeDetectorRef,
-        LocalizationService])
-], ColorGradientComponent);
-export { ColorGradientComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-colorgradient']
+            }], readonlyAttribute: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-state-disabled']
+            }], gradientId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostTabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], id: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], contrastTool: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], gradientDragHandle: [{
+                type: ViewChild,
+                args: ['gradientDragHandle', { read: ElementRef, static: false }]
+            }], inputs: [{
+                type: ViewChild,
+                args: ['inputs', { static: false }]
+            }], alphaSlider: [{
+                type: ViewChild,
+                args: ['alphaSlider', { static: false }]
+            }], gradientWrapper: [{
+                type: ViewChild,
+                args: ['gradientWrapper', { static: false }]
+            }] } });