@progress/kendo-angular-inputs 19.1.1-develop.2 → 19.1.2-develop.1

package/esm2022/colorpicker/events/active-color-click-event.mjs

@@ -3,33 +3,29 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Fires each time the left side of the ColorPicker wrapper is clicked.
- * The event is triggered regardless of whether a ColorPicker icon is set or not.
+ * Fires when you click the left side of the ColorPicker wrapper.
+ * The event triggers whether you set a ColorPicker icon or not.
  *
- * Provides information about the current active color and gives the option to prevent the opening of the popup.
+ * Provides information about the current active color and lets you prevent the popup from opening.
  *
  * @example
- *
- * ```ts-no-run
- * _@Component({
+ * ```typescript
+ * @Component({
  *   selector: 'my-app',
  *   template: `
  *       <kendo-colorpicker
  *           [icon]="'edit-tools'"
  *           [value]="'#900'"
- *           (activeColorClick)="handleActiveColorClick($event)"
+ *           (activeColorClick)="onColorClick($event)"
  *       >
  *       </kendo-colorpicker>
  *   `
  * })
  * class AppComponent {
- *     public handleActiveColorClick(event: ActiveColorClickEvent): void {
+ *     public onColorClick(event: ActiveColorClickEvent): void {
  *         event.preventOpen();
- *
- *         console.log('Open prevented:', event.isOpenPrevented());
- *         console.log('Current color:', event.color);
  *     }
- *  }
+ * }
  * ```
  */
 export class ActiveColorClickEvent {
@@ -43,7 +39,7 @@ export class ActiveColorClickEvent {
         this.color = color;
     }
     /**
-     * Prevents the opening of the popup.
+     * Prevents the popup from opening.
      */
     preventOpen() {
         this.openPrevented = true;
@@ -51,7 +47,7 @@ export class ActiveColorClickEvent {
     /**
      * Returns `true` if the popup opening is prevented by any of its subscribers.
      *
-     * @returns - Returns `true` if the open action was prevented. Otherwise, returns `false`.
+     * @returns Returns `true` if the open action was prevented. Otherwise, returns `false`.
      */
     isOpenPrevented() {
         return this.openPrevented;

package/esm2022/colorpicker/events/cancel-event.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
- * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
+ * Provides the arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
  */
 export class ColorPickerCancelEvent extends PreventableEvent {
     /**

package/esm2022/colorpicker/events/close-event.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
- * Arguments for the `close` event of the ColorPicker component.
+ * Provides the arguments for the `close` event of the ColorPicker component.
  */
 export class ColorPickerCloseEvent extends PreventableEvent {
 }

package/esm2022/colorpicker/events/open-event.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
- * Arguments for the `open` event of the ColorPicker component.
+ * Provides the arguments for the `open` event of the ColorPicker component.
  */
 export class ColorPickerOpenEvent extends PreventableEvent {
 }

package/esm2022/colorpicker/flatcolorpicker.component.mjs

@@ -29,10 +29,17 @@ import * as i1 from "./services/flatcolorpicker.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 const DEFAULT_SIZE = 'medium';
 /**
- * Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
+ * Represents the Kendo UI FlatColorPicker component for Angular.
  *
- * The FlatColorPicker is a powerful tool which allows the user to choose colors through palettes with predefined sets of colors and
- * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
+ * The `FlatColorPickerComponent` lets you choose colors through palettes with predefined sets of colors and through a gradient that renders an HSV canvas. You can preview the selected color, revert it to its previous state, or clear it.
+ *
+ * @example
+ * ```html
+ * <kendo-flatcolorpicker [(value)]="selectedColor"></kendo-flatcolorpicker>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorPickerMessages}.
  */
 export class FlatColorPickerComponent {
     host;
@@ -91,7 +98,7 @@ export class FlatColorPickerComponent {
      */
     readonly = false;
     /**
-     * Sets the disabled state of the FlatColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
+     * Sets the disabled state of the FlatColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -99,11 +106,9 @@ export class FlatColorPickerComponent {
     /**
      * Specifies the output format of the FlatColorPicker.
      *
-     * If the input value is in a different format, it will be parsed into the specified output `format`.
+     * If the input value is in a different format, the component parses it into the specified output `format`.
      *
-     * The supported values are:
-     * * `rgba` (default)
-     * * `hex`
+     * @default 'rgba'
      */
     format = 'rgba';
     /**
@@ -134,7 +139,7 @@ export class FlatColorPickerComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Specifies whether the FlatColorPicker should display a 'Clear color' button.
+     * Specifies whether the FlatColorPicker displays a **Clear color** button.
      *
      * @default true
      */
@@ -142,31 +147,27 @@ export class FlatColorPickerComponent {
     /**
      * Displays `Apply` and `Cancel` action buttons and a color preview pane.
      *
-     * When enabled, the component value will not change immediately upon
-     * color selection, but only after the `Apply` button is clicked.
+     * When enabled, the component value does not change immediately upon
+     * color selection, but only after the **Apply** button is clicked.
      *
-     * The `Cancel` button reverts the current selection to its
-     * initial state i.e. to the current value.
+     * The **Cancel** button reverts the current selection to its
+     * initial state, i.e., to the current value.
      *
      * @default true
      */
     preview = true;
     /**
      * Configures the layout of the `Apply` and `Cancel` action buttons.
-     * * `start`
-     * * `center`
-     * * `end` (default)
-     * * `stretch`
+     *
+     * @default 'end'
      */
     actionsLayout = 'end';
     /**
-     * Sets the initially active view in the FlatColorPicker. The property supports two-way binding.
-     * * `gradient` (default)
-     * * `palette`
+     * Sets the initially active view in the FlatColorPicker. Supports two-way binding.
      */
     activeView;
     /**
-     * Specifies the views that will be rendered. Default value is gradient and palette.
+     * Specifies the views to render. The default value is gradient and palette.
      */
     views = ['gradient', 'palette'];
     /**
@@ -192,13 +193,9 @@ export class FlatColorPickerComponent {
         return this._paletteSettings;
     }
     /**
-     * The size property specifies the padding of the FlatColorPicker internal elements.
+     * Sets the size of the FlatColorPicker internal elements.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size || DEFAULT_SIZE;
@@ -209,7 +206,7 @@ export class FlatColorPickerComponent {
         return this._size;
     }
     /**
-     * Fires each time the component value is changed.
+     * Fires when the component value changes.
      */
     valueChange = new EventEmitter();
     /**
@@ -219,7 +216,7 @@ export class FlatColorPickerComponent {
      */
     cancel = new EventEmitter();
     /**
-     * Fires each time the view is about to change.
+     * Fires when the view is about to change.
      * Used to provide a two-way binding for the `activeView` property.
      */
     activeViewChange = new EventEmitter();

package/esm2022/colorpicker/localization/custom-messages.component.mjs

@@ -8,7 +8,15 @@ import { ColorPickerMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Custom component messages override default component messages.
+ * Overrides the default component messages for the ColorPicker.
+ *
+ * @example
+ * ```html
+ * <kendo-colorpicker-messages
+ *   [applyButton]="'Apply custom'"
+ *   [cancelButton]="'Cancel custom'">
+ * </kendo-colorpicker-messages>
+ * ```
  */
 export class ColorPickerCustomMessagesComponent extends ColorPickerMessages {
     service;

package/esm2022/colorpicker/localization/messages.mjs

@@ -10,119 +10,119 @@ import * as i0 from "@angular/core";
  */
 export class ColorPickerMessages extends ComponentMessages {
     /**
-     * The aria-label applied to the ColorPalette component when the value is empty.
+     * Sets the `aria-label` for the ColorPalette component when the value is empty.
      */
     colorPaletteNoColor;
     /**
-     * The aria-label applied to the ColorGradient component when the value is empty.
+     * Sets the `aria-label` for the ColorGradient component when the value is empty.
      */
     colorGradientNoColor;
     /**
-     * The aria-label applied to the FlatColorPicker component when the value is empty.
+     * Sets the `aria-label` for the FlatColorPicker component when the value is empty.
      */
     flatColorPickerNoColor;
     /**
-     * The aria-label applied to the ColorPicker component when the value is empty.
+     * Sets the `aria-label` for the ColorPicker component when the value is empty.
      */
     colorPickerNoColor;
     /**
-     * The title for the gradient color drag handle chooser.
+     * Sets the title for the gradient color drag handle chooser.
      */
     colorGradientHandle;
     /**
-     * The title for the clear button.
+     * Sets the title for the clear button.
      */
     clearButton;
     /**
-     * The title for the hue slider handle.
+     * Sets the title for the hue slider handle.
      */
     hueSliderHandle;
     /**
-     * The title for the opacity slider handle.
+     * Sets the title for the opacity slider handle.
      */
     opacitySliderHandle;
     /**
-     * The placeholder for the HEX color input.
+     * Sets the placeholder for the HEX color input.
      */
     hexInputPlaceholder;
     /**
-     * The placeholder for the red color input.
+     * Sets the placeholder for the red color input.
      */
     redInputPlaceholder;
     /**
-     * The placeholder for the green color input.
+     * Sets the placeholder for the green color input.
      */
     greenInputPlaceholder;
     /**
-     * The placeholder for the blue color input.
+     * Sets the placeholder for the blue color input.
      */
     blueInputPlaceholder;
     /**
-     * The placeholder for the alpha input.
+     * Sets the placeholder for the alpha input.
      */
     alphaInputPlaceholder;
     /**
-     * The aria-label attribute of the red color input.
+     * Sets the `aria-label` for the red color input.
      */
     redChannelLabel;
     /**
-     * The aria-label attribute of the green color input.
+     * Sets the `aria-label` for the green color input.
      */
     greenChannelLabel;
     /**
-     * The aria-label attribute of the blue color input.
+     * Sets the `aria-label` for the blue color input.
      */
     blueChannelLabel;
     /**
-     * The aria-label attribute of the alpha color input.
+     * Sets the `aria-label` for the alpha color input.
      */
     alphaChannelLabel;
     /**
-     * The "Pass" message for the contrast tool.
+     * Sets the "Pass" message for the contrast tool.
      */
     passContrast;
     /**
-     * The "Fail" message for the contrast tool.
+     * Sets the "Fail" message for the contrast tool.
      */
     failContrast;
     /**
-     * The "Contrast ratio" message for the contrast tool.
+     * Sets the "Contrast ratio" message for the contrast tool.
      */
     contrastRatio;
     /**
-     * The message for the color preview pane.
+     * Sets the message for the color preview pane.
      */
     previewColor;
     /**
-     * The message for the selected color pane.
+     * Sets the message for the selected color pane.
      */
     revertSelection;
     /**
-     * The message for the gradient view button.
+     * Sets the message for the gradient view button.
      */
     gradientView;
     /**
-     * The message for the palette view button.
+     * Sets the message for the palette view button.
      */
     paletteView;
     /**
-     * The message for the input format toggle button.
+     * Sets the message for the input format toggle button.
      */
     formatButton;
     /**
-     * The message for the Apply action button.
+     * Sets the message for the **Apply** action button.
      */
     applyButton;
     /**
-     * The message for the Cancel action button.
+     * Sets the message for the **Cancel** action button.
      */
     cancelButton;
     /**
-     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     * Sets the title of the **Close** button for the ActionSheet in adaptive mode.
      */
     adaptiveCloseButtonTitle;
     /**
-     * The title for the ActionSheet when in adaptive mode.
+     * Sets the title for the ActionSheet in adaptive mode.
      */
     adaptiveTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });

package/esm2022/colorpicker.module.mjs

@@ -16,8 +16,24 @@ import * as i4 from "./colorpicker/color-gradient.component";
 import * as i5 from "./colorpicker/color-palette.component";
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the ColorPicker.
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the ColorPicker.
+ *
+ * Use this module to add ColorPicker features to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { ColorPickerModule } from '@progress/kendo-angular-inputs';
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, ColorPickerModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
  */
 export class ColorPickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/common/radio-checkbox.base.mjs

@@ -61,11 +61,6 @@ export class RadioCheckBoxBase {
      *
      * @default 'medium'
      *
-     * The possible values are:
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `none`
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
@@ -97,13 +92,11 @@ export class RadioCheckBoxBase {
     /**
      * Fires each time the user focuses the component.
      *
-     * > To wire the event programmatically, use the `onFocus` property.
      */
     onFocus = new EventEmitter();
     /**
      * Fires each time the component gets blurred.
      *
-     * > To wire the event programmatically, use the `onBlur` property.
      */
     onBlur = new EventEmitter();
     /**