@progress/kendo-angular-gauges 19.1.2-develop.4 → 19.1.2-develop.5

package/fesm2022/progress-kendo-angular-gauges.mjs

@@ -14,29 +14,19 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 
 /**
- * A directive that selects a [template](link:site.data.urls.angular['templatesyntax'])
- * within the `<kendo-arcgauge>` component which will be used for the center template
+ * Represents a directive that allows customizing the center part of the `<kendo-arcgauge>` component.
+ * Use this directive to create a center template
  * ([more information and example]({% slug centertemplate_arcgauge %})).
  *
- * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-arcgauge [value]="value">
- *             <ng-template kendoArcGaugeCenterTemplate let-value="value">
- *                 {{ value }}%
- *             </ng-template>
- *         </kendo-arcgauge>
- *
- *     `
- * })
- * export class AppComponent {
- *   public value: number = 10;
- * }
+ * The template context provides access to the current ArcGauge value through the `value` field.
  *
+ * @example
+ * ```html
+ * <kendo-arcgauge [value]="value">
+ *    <ng-template kendoArcGaugeCenterTemplate let-value="value">
+ *         {{ value }}%
+ *     </ng-template>
+ * </kendo-arcgauge>
  * ```
  */
 class ArcCenterTemplateDirective {
@@ -265,8 +255,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750157245,
-    version: '19.1.2-develop.4',
+    publishDate: 1750431158,
+    version: '19.1.2-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -757,7 +747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * @Component({
  *   selector: 'my-app',
  *   template: `
  *      <kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
@@ -770,29 +760,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * class AppComponent {
  *   public value: number = 10;
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ArcScaleComponent}, {@link ArcLabelsComponent}, {@link ArcGaugeAreaComponent}, {@link ColorsComponent}.
  */
 class ArcGaugeComponent extends GaugeComponent {
     changeDetector;
     /**
-     * The value of the gauge.
+     * Sets the value of the gauge.
      */
     value;
     /**
-     * The color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
+     * Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
      */
     color;
     /**
-     * The color ranges of the value pointer.
+     * Sets the color ranges of the value pointer.
      */
     colors;
     /**
-     * The opacity of the value pointer.
+     * Sets the opacity of the value pointer.
      */
     opacity;
     /**
-     * The scale options of the ArcGauge.
+     * Sets the scale options of the ArcGauge.
      */
     scale;
     centerTemplate;
@@ -819,16 +811,16 @@ class ArcGaugeComponent extends GaugeComponent {
         }
     }
     /**
-     * Exports the gauge as a Drawing `Scene`.
+     * Exports the Gauge as a Drawing `Scene`.
      *
-     * @returns {Promise<Group>} - A promise that will be resolved with the export visual.
+     * @returns A promise that resolves with the export visual.
      */
     exportVisual() {
         return drawDOM(this.element.nativeElement);
     }
     /**
      * Detects the size of the container and redraws the Gauge.
-     * Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
+     * Resizing happens automatically unless you set the `resizeRateLimit` option to `0`.
      */
     resize() {
         super.resize();
@@ -933,12 +925,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options for an ArcGauge color item.
+ * Represents the configuration options for an ArcGauge color item.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * @Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-arcgauge [value]="value">
+ *             <kendo-arcgauge-colors>
+ *                 <kendo-arcgauge-color
+ *                     [from]="0"
+ *                     [to]="50"
+ *                     color="green">
+ *                 </kendo-arcgauge-color>
+ *             </kendo-arcgauge-colors>
+ *         </kendo-arcgauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public value: number = 25;
+ * }
+ * ```
  */
 class ColorComponent extends CollectionItemComponent {
+    /**
+     * Sets the color of the range. Accepts a valid CSS color string, including hex and rgb.
+     */
     color;
+    /**
+     * Sets the opacity of the range.
+     */
     opacity;
+    /**
+     * Sets the start value of the range.
+     */
     from;
+    /**
+     * Sets the end value of the range.
+     */
     to;
     constructor(configurationService, collectionChangesService) {
         super(configurationService, collectionChangesService);
@@ -965,14 +992,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A collection of one or more ArcGauge colors
+ * Represents a collection of one or more ArcGauge colors
  * ([more information and example]({% slug colorranges_arcgauge %})).
  *
  * @example
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * @Component({
  *     selector: 'my-app',
  *     template: `
  *         <kendo-arcgauge [value]="value">
@@ -1003,8 +1030,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *         color: '#f31700'
  *     }];
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorComponent}.
  */
 class ColorsComponent extends CollectionComponent {
     children;
@@ -1028,8 +1057,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options of the ArcGauge area.
- * Represents the entire visible area of the ArcGauge.
+ * Represents the configuration options of the ArcGauge area.
+ * Controls the entire visible area of the ArcGauge.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * @Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-arcgauge [value]="value">
+ *             <kendo-arcgauge-area
+ *                 background="lightgray"
+ *                 [margin]="10">
+ *             </kendo-arcgauge-area>
+ *         </kendo-arcgauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public value: number = 40;
+ * }
+ * ```
  */
 class ArcGaugeAreaComponent extends GaugeAreaComponent {
     configurationService;
@@ -1050,10 +1099,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
 
 /**
- * The configuration options for the scale labels of the RadialGauge.
+ * Configures the configuration options for the scale labels of the RadialGauge.
+ *
+ * @example
+ * ```html
+ * <kendo-radialgauge>
+ *    <kendo-radialgauge-scale>
+ *          <kendo-radialgauge-scale-labels [visible]="true" [format]="'N0'">
+ *          </kendo-radialgauge-scale-labels>
+ *     </kendo-radialgauge-scale>
+ * </kendo-radialgauge>
+ * ```
  */
 class RadialLabelsComponent extends LabelsComponent {
     configurationService;
+    /**
+     * Sepcifies rhe position of the labels relative to the scale.
+     */
     position;
     constructor(configurationService) {
         super('scale.labels', configurationService);
@@ -1074,7 +1136,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options for the scale labels of the ArcGauge.
+ * Represents the configuration options for the scale labels of the ArcGauge.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * @Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-arcgauge [value]="value">
+ *             <kendo-arcgauge-scale>
+ *                 <kendo-arcgauge-scale-labels
+ *                     color="blue"
+ *                     font="12px Arial">
+ *                 </kendo-arcgauge-scale-labels>
+ *             </kendo-arcgauge-scale>
+ *         </kendo-arcgauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public value: number = 50;
+ * }
+ * ```
  */
 class ArcLabelsComponent extends RadialLabelsComponent {
     configurationService;
@@ -1096,15 +1180,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
 
 /**
- * The configuration options for the scale of the ArcGauge
+ * Represents the configuration options for the scale of the ArcGauge
  * ([see example]({% slug scaleoptions_arcgauge %})).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * @Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-arcgauge [value]="value">
+ *             <kendo-arcgauge-scale
+ *                 [startAngle]="-90"
+ *                 [endAngle]="90"
+ *                 [rangeDistance]="10">
+ *             </kendo-arcgauge-scale>
+ *         </kendo-arcgauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public value: number = 30;
+ * }
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ArcLabelsComponent}
  */
 class ArcScaleComponent extends ScaleComponent {
     configurationService;
+    /**
+     * Sets the scale labels configuration.
+     */
     labels;
+    /**
+     * Sets the distance between the scale ranges in pixels.
+     */
     rangeDistance;
+    /**
+     * Sets the line cap style for the scale ranges.
+     */
     rangeLineCap;
+    /**
+     * Sets the start angle of the Gauge in degrees.
+     */
     startAngle;
+    /**
+     * Sets the end angle of the Gauge in degrees.
+     */
     endAngle;
     constructor(configurationService) {
         super('scale', configurationService);
@@ -1133,29 +1256,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A directive that selects a [template](link:site.data.urls.angular['templatesyntax'])
- * within the `<kendo-circulargauge>` component which will be used for the center template
+ * Represents a directive that allows customizing the center part of the `<kendo-circulargauge>` component
  * ([more information and example]({% slug centertemplate_circulargauge %})).
  *
- * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-circulargauge [value]="value">
- *             <ng-template kendoCircularGaugeCenterTemplate let-value="value">
- *                 {{ value }}%
- *             </ng-template>
- *         </kendo-circulargauge>
- *
- *     `
- * })
- * export class AppComponent {
- *   public value: number = 10;
- * }
+ * The template context provides access to the current CircularGauge value through the `value` field.
  *
+ * @example
+ * ```html
+ * <kendo-circulargauge [value]="value">
+ *     <ng-template kendoCircularGaugeCenterTemplate let-value="value">
+ *          { value }}%
+ *     </ng-template>
+ * </kendo-circulargauge>
  * ```
  */
 class CircularGaugeCenterTemplateDirective {
@@ -1196,12 +1308,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * class AppComponent {
  *   public value: number = 10;
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link CircularGaugeScaleComponent}, {@link CircularGaugeLabelsComponent}, {@link CircularGaugeAreaComponent}.
  */
 class CircularGaugeComponent extends ArcGaugeComponent {
     /**
-     * The scale options of the gauge.
+     * Specifies the scale options of the Gauge.
      */
     scale;
     centerTemplate;
@@ -1257,8 +1371,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options of the Circular Gauge area.
- * Represents the entire visible area of the Circular Gauge.
+ * Represents the configuration options of the Circular Gauge area.
+ * Sets up the entire visible area of the CircularGauge.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-circulargauge>
+ *       <kendo-circulargauge-area background="lightblue" margin="10">
+ *       </kendo-circulargauge-area>
+ *     </kendo-circulargauge>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
  */
 class CircularGaugeAreaComponent extends ArcGaugeAreaComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -1274,7 +1402,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * The configuration options for the scale labels of the Circular Gauge.
+ * Represents the configuration options for the scale labels of the Circular Gauge.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * @Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-circulargauge [value]="value">
+ *             <kendo-circulargauge-scale>
+ *                 <kendo-circulargauge-scale-labels
+ *                     color="blue"
+ *                     font="12px Arial">
+ *                 </kendo-circulargauge-scale-labels>
+ *             </kendo-circulargauge-scale>
+ *         </kendo-circulargauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public value: number = 75;
+ * }
+ * ```
  */
 class CircularGaugeLabelsComponent extends ArcLabelsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeLabelsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -1290,8 +1440,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * The configuration options for the scale of the Circular Gauge
+ * Represents the configuration options for the scale of the Circular Gauge
  * ([see example]({% slug scaleoptions_circulargauge %})).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-circulargauge>
+ *       <kendo-circulargauge-scale [min]="0" [max]="100">
+ *       </kendo-circulargauge-scale>
+ *     </kendo-circulargauge>
+ *   `
+ * })
+ * class AppComponent { }
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link CircularGaugeLabelsComponent}
  */
 class CircularGaugeScaleComponent extends ArcScaleComponent {
     /**
@@ -1311,8 +1478,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * The configuration options for the LinearGauge area.
- * Represents the entire visible area of the LinearGauge.
+ * Represents the configuration options for the LinearGauge area.
+ * This component controls the entire visible area of the LinearGauge.
+ *
+ * @example
+ * ```html
+ * <kendo-lineargauge>
+ *   <kendo-lineargauge-area background="lightblue" [border]="{ width: 2 }">
+ *   </kendo-lineargauge-area>
+ * </kendo-lineargauge>
+ * ```
  */
 class LinearGaugeAreaComponent extends GaugeAreaComponent {
     configurationService;
@@ -1333,7 +1508,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
 
 /**
- * The configuration options for the scale labels of the LinearGauge.
+ * Represents the configuration options for the LinearGauge scale labels.
+ *
+ * @example
+ * ```html
+ * <kendo-lineargauge>
+ *    <kendo-lineargauge-scale>
+ *          <kendo-lineargauge-scale-labels [visible]="true" [format]="'N0'">
+ *          </kendo-lineargauge-scale-labels>
+ *     </kendo-lineargauge-scale>
+ * </kendo-lineargauge>
+ * ```
  */
 class LinearLabelsComponent extends LabelsComponent {
     configurationService;
@@ -1360,7 +1545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * _Component({
  *   selector: 'my-app',
  *   template: `
  *      <kendo-lineargauge [pointer]="{ value: value }">
@@ -1370,16 +1555,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * class AppComponent {
  *   public value: number = 10;
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link LinearScaleComponent}, {@link LinearLabelsComponent}, {@link LinearGaugeAreaComponent}, {@link LinearPointersComponent}, {@link LinearRangesComponent}.
  */
 class LinearGaugeComponent extends GaugeComponent {
     /**
-     * The configuration of the pointers.
+     * Configures the pointers of the LinearGauge.
      */
     pointer;
     /**
-     * The configuration of the scale.
+     * Configures the scale of the LinearGauge.
      */
     scale;
     constructor(configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
@@ -1429,15 +1616,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options for a pointer item of a LinearGauge.
+ * Represents the configuration options for a pointer item of a LinearGauge.
+ *
+ * @example
+ * ```html
+ * <kendo-lineargauge>
+ *    <kendo-lineargauge-pointers>
+ *          <kendo-lineargauge-pointer [value]="35" color="#ff4500" shape="barIndicator">
+ *          </kendo-lineargauge-pointer>
+ *    </kendo-lineargauge-pointers>
+ * </kendo-lineargauge>
+ * ```
  */
 class LinearPointerComponent extends CollectionItemComponent {
+    /**
+     * Configures the border settings of the pointer.
+     */
     border;
+    /**
+     * Specifies the color of the pointer.
+     */
     color;
+    /**
+     * Sets the margin of the pointer. You can set this option to a number or an object with specific margin values.
+     */
     margin;
+    /**
+     * Controls the transparency of the pointer. The value ranges from 0 (transparent) to 1 (opaque).
+     */
     opacity;
+    /**
+     * Defines the shape of the pointer.
+     */
     shape;
+    /**
+     * Sets the size of the pointer in pixels.
+     */
     size;
+    /**
+     * Specifies the value that the pointer displays on the scale.
+     */
     value;
     constructor(configurationService, collectionChangesService) {
         super(configurationService, collectionChangesService);
@@ -1470,14 +1688,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A collection of one or more LinearGauge pointers
+ * Represents a collection of one or more LinearGauge pointers
  * ([more information]({% slug multiplepointers_lineargauge %})).
  *
  * @example
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * @Component({
  *     selector: 'my-app',
  *     template: `
  *         <kendo-lineargauge>
@@ -1501,8 +1719,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *         color: '#8b0000'
  *     }];
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link LinearPointerComponent}
  */
 class LinearPointersComponent extends CollectionComponent {
     children;
@@ -1526,7 +1746,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options for a scale range item of a LinearGauge.
+ * Represents the configuration options for a scale range item of a LinearGauge.
+ *
+ * @example
+ * ```html
+ * <kendo-lineargauge>
+ *    <kendo-lineargauge-scale>
+ *        <kendo-lineargauge-scale-ranges>
+ *            <kendo-lineargauge-scale-range *ngFor="let range of ranges" [from]="range.from" [to]="range.to" [color]="range.color">
+ *            </kendo-lineargauge-scale-range>
+ *          </kendo-lineargauge-scale-ranges>
+ *    </kendo-lineargauge-scale>
+ * </kendo-lineargauge>
+ * ```
  */
 class LinearRangeComponent extends RangeComponent {
     constructor(configurationService, collectionChangesService) {
@@ -1546,14 +1778,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; } });
 
 /**
- * A collection of one or more LinearGauge scale ranges
+ * Represents a collection of one or more LinearGauge scale ranges
  * ([more information and example]({% slug scaleranghes_lineargauge %})).
  *
+ * You can use this component to define multiple ranges on your LinearGauge scale. Each range displays a colored segment
+ * that highlights specific value intervals on the LinearGauge.
+ *
  * @example
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * @Component({
  *     selector: 'my-app',
  *     template: `
  *         <kendo-lineargauge>
@@ -1582,8 +1817,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *         color: '#78d237'
  *     }];
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link LinearRangeComponent}
  */
 class LinearRangesComponent extends CollectionComponent {
     children;
@@ -1607,14 +1844,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options for the scale of the LinearGauge
+ * Represents the configuration options for the scale of the LinearGauge
  * ([see example]({% slug scaleoptions_lineargauge %})).
+ *
+ * @example
+ * ```html
+ * <kendo-lineargauge>
+ *     <kendo-lineargauge-scale [mirror]="true" [vertical]="false">
+ *     </kendo-lineargauge-scale>
+ * </kendo-lineargauge>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link LinearLabelsComponent}, {@link LinearRangesComponent}.
  */
 class LinearScaleComponent extends ScaleComponent {
     configurationService;
+    /**
+     * Configures the appearance of the scale line.
+     */
     line;
+    /**
+     * Configures the ranges that are displayed on the scale.
+     */
     ranges;
+    /**
+     * Mirrors the scale labels and ticks. When you set this option to `true`, the labels and ticks appear on the opposite side of the scale.
+     *
+     * @default false
+     */
     mirror;
+    /**
+     * Sets the orientation of the scale. When you set this option to `false`, the scale displays horizontally.
+     *
+     * @default true
+     */
     vertical;
     constructor(configurationService) {
         super('scale', configurationService);
@@ -1641,8 +1905,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options for the RadialGauge area.
- * Represents the entire visible area of the RadialGauge.
+ * Represents the configuration options for the RadialGauge area.
+ * This component controls the entire visible area of the RadialGauge.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-radialgauge-area background="lightblue">
+ *     </kendo-radialgauge-area>
+ *   `
+ * })
+ * class AppComponent {
+ * }
+ * ```
  */
 class RadialGaugeAreaComponent extends GaugeAreaComponent {
     configurationService;
@@ -1663,12 +1942,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
 
 /**
- * The configuration options for a pointer item of a RadialGauge.
+ * Represents the configuration options for a pointer in the RadialGauge.
+ *
+ * @example
+ * ```html
+ * <kendo-radialgauge>
+ *    <kendo-radialgauge-pointers>
+ *          <kendo-radialgauge-pointer [value]="35" color="#ff4500" shape="barIndicator">
+ *          </kendo-radialgauge-pointer>
+ *    </kendo-radialgauge-pointers>
+ * </kendo-radialgauge>
+ * ```
  */
 class RadialPointerComponent extends CollectionItemComponent {
+    /**
+     * Configures the pointer cap.
+     */
     cap;
+    /**
+     * Specifies the color of the pointer.
+     */
     color;
+    /**
+     * Sets the length of the pointer as a percentage of the scale radius.
+     */
     length;
+    /**
+     * Sets the value of the pointer.
+     */
     value;
     constructor(configurationService, collectionChangesService) {
         super(configurationService, collectionChangesService);
@@ -1695,14 +1996,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A collection of one or more RadialGauge pointers
+ * Represents a collection of one or more RadialGauge pointers
  * ([more information and example]({% slug multiplepointers_radialgauge %})).
  *
+ * Use this component to group multiple pointer components within a RadialGauge.
+ * Each pointer displays a specific value on the gauge.
+ *
  * @example
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * @Component({
  *     selector: 'my-app',
  *     template: `
  *         <kendo-radialgauge>
@@ -1726,8 +2030,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *         color: '#78d237'
  *     }];
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link RadialPointerComponent}
  */
 class RadialPointersComponent extends CollectionComponent {
     children;
@@ -1757,26 +2063,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * @Component({
  *   selector: 'my-app',
  *   template: `
  *      <kendo-radialgauge [pointer]="{ value: value }">
  *      </kendo-radialgauge>
  *   `
  * })
- * class AppComponent {
+ * export class AppComponent {
  *   public value: number = 10;
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link RadialGaugeAreaComponent}, {@link RadialLabelsComponent}, {@link RadialPointersComponent}, {@link RadialRangesComponent}, {@link RadialScaleComponent}.
  */
 class RadialGaugeComponent extends GaugeComponent {
     /**
-     * The configuration of the pointers.
+     * Sets the configuration of the pointers.
+     * You can configure single or multiple pointers for the RadialGauge.
      */
     pointer;
     /**
-     * The configuration of the scale.
+     * Sets the configuration of the scale.
+     * The scale defines the range, appearance, and behavior of the gauge.
      */
     scale;
     constructor(configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
@@ -1826,7 +2136,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options for a scale range item of a RadialGauge.
+ * Represents the configuration options for a range in the RadialGauge scale.
+ *
+ * @example
+ * ```html
+ * <kendo-radialgauge>
+ *    <kendo-radialgauge-scale>
+ *        <kendo-radialgauge-scale-ranges>
+ *            <kendo-radialgauge-scale-range [from]="0" [to]="50" color="red">
+ *            </kendo-radialgauge-scale-range>
+ *          </kendo-radialgauge-scale-ranges>
+ *    </kendo-radialgauge-scale>
+ * </kendo-radialgauge>
+ * ```
  */
 class RadialRangeComponent extends RangeComponent {
     constructor(configurationService, collectionChangesService) {
@@ -1846,14 +2168,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; } });
 
 /**
- * A collection of one or more RadialGauge scale ranges
+ * Represents a collection of one or more RadialGauge scale ranges
  * ([more information and example]({% slug scaleranghes_radialgauge %})).
  *
+ * Use this component to define multiple ranges on your RadialGauge scale.
+ * Each range displays a colored segment that highlights specific value intervals.
+ *
  * @example
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * @Component({
  *     selector: 'my-app',
  *     template: `
  *         <kendo-radialgauge>
@@ -1882,8 +2207,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *         color: '#78d237'
  *     }];
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link RadialRangeComponent}
  */
 class RadialRangesComponent extends CollectionComponent {
     children;
@@ -1907,15 +2234,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options for the scale of the RadialGauge
+ * Represents the configuration options for the scale of a RadialGauge
  * ([more information and example]({% slug scaleoptions_radialgauge %})).
+ *
+ * @example
+ * ```html
+ * <kendo-radialgauge>
+ *    <kendo-radialgauge-scale [startAngle]="0" [endAngle]="180">
+ *    </kendo-radialgauge-scale>
+ * </kendo-radialgauge>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link RadialLabelsComponent}, {@link RadialRangesComponent}
  */
 class RadialScaleComponent extends ScaleComponent {
     configurationService;
+    /**
+     * Configures the scale labels.
+     */
     labels;
+    /**
+     * Specifies the distance between the scale ranges and the ticks.
+     */
     rangeDistance;
+    /**
+     * Sets the ranges of the scale.
+     */
     ranges;
+    /**
+     * Specifies the start angle of the Gauge in degrees.
+     */
     startAngle;
+    /**
+     * Specifies the end angle of the Gauge in degrees.
+     */
     endAngle;
     constructor(configurationService) {
         super('scale', configurationService);
@@ -1944,7 +2297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Utility array that contains all `ArcGauge` related components and directives
+ * Use this utility array to access all ArcGauge-related components and directives in a standalone Angular component.
  */
 const KENDO_ARCGAUGE = [
     ArcGaugeComponent,
@@ -1956,7 +2309,7 @@ const KENDO_ARCGAUGE = [
     ColorComponent
 ];
 /**
- * Utility array that contains all `CircularGauge` related components and directives
+ * Use this utility array to access all CircularGauge-related components and directives in a standalone Angular component.
  */
 const KENDO_CIRCULARGAUGE = [
     CircularGaugeComponent,
@@ -1966,7 +2319,7 @@ const KENDO_CIRCULARGAUGE = [
     CircularGaugeLabelsComponent
 ];
 /**
- * Utility array that contains all `LinearGauge` related components and directives
+ * Use this utility array to access all LinearGauge-related components and directives in a standalone Angular component.
  */
 const KENDO_LINEARGAUGE = [
     LinearGaugeComponent,
@@ -1979,7 +2332,7 @@ const KENDO_LINEARGAUGE = [
     LinearRangesComponent
 ];
 /**
- * Utility array that contains all `RadialGauge` related components and directives
+ * Use this utility array to access all RadialGauge-related components and directives in a standalone Angular component.
  */
 const KENDO_RADIALGAUGE = [
     RadialGaugeComponent,
@@ -1992,7 +2345,7 @@ const KENDO_RADIALGAUGE = [
     RadialRangesComponent
 ];
 /**
- * Utility array that contains all `@progress/kendo-angular-gauges` related components and directives
+ * Use this utility array to access all `@progress/kendo-angular-gauges`-related components and directives in a standalone Angular component.
  */
 const KENDO_GAUGES = [
     ...KENDO_ARCGAUGE,
@@ -2003,25 +2356,24 @@ const KENDO_GAUGES = [
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * A [module](link:site.data.urls.angular['ngmodules']) that includes the ArcGauge component and its directives.
- * Imports the `ArcGaugeModule` into your application
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) definition that includes the ArcGauge component and its directives.
+ * Import the `ArcGaugeModule` into your application
  * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
  * that will use the ArcGauge component.
  *
  * @example
- * ```ts-no-run
+ * ```typescript
  * import { NgModule } from '@angular/core';
  * import { BrowserModule } from '@angular/platform-browser';
  * import { ArcGaugeModule } from '@progress/kendo-angular-gauges';
  * import { AppComponent } from './app.component';
  *
- * _@NgModule({
+ * @NgModule({
  *     bootstrap:    [AppComponent],
  *     declarations: [AppComponent],
  *     imports:      [BrowserModule, ArcGaugeModule]
  * })
- * export class AppModule {
- * }
+ * export class AppModule { }
  * ```
  */
 class ArcGaugeModule {
@@ -2040,19 +2392,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * A [module](link:site.data.urls.angular['ngmodules']) that includes the LinearGauge component and its directives.
- * Imports the `LinearGaugeModule` into your application
+ * Represents the [NgModule](link:site.data.urls.angular['ngmodules']) definition that includes the LinearGauge component and its directives.
+ * Import the `LinearGaugeModule` into your application
  * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
  * that will use the LinearGauge component.
  *
  * @example
- * ```ts-no-run
+ * ```ts
  * import { NgModule } from '@angular/core';
  * import { BrowserModule } from '@angular/platform-browser';
  * import { LinearGaugeModule } from '@progress/kendo-angular-gauges';
  * import { AppComponent } from './app.component';
  *
- * _@NgModule({
+ * @NgModule({
  *     bootstrap:    [AppComponent],
  *     declarations: [AppComponent],
  *     imports:      [BrowserModule, LinearGaugeModule]
@@ -2077,19 +2429,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * A [module](link:site.data.urls.angular['ngmodules']) that includes the RadialGauge component and its directives.
- * Imports the `RadialGaugeModule` into your application
+ * Represents the [NgModule](link:site.data.urls.angular['ngmodules']) definition that includes the RadialGauge component and its directives.
+ * Import the RadialGaugeModule into your application
  * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
- * that will use the RadialGauge component.
+ * that uses the RadialGauge component.
  *
  * @example
- * ```ts-no-run
+ * ```ts
  * import { NgModule } from '@angular/core';
  * import { BrowserModule } from '@angular/platform-browser';
  * import { RadialGaugeModule } from '@progress/kendo-angular-gauges';
  * import { AppComponent } from './app.component';
  *
- * _@NgModule({
+ * @NgModule({
  *     bootstrap:    [AppComponent],
  *     declarations: [AppComponent],
  *     imports:      [BrowserModule, RadialGaugeModule]
@@ -2114,25 +2466,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * A [module](link:site.data.urls.angular['ngmodules']) that includes the CircularGauge component and its directives.
- * Imports the `CircularGaugeModule` into your application
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) definition that includes the CircularGauge component and its directives.
+ * Import the `CircularGaugeModule` into your application
  * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
- * that will use the CircularGauge component.
+ * that uses the CircularGauge component.
  *
  * @example
- * ```ts-no-run
+ * ```ts
  * import { NgModule } from '@angular/core';
  * import { BrowserModule } from '@angular/platform-browser';
  * import { CircularGaugeModule } from '@progress/kendo-angular-gauges';
  * import { AppComponent } from './app.component';
  *
- * _@NgModule({
+ * @NgModule({
  *     bootstrap:    [AppComponent],
  *     declarations: [AppComponent],
  *     imports:      [BrowserModule, CircularGaugeModule]
  * })
- * export class AppModule {
- * }
+ * export class AppModule { }
  * ```
  */
 class CircularGaugeModule {
@@ -2151,9 +2502,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * A [module](link:site.data.urls.angular['ngmodules']) that includes all Gauge components and directives.
+ * Represents the [NgModule](link:site.data.urls.angular['ngmodules']) definition that includes all Gauge components and directives.
  *
- * Imports the `GaugesModule` into your application
+ * Import the `GaugesModule` into your application
  * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
  * that will use the Gauge components.
  *
@@ -2161,7 +2512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * ```ts-no-run
  * import { NgModule } from '@angular/core';
  * import { BrowserModule } from '@angular/platform-browser';
- * import { GaugesModule } from '@progress/kendo-angular-charts';
+ * import { GaugesModule } from '@progress/kendo-angular-gauges';
  * import { AppComponent } from './app.component';
  *
  * _@NgModule({