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

package/esm2022/arc-gauge/arc-gauge.module.mjs

@@ -15,25 +15,24 @@ import * as i6 from "./colors.component";
 import * as i7 from "./color.component";
 // 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 { }
  * ```
  */
 export class ArcGaugeModule {

package/esm2022/arc-gauge/color.component.mjs

@@ -8,12 +8,47 @@ import { CollectionItemComponent } from '../base-components';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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;
+ * }
+ * ```
  */
 export 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);

package/esm2022/arc-gauge/colors.component.mjs

@@ -9,14 +9,14 @@ import { CollectionChangesService, ConfigurationService } from '../services';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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">
@@ -47,8 +47,10 @@ import * as i1 from "../services";
  *         color: '#f31700'
  *     }];
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorComponent}.
  */
 export class ColorsComponent extends CollectionComponent {
     children;

package/esm2022/arc-gauge/gauge-area.component.mjs

@@ -8,8 +8,28 @@ import { ConfigurationService } from '../services';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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;
+ * }
+ * ```
  */
 export class ArcGaugeAreaComponent extends GaugeAreaComponent {
     configurationService;

package/esm2022/arc-gauge/labels.component.mjs

@@ -8,7 +8,29 @@ import { ConfigurationService } from '../services';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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;
+ * }
+ * ```
  */
 export class ArcLabelsComponent extends RadialLabelsComponent {
     configurationService;

package/esm2022/arc-gauge/scale.component.mjs

@@ -8,15 +8,54 @@ import { ConfigurationService } from '../services';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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}
  */
 export 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);

package/esm2022/circular-gauge/center-template.directive.mjs

@@ -5,29 +5,18 @@
 import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
  * ```
  */
 export class CircularGaugeCenterTemplateDirective {

package/esm2022/circular-gauge/circular-gauge.component.mjs

@@ -31,12 +31,14 @@ import * as i0 from "@angular/core";
  * class AppComponent {
  *   public value: number = 10;
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link CircularGaugeScaleComponent}, {@link CircularGaugeLabelsComponent}, {@link CircularGaugeAreaComponent}.
  */
 export class CircularGaugeComponent extends ArcGaugeComponent {
     /**
-     * The scale options of the gauge.
+     * Specifies the scale options of the Gauge.
      */
     scale;
     centerTemplate;

package/esm2022/circular-gauge/circular-gauge.module.mjs

@@ -13,25 +13,24 @@ import * as i4 from "./scale.component";
 import * as i5 from "./labels.component";
 // 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 { }
  * ```
  */
 export class CircularGaugeModule {

package/esm2022/circular-gauge/gauge-area.component.mjs

@@ -6,8 +6,22 @@ import { Component } from '@angular/core';
 import { ArcGaugeAreaComponent } from '../arc-gauge/gauge-area.component';
 import * as i0 from "@angular/core";
 /**
- * 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 { }
+ * ```
  */
 export 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 });

package/esm2022/circular-gauge/labels.component.mjs

@@ -6,7 +6,29 @@ import { Component } from '@angular/core';
 import { ArcLabelsComponent } from '../arc-gauge/labels.component';
 import * as i0 from "@angular/core";
 /**
- * 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;
+ * }
+ * ```
  */
 export 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 });

package/esm2022/circular-gauge/scale.component.mjs

@@ -6,8 +6,25 @@ import { Component } from '@angular/core';
 import { ArcScaleComponent } from '../arc-gauge/scale.component';
 import * as i0 from "@angular/core";
 /**
- * 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}
  */
 export class CircularGaugeScaleComponent extends ArcScaleComponent {
     /**

package/esm2022/directives.mjs

@@ -31,7 +31,7 @@ import { RadialRangeComponent } from "./radial-gauge/range.component";
 import { RadialRangesComponent } from "./radial-gauge/ranges.component";
 import { RadialScaleComponent } from "./radial-gauge/scale.component";
 /**
- * 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.
  */
 export const KENDO_ARCGAUGE = [
     ArcGaugeComponent,
@@ -43,7 +43,7 @@ export 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.
  */
 export const KENDO_CIRCULARGAUGE = [
     CircularGaugeComponent,
@@ -53,7 +53,7 @@ export 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.
  */
 export const KENDO_LINEARGAUGE = [
     LinearGaugeComponent,
@@ -66,7 +66,7 @@ export 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.
  */
 export const KENDO_RADIALGAUGE = [
     RadialGaugeComponent,
@@ -79,7 +79,7 @@ export 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.
  */
 export const KENDO_GAUGES = [
     ...KENDO_ARCGAUGE,

package/esm2022/gauges.module.mjs

@@ -36,9 +36,9 @@ import * as i27 from "./radial-gauge/range.component";
 import * as i28 from "./radial-gauge/ranges.component";
 // 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.
  *
@@ -46,7 +46,7 @@ import * as i28 from "./radial-gauge/ranges.component";
  * ```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({

package/esm2022/linear-gauge/gauge-area.component.mjs

@@ -8,8 +8,16 @@ import { ConfigurationService } from '../services';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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>
+ * ```
  */
 export class LinearGaugeAreaComponent extends GaugeAreaComponent {
     configurationService;

package/esm2022/linear-gauge/labels.component.mjs

@@ -8,7 +8,17 @@ import { ConfigurationService } from '../services';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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>
+ * ```
  */
 export class LinearLabelsComponent extends LabelsComponent {
     configurationService;

package/esm2022/linear-gauge/linear-gauge.component.mjs

@@ -20,7 +20,7 @@ import * as i3 from "@progress/kendo-angular-l10n";
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * _Component({
  *   selector: 'my-app',
  *   template: `
  *      <kendo-lineargauge [pointer]="{ value: value }">
@@ -30,16 +30,18 @@ import * as i3 from "@progress/kendo-angular-l10n";
  * class AppComponent {
  *   public value: number = 10;
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link LinearScaleComponent}, {@link LinearLabelsComponent}, {@link LinearGaugeAreaComponent}, {@link LinearPointersComponent}, {@link LinearRangesComponent}.
  */
 export 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) {

package/esm2022/linear-gauge/linear-gauge.module.mjs

@@ -16,19 +16,19 @@ import * as i7 from "./range.component";
 import * as i8 from "./ranges.component";
 // 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]

package/esm2022/linear-gauge/pointer.component.mjs

@@ -8,15 +8,46 @@ import { CollectionItemComponent } from '../base-components';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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>
+ * ```
  */
 export 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);

package/esm2022/linear-gauge/pointers.component.mjs

@@ -9,14 +9,14 @@ import { CollectionChangesService, ConfigurationService } from '../services';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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>
@@ -40,8 +40,10 @@ import * as i1 from "../services";
  *         color: '#8b0000'
  *     }];
  * }
- *
  * ```
+ *
+ * @remarks
+ * Supported children components are: {@link LinearPointerComponent}
  */
 export class LinearPointersComponent extends CollectionComponent {
     children;

package/esm2022/linear-gauge/range.component.mjs

@@ -8,7 +8,19 @@ import { RangeComponent } from '../base-components';
 import * as i0 from "@angular/core";
 import * as i1 from "../services";
 /**
- * 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>
+ * ```
  */
 export class LinearRangeComponent extends RangeComponent {
     constructor(configurationService, collectionChangesService) {