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

package/esm2022/colorpicker/color-gradient.component.mjs

@@ -29,8 +29,17 @@ import * as i1 from "@progress/kendo-angular-l10n";
 let serial = 0;
 const DEFAULT_SIZE = 'medium';
 /**
- * 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.
+ * Represents the Kendo UI ColorGradient component.
+ *
+ * The ColorGradientComponent lets you select a color by moving a drag handle over a gradient area. You can use it directly or as part of the `kendo-colorpicker`.
+ *
+ * @example
+ * ```html
+ * <kendo-colorgradient [(ngModel)]="color"></kendo-colorgradient>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorPickerMessages}.
  */
 export class ColorGradientComponent {
     host;
@@ -95,19 +104,15 @@ export class ColorGradientComponent {
      */
     id = `k-colorgradient-${serial++}`;
     /**
-     * Defines whether the alpha slider will be displayed.
+     * Shows or hides the alpha slider.
      *
      * @default true
      */
     opacity = true;
     /**
-     * The size property specifies the padding of the ColorGradient internal elements.
+     * Sets the size of the ColorGradient internal elements.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size || DEFAULT_SIZE;
@@ -118,7 +123,7 @@ export class ColorGradientComponent {
         return this._size;
     }
     /**
-     * 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).
+     * Disables the ColorGradient. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -130,19 +135,19 @@ export class ColorGradientComponent {
      */
     readonly = false;
     /**
-     * Specifies whether the ColorGradient should display a 'Clear color' button.
+     * Shows or hides the **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.
+     * Sets the delay (in milliseconds) before the value changes on handle drag.
      *
      * @default 0
      */
     delay = 0;
     /**
-     * Specifies the value of the initially selected color.
+     * Sets the value of the selected color.
      */
     set value(value) {
         this._value = parseColor(value, this.format, this.opacity);
@@ -151,8 +156,7 @@ export class ColorGradientComponent {
         return this._value;
     }
     /**
-     * Enables the color contrast tool. Accepts the background color that will be compared to the selected value.
-     * The tool will calculate the contrast ratio between the two colors.
+     * Enables the color contrast tool that checks the contrast ratio of the selected color against a predefined background color. [See example](slug:contrasttool_colorgradient).
      */
     set contrastTool(value) {
         this._contrastTool = parseColor(value, this.format, this.opacity);
@@ -161,7 +165,7 @@ export class ColorGradientComponent {
         return this._contrastTool;
     }
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
      * @default 0
      */
@@ -179,17 +183,13 @@ export class ColorGradientComponent {
         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.
+     * Sets the output format of the ColorGradient. 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`
+     * @default 'rgba'
      */
     format = DEFAULT_OUTPUT_FORMAT;
     /**
-     * Fires each time the user selects a new color.
+     * Fires when the user selects a new color..
      */
     valueChange = new EventEmitter();
     /**
@@ -205,7 +205,7 @@ export class ColorGradientComponent {
      */
     hsva = new BehaviorSubject({});
     /**
-     * Indicates whether the ColorGradient or any of its content is focused.
+     * Returns `true` if the component or its content is focused.
      */
     get isFocused() {
         if (!(isDocumentAvailable() && isPresent(this.host))) {
@@ -224,13 +224,13 @@ 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.
+     * Sets the step (in pixels) for moving the gradient drag handle with the 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.
+     * Sets the step (in pixels) for moving the gradient drag handle with `Shift+arrow keys`.
      *
      * @default 2
      */

package/esm2022/colorpicker/color-input.component.mjs

@@ -28,38 +28,38 @@ export class ColorInputComponent {
     cdr;
     localizationService;
     /**
-     * The id of the hex input.
+     * Sets the `id` of the hex input.
      */
     focusableId = `k-${guid()}`;
     /**
-     * The color format view.
+     * Sets the color format view.
      */
     formatView;
     /**
-     * The size property specifies the padding of the ColorInput.
+     * Sets the size of the ColorInput.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     size = DEFAULT_SIZE;
     /**
-     * The inputs tabindex.
+     * Sets the `tabindex` of the inputs.
+     * @default -1
      */
     tabindex = -1;
     /**
-     * The color value that will be parsed and populate the hex & rgba inputs.
-     * Required input property.
+     * Sets the color value to parse and populate the hex and RGBA inputs.
      */
     value;
     /**
-     * Sets whether the alpha slider will be shown.
+     * Shows or hides the alpha slider.
+     *
+     * @default true
      */
     opacity = true;
     /**
-     * Sets the disabled state of the ColorInput.
+     * Disables the ColorInput.
+     *
+     * @default false
      */
     disabled = false;
     /**
@@ -69,11 +69,11 @@ export class ColorInputComponent {
      */
     readonly = false;
     /**
-     * Emits a parsed rgba string color.
+     * Emits a parsed RGBA string color.
      */
     valueChange = new EventEmitter();
     /**
-     * Emits when the user tabs out of the last focusable input.
+     * Fires when the user tabs out of the last focusable input.
      */
     tabOut = new EventEmitter();
     colorInputClass = true;
@@ -82,15 +82,15 @@ export class ColorInputComponent {
     blueInput;
     toggleFormatButton;
     /**
-     * The rgba inputs values.
+     * Holds the RGBA input values.
      */
     rgba = {};
     /*
-     * The hex input value.
+     * Holds the hex input value.
      */
     hex;
     /**
-     * Indicates whether any of the inputs are focused.
+     * Returns `true` if any of the inputs are focused.
      */
     get isFocused() {
         if (!(isDocumentAvailable() && isPresent(this.host))) {
@@ -100,7 +100,7 @@ export class ColorInputComponent {
         return this.host.nativeElement.contains(activeElement);
     }
     /**
-     * Indicates whether any of the rgba inputs have value.
+     * Returns `true` if all RGBA inputs have values.
      */
     get rgbaInputValid() {
         return Object.keys(this.rgba).every(key => isPresent(this.rgba[key]));
@@ -192,7 +192,7 @@ export class ColorInputComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", size: "size", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
-            <button 
+            <button
                 kendoButton
                 type="button"
                 fillMode="flat"
@@ -323,7 +323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-colorinput',
                     template: `
         <div class="k-vstack">
-            <button 
+            <button
                 kendoButton
                 type="button"
                 fillMode="flat"

package/esm2022/colorpicker/color-palette.component.mjs

@@ -27,8 +27,17 @@ const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
 const DEFAULT_SIZE = 'medium';
 let serial = 0;
 /**
- * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
- * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
+ * Represents the Kendo UI ColorPalette component.
+ *
+ * The `ColorPaletteComponent` provides a set of predefined palette presets and lets you implement a custom color palette. You can use it directly or as part of the `kendo-colorpicker`.
+ *
+ * @example
+ * ```html
+ * <kendo-colorpalette [palette]="['#fff', '#000']" [(value)]="selectedColor"></kendo-colorpalette>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorPickerMessages}.
  */
 export class ColorPaletteComponent {
     host;
@@ -62,18 +71,14 @@ export class ColorPaletteComponent {
      */
     id = `k-colorpalette-${serial++}`;
     /**
-     * Specifies the output format of the ColorPaletteComponent.
-     * The input value may be in a different format. However, it will be parsed into the output `format`
-     * after the component processes it.
+     * Specifies the output format of the `ColorPaletteComponent`.
+     * The input value may be in a different format. The component parses it into the output `format`.
      *
-     * The supported values are:
-     * * (Default) `hex`
-     * * `rgba`
-     * * `name`
+     * @default 'hex'
      */
     format = 'hex';
     /**
-     * Specifies the value of the initially selected color.
+     * Sets the value of the selected color.
      */
     set value(value) {
         this._value = parseColor(value, this.format);
@@ -82,8 +87,9 @@ export class ColorPaletteComponent {
         return this._value;
     }
     /**
-     * Specifies the number of columns that will be displayed.
-     * Defaults to `10`.
+     * Sets the number of columns to display.
+     *
+     * @default 10
      */
     set columns(value) {
         const minColumnsCount = 1;
@@ -93,12 +99,7 @@ export class ColorPaletteComponent {
         return this._columns;
     }
     /**
-     * The color palette that will be displayed.
-     *
-     * The supported values are:
-     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
-     * * A string with comma-separated colors.
-     * * A string array.
+     * Sets the color palette to display. You can use a predefined palette preset (such as `office`, `basic`, or `apex`), string with comma-separated colors, or an array of string colors.
      */
     set palette(value) {
         if (!isPresent(value)) {
@@ -115,13 +116,9 @@ export class ColorPaletteComponent {
         return this._palette;
     }
     /**
-     * The size property specifies the padding of the ColorPalette internal elements.
+     * Sets the size of the ColorPalette internal elements.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size || DEFAULT_SIZE;
@@ -132,7 +129,9 @@ export class ColorPaletteComponent {
         return this._size;
     }
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
      */
     set tabindex(value) {
         const tabindex = Number(value);
@@ -143,7 +142,7 @@ export class ColorPaletteComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Sets the disabled state of the ColorPalette. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
+     * Disables the ColorPalette. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
      */
     disabled = false;
     /**
@@ -153,7 +152,7 @@ export class ColorPaletteComponent {
      */
     readonly = false;
     /**
-     * Specifies the size of a color cell. The default tile size depends on the `size` of the component.
+     * Sets the size of a color cell. The default tile size depends on the `size` of the component.
      */
     tileSize;
     /**
@@ -166,11 +165,11 @@ export class ColorPaletteComponent {
         return { width: this.tileSize, height: this.tileSize };
     }
     /**
-     * Fires each time the color selection is changed.
+     * Fires when the color selection changes.
      */
     selectionChange = new EventEmitter();
     /**
-     * Fires each time the value is changed.
+     * Fires when the value changes.
      */
     valueChange = new EventEmitter();
     /**

package/esm2022/colorpicker/colorpicker.component.mjs

@@ -40,10 +40,18 @@ const DEFAULT_FILL_MODE = 'solid';
  */
 let nextColorPickerId = 0;
 /**
- * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
+ * Represents the Kendo UI ColorPicker component for Angular.
  *
- * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
- * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
+ * The `ColorPickerComponent` is a tool for choosing colors from Gradient and Palette views
+ * rendered in its popup. You can preview the selected color, revert it to its previous state, or clear it.
+ *
+ * @example
+ * ```html
+ * <kendo-colorpicker [(value)]="selectedColor"></kendo-colorpicker>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorPickerMessages}.
  */
 export class ColorPickerComponent {
     host;
@@ -81,8 +89,8 @@ export class ColorPickerComponent {
      */
     focusableId;
     /**
-     * Specifies the views that will be rendered in the popup.
-     * By default both the gradient and palette views will be rendered.
+     * Specifies the views rendered in the popup.
+     * By default, both the gradient and palette views are rendered.
      */
     views = ['gradient', 'palette'];
     /**
@@ -95,15 +103,12 @@ export class ColorPickerComponent {
         return (this.views && this.views.length > 0) ? this.views[0] : null;
     }
     /**
-     * Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
+     * Enables or disables the adaptive mode.
+     * By default, adaptive rendering is disabled.
      */
     adaptiveMode = 'none';
     /**
-     * Sets the initially active view in the popup. The property supports two-way binding.
-     *
-     * The supported values are:
-     * * `gradient`
-     * * `palette`
+     * Sets the initially active view in the popup. Supports two-way binding.
      */
     activeView;
     /**
@@ -113,7 +118,7 @@ export class ColorPickerComponent {
      */
     readonly = false;
     /**
-     * Sets the disabled state of the ColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
+     * Sets the disabled state of the ColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -121,15 +126,13 @@ export class ColorPickerComponent {
     /**
      * Specifies the output format of the ColorPicker.
      *
-     * 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';
     /**
-     * Specifies the value of the initially selected color.
+     * Sets the value of the selected color.
      */
     set value(value) {
         this._value = parseColor(value, this.format, this.gradientSettings.opacity);
@@ -147,7 +150,7 @@ export class ColorPickerComponent {
         return this._popupSettings;
     }
     /**
-     * Configures the palette that is displayed in the ColorPicker popup.
+     * Configures the palette displayed in the ColorPicker popup.
      */
     set paletteSettings(value) {
         this._paletteSettings = Object.assign(this._paletteSettings, value);
@@ -156,7 +159,7 @@ export class ColorPickerComponent {
         return this._paletteSettings;
     }
     /**
-     * Configures the gradient that is displayed in the ColorPicker popup.
+     * Configures the gradient displayed in the ColorPicker popup.
      */
     set gradientSettings(value) {
         this._gradientSettings = Object.assign(this._gradientSettings, value);
@@ -165,10 +168,8 @@ export class ColorPickerComponent {
         return this._gradientSettings;
     }
     /**
-     * Defines the name of an [existing icon in the Kendo UI theme]({% slug icons %}).
-     * Provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
-     *
-     * For example, `pencil-tools` will be parsed to `k-icon k-i-pencil-tools`.
+     * Defines the name of an existing icon in the Kendo UI theme.
+     * Provide only the name of the icon without the `k-icon` or `k-i-` prefixes.
      */
     icon;
     /**
@@ -179,8 +180,8 @@ export class ColorPickerComponent {
      */
     iconClass;
     /**
-     * Defines an SVGIcon to be rendered within the button.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVGIcon to render within the button.
+     * The input can take either an existing Kendo SVG icon or a custom one.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.icon && this.iconClass) {
@@ -192,22 +193,22 @@ export class ColorPickerComponent {
         return this._svgIcon;
     }
     /**
-     * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * Sets the title of the ActionSheet rendered instead of the Popup on small screens.
      */
     adaptiveTitle = '';
     /**
-     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
-     * By default the ActionSheet does not render a subtitle.
-    */
+     * Sets the subtitle of the ActionSheet rendered instead of the Popup on small screens.
+     * By default, the ActionSheet does not render a subtitle.
+     */
     adaptiveSubtitle;
     /**
-     * Specifies whether the ColorPicker should display a 'Clear color' button.
+     * Specifies whether the ColorPicker displays a **Clear color** button.
      *
      * @default true
      */
     clearButton = true;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
      * @default 0
      */
@@ -220,36 +221,28 @@ export class ColorPickerComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Displays `Apply` and `Cancel` action buttons and color preview panes.
+     * Displays **Apply** and **Cancel** action buttons and color preview panes.
      *
-     * 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
-     * previous state i.e. to the current value.
+     * The **Cancel** button reverts the current selection to its
+     * previous state, i.e., to the current value.
      *
      * @default false
      */
     preview = false;
     /**
-     * Configures the layout of the `Apply` and `Cancel` action buttons.
+     * Configures the layout of the **Apply** and **Cancel** action buttons.
      *
-     * The possible values are:
-     * * `start`
-     * * `center`
-     * * `end` (default)
-     * * `stretch`
+     * @default 'end'
      */
     actionsLayout = 'end';
     /**
      * The size property specifies the padding of the ColorPicker internal elements
      * ([see example]({% slug appearance_colorpicker %}#toc-size)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
@@ -263,12 +256,7 @@ export class ColorPickerComponent {
      * The rounded property specifies the border radius of the ColorPicker
      * ([see example](slug:appearance_colorpicker#toc-roundness)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
@@ -282,11 +270,7 @@ export class ColorPickerComponent {
      * The fillMode property specifies the background and border styles of the ColorPicker
      * ([see example]({% slug appearance_colorpicker %}#toc-fill-mode)).
      *
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
@@ -297,25 +281,25 @@ export class ColorPickerComponent {
         return this._fillMode;
     }
     /**
-     * Fires each time the value is changed.
+     * Fires when the value changes.
      */
     valueChange = new EventEmitter();
     /**
-     * Fires each time the Popup (or ActionSheet in adaptive mode) is about to open.
-     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) will remain closed.
+     * Fires when the Popup (or ActionSheet in adaptive mode) is about to open.
+     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) remains closed.
      */
     open = new EventEmitter();
     /**
-     * Fires each time the Popup (or ActionSheet in adaptive mode) is about to close.
-     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) will remain open.
+     * Fires when the Popup (or ActionSheet in adaptive mode) is about to close.
+     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) remains open.
      */
     close = new EventEmitter();
     /**
-     * Fires each time ColorPicker is focused.
+     * Fires when the ColorPicker is focused.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the ColorPicker is blurred.
+     * Fires when the ColorPicker is blurred.
      */
     onBlur = new EventEmitter();
     /**
@@ -325,19 +309,19 @@ export class ColorPickerComponent {
      */
     cancel = new EventEmitter();
     /**
-     * Fires each time the left side of the ColorPicker wrapper is clicked.
+     * Fires when the left side of the ColorPicker wrapper is clicked.
      * The event is triggered regardless of whether a ColorPicker icon is set or not.
      *
-     * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
+     * The [`ActiveColorClickEvent`]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
      */
     activeColorClick = new EventEmitter();
     /**
      * @hidden
-     * Fires each time the clear button is clicked.
+     * Fires when the clear button is clicked.
      */
     clearButtonClick = 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();