@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/README.md

@@ -0,0 +1,184 @@
+<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
+<img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
+</a>
+
+## Kendo UI for Angular Inputs Package (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)
+
+> **Important**
+> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs).
+> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs).
+> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
+>
+> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) and speed up your development process!
+
+The [Kendo UI for Angular Inputs package](https://www.telerik.com/kendo-angular-ui/components/inputs/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) is a collection of components that render interactive and accessible input fields, each specialized for their specific format. The Inputs are built from the ground-up and specifically for Angular, so that you get high-performance input controls which integrate tightly with your application.
+
+<img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/angular/textarea---forms-support.jpg" alt="Form Example using various inputs such as MaskedTextBox, NumericTextBox, and TextArea in Angular" >
+
+What's Included in The Package:
+
+* [Angular Checkbox Component](#angular-checkbox-component)
+* [Angular ColorGradient Component](#angular-colorgradient-component)
+* [Angular ColorPalette Component](#angular-colorpalette-component)
+* [Angular ColorPicker Component](#angular-colorpicker-component)
+* [Angular FlatColorPicker Component](#angular-flatcolorpicker-component)
+* [Angular FormField Component](#angular-formfield-component)
+* [Angular MaskedTextBox Component](#angular-maskedtextbox-component)
+* [Angular NumericTextBox Component](#angular-numerictextbox-component)
+* [Angular RadioButton Component](#angular-radiobutton-component)
+* [Angular RangeSlider Component](#angular-rangeslider-component)
+* [Angular Slider Component](#angular-slider-component)
+* [Angular Switch Component](#angular-switch-component)
+* [Angular TextArea Component](#angular-textarea-component)
+* [Angular TextBox Component](#angular-textbox-component)
+
+## Angular Inputs Package Common Features
+These features are common across all components in the packatge.
+
+* **Delaying Input Value Changes**&mdash;By default, value updates are processed immediately after the input.But, if you need to allow time for complex scenarios and operations, you can configure a slight delay before the components accept the new input value.
+* **Disabled Inputs**&mdash;Display the Inputs in their read-only state.
+* **Forms Support**&mdash;The Inputs provide support both for the asynchronous template-driven Angular forms and the predominantly synchronous reactive Angular forms. This feature allows you to draw on the logic set either in the template, or in the component or typescript code.
+* **Appearance**&mdash;All aspects of the Inputs can be customized by theme variables or configuration options. Kendo UI for Angular delivers a set of popular themes including Bootstrap and Material, all of which can be easily customized with the Progress ThemeBuilder online utility.
+* **Globalization**&mdash;The Kendo UI for Angular Inputs support globalization to ensure that each Inputs component can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Inputs support rendering in a right-to-left (RTL) direction.
+* **Accessibility**&mdash;The Inputs are accessible for screen readers and support WAI-ARIA attributes.
+* **Keyboard Navigation**&mdash;The Inputs support a number of keyboard shortcuts which alow users to accomplish various commands.
+
+## Angular Checkbox Component
+
+The [Angular Checkbox Component](https://www.telerik.com/kendo-angular-ui/components/inputs/checkbox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) is a directive that helps you style checkbox input elements. It supports all regular HTML checkbox attribures and Angular bindings.
+
+### More Features
+
+* [Indeterminate State](https://www.telerik.com/kendo-angular-ui/components/inputs/checkbox/indeterminate-state/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Render the checkbox in indeterminate state whether or not it is checked.
+* [Labels](https://www.telerik.com/kendo-angular-ui/components/inputs/checkbox/labels/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Associate a label through HTML elements or use the [Kendo UI for Angular Label Component](https://www.telerik.com/kendo-angular-ui/label?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs).
+
+## Angular ColorGradient Component
+
+The [Angular ColorGradient Component](https://www.telerik.com/kendo-angular-ui/components/inputs/colorgradient/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) renders a gradient with hue and alpha sliders for interactive color picking as well as inputs to manually enter a desired color.
+
+### More Features
+
+* [Contrast Tool](https://www.telerik.com/kendo-angular-ui/components/inputs/colorgradient/contrast-tool/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;This optional tool checks the contrast ratio between two colors to ensures that the selected color meets certain contrast requirements like AA or AAA.
+* [Customization](https://www.telerik.com/kendo-angular-ui/components/inputs/colorgradient/custom/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Choose to show or hide certain controls such as opacity.
+
+## Angular ColorPalette Component
+
+The [Angular ColorPalette Component](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpalette/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) renders sets of predefined colors from which users can choose. A common example is swithcing clothing colors when online shopping.
+
+### More Features
+
+* [Color Presets](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpalette/presets/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;This component provides a set of preset palettes or you can define your own.
+* [Customization](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpalette/custom/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Built-in options help you specify rendering, columns, and tile sizes, and to customize the color formats palettes.
+
+## Angular ColorPicker Component
+
+The [Angular ColorPicker Component](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) combines the ColorGradient and ColorPalette to provide a rich color selection tool that appears in a popup and provides a variety of ways to select colors as well as a preview of selected colors.
+
+### More Features
+
+* [Contrast Tool](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/contrast-tool/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;This optional tool checks the contrast ratio between two colors to ensures that the selected color meets certain contrast requirements like AA or AAA.
+* [Customization](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/custom/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;For ultimate flexibility, you can configure each building block including views toggles, clear button, action buttons, palette view, gradient view, and icons.
+* [Control the Open State](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/open-state/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Determine whether the popup is open or closed when the component loads.
+
+## Angular FlatColorPicker Component
+
+The [Angular FlatColorPicker Component](https://www.telerik.com/kendo-angular-ui/components/inputs/flatcolorpicker/) is the same as the Angular ColorPicker, except the picker is not hidden in a popup. It renders directly on the page.
+
+### More Features
+
+* [Contrast Tool](https://www.telerik.com/kendo-angular-ui/components/inputs/flatcolorpicker/contrast-tool/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;This optional tool checks the contrast ratio between two colors to ensures that the selected color meets certain contrast requirements like AA or AAA.
+* [Customization](https://www.telerik.com/kendo-angular-ui/components/inputs/flatcolorpicker/customization/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;For ultimate flexibility, you can configure each building block including views toggles, clear button, action buttons, palette view, gradient view, and icons.
+
+## Angular FormField Component
+
+The [Angular FormField Component](https://www.telerik.com/kendo-angular-ui/components/inputs/formfield/) helps you group form related content to layout out and configure fields, labels, hints, and error messages.
+
+## Angular MaskedTextBox Component
+
+The [Angular MaskedTextBox Component](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) enables you to control input by enforcing format using a mask. A common example is requiring phone number formats.
+
+### More Features
+
+* [Masks](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/masks/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;The Angular NumericTextBox includes a set of predefined masks, but also allows you to create your own.
+* [Validation](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/validation/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;A built-in validator enforces formatting rules.
+
+## Angular NumericTextBox Component
+
+The [Angular NumericTextBox Component](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) provides spin buttons to help users enter and edit numeric bvalues.
+
+### More Features
+
+* [Restrictions](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/precision/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Control user input by restricting elements such as fraction length, value ranges, and maximum length.
+* [Predefined Steps](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/predefined-step/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Specify the value by which the value increments up or down when the spin buttons are clicked.
+
+## Angular RadioButton Component
+
+The [Angular RadioButton Component](https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton/l&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) is a directive that helps you style the radio input element.
+
+### More Features
+
+* [Labels](https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton/labels/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Associate a label through HTML elements or use the [Kendo UI for Angular Label Component](https://www.telerik.com/kendo-angular-ui/label?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs).
+
+## Angular RangeSlider Component
+
+The [Angular RangeSlider Component](https://www.telerik.com/kendo-angular-ui/components/inputs/rangeslider/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) allows users to visually specify numberic ranges by dragging its handles or clicking its track.
+
+### More Features
+
+* [Orientation](https://www.telerik.com/kendo-angular-ui/components/inputs/rangeslider/orientation/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Choose to render the Angular RangeSlider horizontally or vertically.
+* [Ticks](https://www.telerik.com/kendo-angular-ui/components/inputs/rangeslider/ticks/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Configure the placement, titles, and width or the ticks that designate value steps along the track.
+* [Predefined Steps](https://www.telerik.com/kendo-angular-ui/components/inputs/rangeslider/predefined-steps/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Configure the way the RangeSlider divides its range and updates the value by using the step options.
+
+## Angular Slider Component
+
+The [Angular Slider Component](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) enables the user to increase, decrease, and select predefined values by dragging its handle along the track, or by clicking its side arrow buttons.
+
+### More Features
+
+* [Orientation](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/orientation/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Choose to render the Angular Slider horizontally or vertically.
+* [Ticks](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/ticks/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Configure the placement, titles, and width or the ticks that designate value steps along the track.
+* [Predefined Steps](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/predefined-steps/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Configure the way the Slider divides its range and updates the value by using the step options.
+* [Side Buttons](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/side-buttons/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Configure the side buttons that increase or decrease value by showing or hiding and displaying titles.
+
+## Angular Switch Component
+
+The [Angular Switch Component](https://www.telerik.com/kendo-angular-ui/components/inputs/switch/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) is a visual toggle that switches between checked and unchecked states.
+
+## Angular TextArea Component
+
+The [Angular TextArea Component](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) provides a highly customizable UI for entering and displaying multiple lines of text.
+
+### More Features
+
+* [Character Counter](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/character-counter/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Set a maximum length and show the character count and the max value.
+* [Adornments](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/adornments/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Add custom items such as close buttons, insert attachement buttons, and settings buttons.
+
+## Angular TextBox Component
+
+The [Angular TextBox Component](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs) provides options for creating composite inputs that you can integrate within forms or use as standalone items.
+
+### More Features
+
+* [Character Counter](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/character-counter/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Set a maximum length and show the character count and the max value.
+* [Adornments](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/adornments/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Add custom items such as close buttons, insert attachement buttons, and settings buttons.
+* [Validation Icons](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/validation-icons/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)&mdash;Use built-in or custom icons to indicate successful and erroneous processes based on different conditions or validation.
+
+
+## Resources
+
+* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)
+* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)
+* [Blogs](http://www.telerik.com/blogs/kendo-ui)
+* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-inputs)
+
+## Questions and Feedback
+
+* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
+* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
+* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
+* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
+
+*Copyright © 2023 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
+
+*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

package/checkbox/checkbox.directive.d.ts

@@ -0,0 +1,52 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2 } from '@angular/core';
+import { CheckBoxRounded, InputSize } from '../common/models';
+import * as i0 from "@angular/core";
+/**
+ * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
+ * The directive is placed on input type="checkbox" elements.
+ *
+ * @example
+ * ```ts-no-run
+ * <input type="checkbox" kendoCheckBox />
+ * ```
+ */
+export declare class CheckBoxDirective {
+    private renderer;
+    private hostElement;
+    kendoClass: boolean;
+    /**
+     * The size property specifies the width and height of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size: InputSize);
+    get size(): InputSize;
+    /**
+     * The rounded property specifies the border radius of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set rounded(rounded: CheckBoxRounded);
+    get rounded(): CheckBoxRounded;
+    private _size;
+    private _rounded;
+    constructor(renderer: Renderer2, hostElement: ElementRef);
+    ngAfterViewInit(): void;
+    private handleClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckBoxDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CheckBoxDirective, "input[kendoCheckBox]", never, { "size": "size"; "rounded": "rounded"; }, {}, never>;
+}

package/checkbox.module.d.ts

@@ -0,0 +1,43 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from "@angular/core";
+import * as i1 from "./checkbox/checkbox.directive";
+import * as i2 from "@angular/common";
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the CheckBox directive.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the CheckBox module
+ * import { CheckBoxModule } from '@progress/kendo-angular-inputs';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, CheckBoxModule], // import CheckBox module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+export declare class CheckBoxModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckBoxModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CheckBoxModule, [typeof i1.CheckBoxDirective], [typeof i2.CommonModule], [typeof i1.CheckBoxDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CheckBoxModule>;
+}

package/colorpicker/color-contrast-svg.component.d.ts

@@ -0,0 +1,29 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SimpleChanges, AfterViewInit, OnChanges } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { HSVA } from './models';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class ColorContrastSvgComponent implements AfterViewInit, OnChanges {
+    hostClass: boolean;
+    wrapper: any;
+    hsva: BehaviorSubject<HSVA>;
+    backgroundColor: string;
+    paths: any[];
+    oldHsva: HSVA;
+    oldH: number;
+    oldA: number;
+    metrics: any;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    setPaths(): void;
+    private findValue;
+    private getPaths;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorContrastSvgComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorContrastSvgComponent, "[kendoColorContrastSvg]", never, { "wrapper": "wrapper"; "hsva": "hsva"; "backgroundColor": "backgroundColor"; }, {}, never, never>;
+}

package/colorpicker/color-gradient-numeric-label.directive.d.ts

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnInit } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class NumericLabelDirective implements OnInit {
+    private host;
+    kendoAdditionalNumericLabel: 'red' | 'green' | 'blue' | 'alpha';
+    localizationService: LocalizationService;
+    constructor(host: NumericTextBoxComponent);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumericLabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NumericLabelDirective, "[kendoAdditionalNumericLabel]", never, { "kendoAdditionalNumericLabel": "kendoAdditionalNumericLabel"; "localizationService": "localizationService"; }, {}, never>;
+}

package/colorpicker/color-gradient.component.d.ts

@@ -0,0 +1,281 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2, NgZone, EventEmitter, SimpleChanges, OnChanges, OnDestroy, ChangeDetectorRef, Injector, OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { OutputFormat, HSVA } from './models';
+import { KendoDragEvent } from './events/kendo-drag-event';
+import { ColorInputComponent } from './color-input.component';
+import { SVGIcon } from '@progress/kendo-angular-icons';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class ColorGradientComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
+    private host;
+    private ngZone;
+    private renderer;
+    private cdr;
+    private localizationService;
+    private injector;
+    hostClasses: boolean;
+    get readonlyAttribute(): boolean;
+    get disabledClass(): boolean;
+    get gradientId(): string;
+    direction: string;
+    get hostTabindex(): string;
+    ariaRole: string;
+    get isControlInvalid(): string;
+    get isDisabled(): string | undefined;
+    /**
+     * @hidden
+     */
+    enterHandler(event: any): void;
+    /**
+     * @hidden
+     */
+    escapeHandler(event: any): void;
+    /**
+     * @hidden
+     */
+    focusHandler(ev: any): void;
+    /**
+     * @hidden
+     */
+    id: string;
+    /**
+     * Defines whether the alpha slider will be displayed.
+     *
+     * @default true
+     */
+    opacity: boolean;
+    /**
+     * Sets the disabled state of the ColorGradient.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the read-only state of the ColorGradient.
+     *
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Specifies whether the ColorGradient should display a 'Clear color' button.
+     *
+     * @default false
+     */
+    clearButton: boolean;
+    /**
+     * Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay.
+     *
+     * @default 0
+     */
+    delay: number;
+    /**
+     * Specifies the value of the initially selected color.
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * 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: string);
+    get contrastTool(): string;
+    /**
+     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
+     */
+    set tabindex(value: number);
+    get tabindex(): number;
+    /**
+     * 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: OutputFormat;
+    /**
+     * Fires each time the user selects a new color.
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * @hidden
+     */
+    backgroundColor: string;
+    /**
+     * @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: BehaviorSubject<HSVA>;
+    /**
+     * Indicates whether the ColorGradient or any of its content is focused.
+     */
+    get isFocused(): boolean;
+    /**
+     * @hidden
+     */
+    get alphaSliderValue(): number;
+    /**
+     * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
+     *
+     * @default 5
+     */
+    gradientSliderStep: number;
+    /**
+     * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.
+     *
+     * @default 2
+     */
+    gradientSliderSmallStep: number;
+    gradientDragHandle: ElementRef;
+    inputs: ColorInputComponent;
+    private alphaSlider;
+    private gradientWrapper;
+    private hsvRectangle;
+    /**
+     * @hidden
+     */
+    internalNavigation: boolean;
+    /**
+     * @hidden
+     */
+    dropletSlashIcon: SVGIcon;
+    private _value;
+    private _tabindex;
+    private _contrastTool;
+    private listeners;
+    private hueSliderTouched;
+    private alphaSliderTouched;
+    private updateValues;
+    private changeRequestsSubscription;
+    private dynamicRTLSubscription;
+    private hsvHandleCoordinates;
+    get gradientRect(): ClientRect;
+    /**
+     * @hidden
+     */
+    get hsvSliderValueText(): string;
+    /**
+     * @hidden
+     */
+    get contrastToolVisible(): boolean;
+    /**
+     * @hidden
+     */
+    get innerTabIndex(): number;
+    private control;
+    constructor(host: ElementRef, ngZone: NgZone, renderer: Renderer2, cdr: ChangeDetectorRef, localizationService: LocalizationService, injector: Injector);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /**
+     * Focuses the component.
+     */
+    focus(): void;
+    /**
+     * @hidden
+     */
+    reset(): void;
+    /**
+     * @hidden
+     */
+    handleDragPress(args: KendoDragEvent): void;
+    /**
+     * @hidden
+     */
+    onHandleDrag(args: any): void;
+    /**
+     * @hidden
+     */
+    onHandleRelease(): void;
+    /**
+     * @hidden
+     */
+    onKeyboardAction(args: any): void;
+    /**
+     * @hidden
+     */
+    changePosition(position: MouseEvent): void;
+    /**
+     * @hidden
+     */
+    handleHueSliderChange(hue: number): void;
+    /**
+     * @hidden
+     */
+    handleAlphaSliderChange(alpha: number): void;
+    /**
+     * @hidden
+     */
+    handleInputsValueChange(color: string): void;
+    /**
+     * @hidden
+     */
+    writeValue(value: string): void;
+    /**
+     * @hidden
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * @hidden
+     */
+    get colorGradientHandleTitle(): string;
+    /**
+     * @hidden
+     */
+    get colorGradientHandleAriaLabel(): string;
+    /**
+     * @hidden
+     */
+    get hueSliderTitle(): string;
+    /**
+     * @hidden
+     */
+    get opacitySliderTitle(): string;
+    /**
+     * @hidden
+     */
+    get clearButtonTitle(): string;
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty(): boolean;
+    private notifyNgChanged;
+    private notifyNgTouched;
+    private moveDragHandle;
+    private handleValueChange;
+    private setDragHandleElementPosition;
+    private setAlphaSliderBackground;
+    private setHostElementAriaLabel;
+    private setBackgroundColor;
+    private updateUI;
+    private addEventListeners;
+    private subscribeChanges;
+    private unsubscribeChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorGradientComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "id": "id"; "opacity": "opacity"; "disabled": "disabled"; "readonly": "readonly"; "clearButton": "clearButton"; "delay": "delay"; "value": "value"; "contrastTool": "contrastTool"; "tabindex": "tabindex"; "format": "format"; "gradientSliderStep": "gradientSliderStep"; "gradientSliderSmallStep": "gradientSliderSmallStep"; }, { "valueChange": "valueChange"; }, never, never>;
+}