@progress/kendo-angular-inputs 17.0.0-develop.4 → 17.0.0-develop.41

package/{esm2020 → esm2022}/checkbox/checkbox.component.mjs

@@ -13,37 +13,12 @@ import { SharedInputEventsDirective } from '../shared/shared-events.directive';
 import * as i0 from "@angular/core";
 const DEFAULT_ROUNDED = 'medium';
 export class CheckBoxComponent extends RadioCheckBoxBase {
-    constructor(renderer, hostElement, cdr, ngZone, injector) {
-        super('checkbox', hostElement, renderer, cdr, ngZone, injector);
-        this.renderer = renderer;
-        this.hostElement = hostElement;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        this.injector = injector;
-        this.hostClass = true;
-        /**
-         * Fires each time the inner input's checked state is changed.
-         * When the state of the component is programmatically changed to `ngModel` or `formControl`
-         * through its API or form binding, the `checkedStateChange` event is not triggered because it
-         * might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
-         *
-         * Used to provide a two-way binding for the `checkedState` property.
-         */
-        this.checkedStateChange = new EventEmitter();
-        this._rounded = DEFAULT_ROUNDED;
-        this._checkedState = false;
-        /**
-         * @hidden
-         */
-        this.handleChange = ($event) => {
-            this.ngZone.run(() => {
-                this.checkedState = $event && $event.target && $event.target.checked;
-                this.checkedStateChange.emit(this.checkedState);
-                this.ngChange(this.checkedState);
-            });
-        };
-        validatePackage(packageMetadata);
-    }
+    renderer;
+    hostElement;
+    cdr;
+    ngZone;
+    injector;
+    hostClass = true;
     /**
      * Sets the checked state of the component.
      *
@@ -79,6 +54,15 @@ export class CheckBoxComponent extends RadioCheckBoxBase {
     get rounded() {
         return this._rounded;
     }
+    /**
+     * Fires each time the inner input's checked state is changed.
+     * When the state of the component is programmatically changed to `ngModel` or `formControl`
+     * through its API or form binding, the `checkedStateChange` event is not triggered because it
+     * might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
+     *
+     * Used to provide a two-way binding for the `checkedState` property.
+     */
+    checkedStateChange = new EventEmitter();
     /**
      * @hidden
      */
@@ -104,6 +88,17 @@ export class CheckBoxComponent extends RadioCheckBoxBase {
             'aria-invalid': this.isControlInvalid
         };
     }
+    _rounded = DEFAULT_ROUNDED;
+    _checkedState = false;
+    constructor(renderer, hostElement, cdr, ngZone, injector) {
+        super('checkbox', hostElement, renderer, cdr, ngZone, injector);
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        validatePackage(packageMetadata);
+    }
     ngAfterViewInit() {
         const stylingInputs = ['size', 'rounded'];
         stylingInputs.forEach(input => {
@@ -111,24 +106,33 @@ export class CheckBoxComponent extends RadioCheckBoxBase {
         });
         this.input.nativeElement.indeterminate = this.checkedState === 'indeterminate';
     }
+    /**
+     * @hidden
+     */
+    handleChange = ($event) => {
+        this.ngZone.run(() => {
+            this.checkedState = $event && $event.target && $event.target.checked;
+            this.checkedStateChange.emit(this.checkedState);
+            this.ngChange(this.checkedState);
+        });
+    };
     /**
      * @hidden
      */
     writeValue(value) {
         this.checkedState = value;
     }
-}
-CheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-CheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckBoxComponent, isStandalone: true, selector: "kendo-checkbox", inputs: { checkedState: "checkedState", rounded: "rounded" }, outputs: { checkedStateChange: "checkedStateChange" }, host: { properties: { "class.k-checkbox-wrap": "this.hostClass" } }, providers: [
-        LocalizationService,
-        { provide: L10N_PREFIX, useValue: 'kendo.checkbox' },
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => CheckBoxComponent),
-            multi: true
-        },
-        { provide: KendoInput, useExisting: forwardRef(() => CheckBoxComponent) }
-    ], exportAs: ["kendoCheckBox"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxComponent, isStandalone: true, selector: "kendo-checkbox", inputs: { checkedState: "checkedState", rounded: "rounded" }, outputs: { checkedStateChange: "checkedStateChange" }, host: { properties: { "class.k-checkbox-wrap": "this.hostClass" } }, providers: [
+            LocalizationService,
+            { provide: L10N_PREFIX, useValue: 'kendo.checkbox' },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckBoxComponent),
+                multi: true
+            },
+            { provide: KendoInput, useExisting: forwardRef(() => CheckBoxComponent) }
+        ], exportAs: ["kendoCheckBox"], usesInheritance: true, ngImport: i0, template: `
         <ng-container
             kendoInputSharedEvents
             [hostElement]="hostElement"
@@ -158,7 +162,8 @@ CheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             />
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckBoxComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoCheckBox',

package/{esm2020 → esm2022}/checkbox/checkbox.directive.mjs

@@ -17,13 +17,9 @@ const DEFAULT_ROUNDED = 'medium';
  * ```
  */
 export class CheckBoxDirective {
-    constructor(renderer, hostElement) {
-        this.renderer = renderer;
-        this.hostElement = hostElement;
-        this.kendoClass = true;
-        this._size = 'medium';
-        this._rounded = 'medium';
-    }
+    renderer;
+    hostElement;
+    kendoClass = true;
     /**
      * The size property specifies the width and height of the CheckBox
      * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
@@ -60,6 +56,12 @@ export class CheckBoxDirective {
     get rounded() {
         return this._rounded;
     }
+    _size = 'medium';
+    _rounded = 'medium';
+    constructor(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+    }
     ngAfterViewInit() {
         const stylingInputs = ['size', 'rounded'];
         stylingInputs.forEach(input => {
@@ -76,10 +78,10 @@ export class CheckBoxDirective {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxDirective, isStandalone: true, selector: "input[kendoCheckBox]", inputs: { size: "size", rounded: "rounded" }, host: { properties: { "class.k-checkbox": "this.kendoClass" } }, ngImport: i0 });
 }
-CheckBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-CheckBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CheckBoxDirective, isStandalone: true, selector: "input[kendoCheckBox]", inputs: { size: "size", rounded: "rounded" }, host: { properties: { "class.k-checkbox": "this.kendoClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckBoxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kendoCheckBox]',

package/{esm2020 → esm2022}/checkbox.module.mjs

@@ -40,11 +40,11 @@ import * as i2 from "./checkbox/checkbox.directive";
  * ```
  */
 export class CheckBoxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxModule, imports: [i1.CheckBoxComponent, i2.CheckBoxDirective], exports: [i1.CheckBoxComponent, i2.CheckBoxDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxModule });
 }
-CheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CheckBoxModule, imports: [i1.CheckBoxComponent, i2.CheckBoxDirective], exports: [i1.CheckBoxComponent, i2.CheckBoxDirective] });
-CheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckBoxModule, imports: [i1.CheckBoxComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_CHECKBOX],

package/{esm2020 → esm2022}/colorpicker/color-contrast-svg.component.mjs

@@ -14,9 +14,15 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ColorContrastSvgComponent {
-    constructor() {
-        this.hostClass = true;
-    }
+    hostClass = true;
+    wrapper;
+    hsva;
+    backgroundColor;
+    paths;
+    oldHsva;
+    oldH;
+    oldA;
+    metrics;
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
@@ -71,12 +77,12 @@ export class ColorContrastSvgComponent {
         }
         return points;
     }
-}
-ColorContrastSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorContrastSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorContrastSvgComponent, isStandalone: true, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorContrastSvgComponent, isStandalone: true, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
         <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector

package/{esm2020 → esm2022}/colorpicker/color-gradient-numeric-label.directive.mjs

@@ -11,6 +11,9 @@ import * as i1 from "./../numerictextbox/numerictextbox.component";
  * @hidden
  */
 export class NumericLabelDirective {
+    host;
+    kendoAdditionalNumericLabel;
+    localizationService;
     constructor(host) {
         this.host = host;
     }
@@ -18,10 +21,10 @@ export class NumericLabelDirective {
         const localizationToken = `${this.kendoAdditionalNumericLabel}ChannelLabel`;
         this.host.numericInput.nativeElement.setAttribute('aria-label', this.localizationService.get(localizationToken));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericLabelDirective, deps: [{ token: i1.NumericTextBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NumericLabelDirective, isStandalone: true, selector: "[kendoAdditionalNumericLabel]", inputs: { kendoAdditionalNumericLabel: "kendoAdditionalNumericLabel", localizationService: "localizationService" }, ngImport: i0 });
 }
-NumericLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumericLabelDirective, deps: [{ token: i1.NumericTextBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
-NumericLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: NumericLabelDirective, isStandalone: true, selector: "[kendoAdditionalNumericLabel]", inputs: { kendoAdditionalNumericLabel: "kendoAdditionalNumericLabel", localizationService: "localizationService" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumericLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoAdditionalNumericLabel]',

package/{esm2020 → esm2022}/colorpicker/color-gradient.component.mjs

@@ -32,108 +32,13 @@ let serial = 0;
  * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 export class ColorGradientComponent {
-    constructor(host, ngZone, renderer, cdr, localizationService, injector) {
-        this.host = host;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.localizationService = localizationService;
-        this.injector = injector;
-        this.hostClasses = true;
-        this.ariaRole = 'textbox';
-        /**
-         * @hidden
-         */
-        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. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
-         *
-         * @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;
-        /**
-         * Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay.
-         *
-         * @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.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.backgroundColor = DEFAULT_GRADIENT_BACKGROUND_COLOR;
-        /**
-         * @hidden
-         *
-         * Represents the currently selected `hue`, `saturation`, `value`, and `alpha` values.
-         * The values are initially set in `ngOnInit` or in `ngOnChanges` and are
-         * updated on moving the drag handle or the sliders.
-         */
-        this.hsva = new BehaviorSubject({});
-        /**
-         * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
-         *
-         * @default 5
-         */
-        this.gradientSliderStep = DRAGHANDLE_MOVE_SPEED;
-        /**
-         * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.
-         *
-         * @default 2
-         */
-        this.gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
-        /**
-         * @hidden
-         */
-        this.internalNavigation = false;
-        /**
-         * @hidden
-         */
-        this.dropletSlashIcon = dropletSlashIcon;
-        this._tabindex = 0;
-        this.listeners = [];
-        this.hueSliderTouched = false;
-        this.alphaSliderTouched = false;
-        this.updateValues = new Subject();
-        this.hsvHandleCoordinates = { x: 0, y: 0 };
-        this.notifyNgChanged = () => { };
-        this.notifyNgTouched = () => { };
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
+    host;
+    ngZone;
+    renderer;
+    cdr;
+    localizationService;
+    injector;
+    hostClasses = true;
     get readonlyAttribute() {
         return this.readonly;
     }
@@ -143,9 +48,11 @@ export class ColorGradientComponent {
     get gradientId() {
         return this.id;
     }
+    direction;
     get hostTabindex() {
         return this.tabindex?.toString() || '0';
     }
+    ariaRole = 'textbox';
     get isControlInvalid() {
         return (this.control?.invalid)?.toString();
     }
@@ -178,6 +85,40 @@ export class ColorGradientComponent {
     focusHandler(ev) {
         this.internalNavigation = ev.target !== this.host.nativeElement;
     }
+    /**
+     * @hidden
+     */
+    id = `k-colorgradient-${serial++}`;
+    /**
+     * Defines whether the alpha slider will be displayed.
+     *
+     * @default true
+     */
+    opacity = true;
+    /**
+     * Sets the disabled state of the ColorGradient. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
+     *
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Sets the read-only state of the ColorGradient.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Specifies whether the ColorGradient should display a 'Clear color' button.
+     *
+     * @default false
+     */
+    clearButton = false;
+    /**
+     * Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay.
+     *
+     * @default 0
+     */
+    delay = 0;
     /**
      * Specifies the value of the initially selected color.
      */
@@ -215,6 +156,32 @@ export class ColorGradientComponent {
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * 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`
+     */
+    format = DEFAULT_OUTPUT_FORMAT;
+    /**
+     * Fires each time the user selects a new color.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    backgroundColor = DEFAULT_GRADIENT_BACKGROUND_COLOR;
+    /**
+     * @hidden
+     *
+     * Represents the currently selected `hue`, `saturation`, `value`, and `alpha` values.
+     * The values are initially set in `ngOnInit` or in `ngOnChanges` and are
+     * updated on moving the drag handle or the sliders.
+     */
+    hsva = new BehaviorSubject({});
     /**
      * Indicates whether the ColorGradient or any of its content is focused.
      */
@@ -234,6 +201,41 @@ export class ColorGradientComponent {
         }
         return this.hsva.value.a * 100;
     }
+    /**
+     * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
+     *
+     * @default 5
+     */
+    gradientSliderStep = DRAGHANDLE_MOVE_SPEED;
+    /**
+     * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.
+     *
+     * @default 2
+     */
+    gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
+    gradientDragHandle;
+    inputs;
+    alphaSlider;
+    gradientWrapper;
+    hsvRectangle;
+    /**
+     * @hidden
+     */
+    internalNavigation = false;
+    /**
+     * @hidden
+     */
+    dropletSlashIcon = dropletSlashIcon;
+    _value;
+    _tabindex = 0;
+    _contrastTool;
+    listeners = [];
+    hueSliderTouched = false;
+    alphaSliderTouched = false;
+    updateValues = new Subject();
+    changeRequestsSubscription;
+    dynamicRTLSubscription;
+    hsvHandleCoordinates = { x: 0, y: 0 };
     get gradientRect() {
         return this.gradientWrapper.nativeElement.getBoundingClientRect();
     }
@@ -255,6 +257,19 @@ export class ColorGradientComponent {
     get innerTabIndex() {
         return this.internalNavigation ? 0 : -1;
     }
+    control;
+    constructor(host, ngZone, renderer, cdr, localizationService, injector) {
+        this.host = host;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.localizationService = localizationService;
+        this.injector = injector;
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
     ngOnInit() {
         this.control = this.injector.get(NgControl, null);
     }
@@ -476,6 +491,8 @@ export class ColorGradientComponent {
     isEmpty() {
         return false;
     }
+    notifyNgChanged = () => { };
+    notifyNgTouched = () => { };
     moveDragHandle(positionX, positionY) {
         const gradientRect = this.gradientRect;
         const gradientRectWidth = gradientRect.width;
@@ -573,28 +590,27 @@ export class ColorGradientComponent {
             this.changeRequestsSubscription.unsubscribe();
         }
     }
-}
-ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, 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 }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, 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 }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], 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"
@@ -743,8 +759,9 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorGradientComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorGradient',