@progress/kendo-angular-gauges
Version:
Kendo UI Angular Gauges
2,547 lines • 110 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import * as i0 from '@angular/core';
import { Directive, Optional, Injectable, Input, ViewChild, HostBinding, Component, ChangeDetectionStrategy, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { gaugeTheme, ArcGauge, CircularGauge, LinearGauge, RadialGauge } from '@progress/kendo-charts';
import * as i2 from '@progress/kendo-angular-intl';
import * as i3 from '@progress/kendo-angular-l10n';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { exportImage, exportSVG, drawDOM } from '@progress/kendo-drawing';
import { ResizeSensorComponent } from '@progress/kendo-angular-common';
import { validatePackage } from '@progress/kendo-licensing';
import { NgIf, NgTemplateOutlet } from '@angular/common';
/**
* 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 %})).
*
* The template context provides access to the current ArcGauge value through the `value` and `color` fields.
*
* @example
* ```html
* <kendo-arcgauge [value]="value">
* <ng-template kendoArcGaugeCenterTemplate let-value="value" let-color="color">
* {{ value }}%
* </ng-template>
* </kendo-arcgauge>
* ```
*/
class ArcCenterTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcCenterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ArcCenterTemplateDirective, isStandalone: true, selector: "[kendoArcGaugeCenterTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcCenterTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoArcGaugeCenterTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
function isObject(value) {
return typeof value === "object";
}
function diffOptions(original, current) {
if (Object.keys(original).length !== Object.keys(current).length) {
return true;
}
for (const field in original) {
if (field !== 'value' && original.hasOwnProperty(field)) {
const originalValue = original[field];
const currentValue = current[field];
const diff = isObject(originalValue) && isObject(currentValue) ?
diffOptions(originalValue, currentValue) : originalValue !== currentValue;
if (diff) {
return true;
}
}
}
}
function diffPointerOptions(original, current) {
if (!original || !current) {
return true;
}
original = [].concat(original);
current = [].concat(current);
if (original.length !== current.length) {
return true;
}
for (let idx = 0; idx < original.length; idx++) {
if (diffOptions(original[idx], current[idx])) {
return true;
}
}
}
/**
* @hidden
*/
class ConfigurationService {
options = {};
hasChanges;
valueChange;
copyChanges(prefix, changes) {
for (const propertyName in changes) {
if (!changes.hasOwnProperty(propertyName)) {
continue;
}
const value = changes[propertyName].currentValue;
const optionName = (prefix ? prefix + '.' : '') + propertyName;
this.set(optionName, value);
}
}
read() {
this.hasChanges = false;
this.valueChange = false;
return this.options;
}
readValues() {
this.valueChange = false;
const pointers = [].concat(this.options.pointer);
return pointers.map((pointer) => pointer.value);
}
readValue() {
this.valueChange = false;
return this.options.value;
}
set(field, value) {
const { key, options } = this.optionContext(field);
if (!this.hasChanges && (key === 'value' || (key === 'pointer' && !diffPointerOptions(this.options.pointer, value)))) {
this.valueChange = true;
}
else {
this.hasChanges = true;
this.valueChange = false;
}
options[key] = value;
}
optionContext(field) {
const parts = field.split('.');
let options = this.options;
let key = parts.shift();
while (parts.length > 0) {
options = options[key] = options[key] || {};
key = parts.shift();
}
return { key: key, options: options };
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigurationService, decorators: [{
type: Injectable
}] });
/**
* @hidden
*/
class CollectionChangesService {
hasChanges;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionChangesService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionChangesService, decorators: [{
type: Injectable
}] });
/**
* @hidden
*/
class ThemeService {
options;
read() {
if (!this.options) {
this.load();
}
return this.options;
}
load() {
if (typeof document === 'undefined') {
this.options = {};
return;
}
const container = document.createElement('div');
container.style.display = 'none';
container.className = 'k-gauge';
document.body.appendChild(container);
try {
this.options = gaugeTheme(container);
}
finally {
document.body.removeChild(container);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
/**
* @hidden
*/
class CollectionComponent {
key;
configurationService;
collectionChangesService;
children;
subscription;
constructor(key, configurationService, collectionChangesService) {
this.key = key;
this.configurationService = configurationService;
this.collectionChangesService = collectionChangesService;
}
ngOnDestroy() {
this.subscription.unsubscribe();
this.configurationService.set(this.key, []);
}
ngAfterContentInit() {
this.subscription = this.children.changes.subscribe(() => this.collectionChangesService.hasChanges = true);
}
ngAfterContentChecked() {
if (this.collectionChangesService.hasChanges) {
this.configurationService.set(this.key, this.readItems());
this.collectionChangesService.hasChanges = false;
}
}
readItems() {
return this.children.map(child => Object.assign({}, child.configurationService.read()));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CollectionComponent, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }, { type: CollectionChangesService }]; } });
/**
* @hidden
*/
class CollectionItemComponent {
configurationService;
collectionChangesService;
constructor(configurationService, collectionChangesService) {
this.configurationService = configurationService;
this.collectionChangesService = collectionChangesService;
}
ngOnChanges(changes) {
this.configurationService.copyChanges('', changes);
this.collectionChangesService.hasChanges = true;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionItemComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CollectionItemComponent, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollectionItemComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; } });
/**
* @hidden
*/
const packageMetadata = {
name: '@progress/kendo-angular-gauges',
productName: 'Kendo UI for Angular',
productCode: 'KENDOUIANGULAR',
productCodes: ['KENDOUIANGULAR'],
publishDate: 1755030763,
version: '19.3.0',
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
};
const inDocument = (element) => {
let node = element;
while (node && node !== document.body) {
node = node.parentNode;
}
return Boolean(node);
};
/**
* @hidden
*/
class GaugeComponent {
configurationService;
themeService;
intlService;
localizationService;
element;
renderer;
ngZone;
/**
* Specifies options for the Gauge area.
*/
gaugeArea;
/**
* Specifies the output type.
*/
renderAs;
/**
* The maximum number of times the Gauge resizes per second.
* Defaults to `10`. To disable the automatic resizing, set `resizeRateLimit` to `0`.
*/
resizeRateLimit = 10;
/**
* Specifies the scale options.
*/
scale;
/**
* Specifies if the changes will be animated.
*/
transitions;
surfaceElement;
resizeSensor;
className = true;
options;
theme = null;
instance;
subscriptions;
redrawTimeout;
rtl = false;
constructor(configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
this.configurationService = configurationService;
this.themeService = themeService;
this.intlService = intlService;
this.localizationService = localizationService;
this.element = element;
this.renderer = renderer;
this.ngZone = ngZone;
validatePackage(packageMetadata);
}
ngOnInit() {
this.setDirection();
this.subscriptions = this.intlService.changes.subscribe(this.intlChange.bind(this));
this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
}
ngAfterViewChecked() {
if (typeof document === 'undefined') {
return;
}
let updateMethod;
if (!this.instance) {
updateMethod = this.init;
}
else if (this.configurationService.hasChanges) {
updateMethod = this.updateOptions;
}
else if (this.configurationService.valueChange) {
updateMethod = this.setValues;
}
if (updateMethod) {
clearTimeout(this.redrawTimeout);
if (!this.instance && !inDocument(this.element.nativeElement)) { // required in case the gauge is initialized by ng-content outside of the DOM
this.defer(() => {
this.updateCall(updateMethod);
});
}
else {
this.updateCall(updateMethod);
}
}
}
updateCall(updateMethod) {
this.updateDirection();
updateMethod.call(this);
this.updateSize();
}
updateOptions() {
this.instance.setOptions(this.configurationService.read());
}
setValues() {
this.instance.allValues(this.configurationService.readValues());
}
ngOnChanges(changes) {
this.configurationService.copyChanges('', changes);
}
ngOnDestroy() {
if (this.instance) {
this.instance.destroy();
}
this.subscriptions.unsubscribe();
clearTimeout(this.redrawTimeout);
}
/**
* Exports the Gauge as an image. The export operation is asynchronous and returns a promise.
*
* @param {ImageExportOptions} options - The parameters for the exported image.
* @returns {Promise<string>} - A promise that will be resolved with a PNG image that is encoded as a Data URI.
*/
exportImage(options = {}) {
return this.exportVisual().then((visual) => {
return exportImage(visual, options);
});
}
/**
* Exports the Gauge as an SVG document. The export operation is asynchronous and returns a promise.
*
* @param {SVGExportOptions} options - The parameters for the exported file.
* @returns {Promise<string>} - A promise that will be resolved with an SVG document that is encoded as a Data URI.
*/
exportSVG(options = {}) {
return this.exportVisual().then((visual) => {
return exportSVG(visual, options);
});
}
/**
* Exports the Gauge as a Drawing `Scene`.
*
* @returns {Promise<Group>} - A promise that will be resolved with the export visual.
*/
exportVisual() {
return Promise.resolve(this.instance.exportVisual());
}
/**
* @hidden
*/
onResize() {
if (this.autoResize) {
this.resize();
}
}
/**
* Detects the size of the container and redraws the Gauge.
* Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
*/
resize() {
if (this.instance) {
this.instance.resize();
}
}
init() {
if (!this.surfaceElement) {
return;
}
this.createInstance(this.surfaceElement.nativeElement, this.configurationService.read(), this.themeService.read(), {
intlService: this.intlService,
rtl: this.rtl
});
}
get autoResize() {
return this.resizeRateLimit > 0;
}
updateSize() {
this.resizeSensor.acceptSize();
}
intlChange() {
if (this.instance) {
this.deferredRedraw();
}
}
rtlChange() {
if (this.instance && this.rtl !== this.isRTL) {
this.deferredRedraw();
}
}
deferredRedraw() {
this.defer(() => {
this.updateDirection();
this.instance.noTransitionsRedraw();
});
}
defer(callback) {
this.ngZone.runOutsideAngular(() => {
clearTimeout(this.redrawTimeout);
this.redrawTimeout = setTimeout(callback, 0);
});
}
updateDirection() {
const current = this.isRTL;
if (this.rtl !== current) {
this.setDirection();
if (this.instance) {
this.instance.setDirection(current);
}
}
}
setDirection() {
this.rtl = this.isRTL;
if (this.element) {
this.renderer.setAttribute(this.element.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
}
}
get isRTL() {
return Boolean(this.localizationService.rtl);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GaugeComponent, deps: [{ token: ConfigurationService }, { token: ThemeService }, { token: i2.IntlService }, { token: i3.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GaugeComponent, inputs: { gaugeArea: "gaugeArea", renderAs: "renderAs", resizeRateLimit: "resizeRateLimit", scale: "scale", transitions: "transitions" }, host: { properties: { "class.k-gauge": "this.className" } }, viewQueries: [{ propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GaugeComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: ThemeService }, { type: i2.IntlService }, { type: i3.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { gaugeArea: [{
type: Input
}], renderAs: [{
type: Input
}], resizeRateLimit: [{
type: Input
}], scale: [{
type: Input
}], transitions: [{
type: Input
}], surfaceElement: [{
type: ViewChild,
args: ['surface', { static: true }]
}], resizeSensor: [{
type: ViewChild,
args: [ResizeSensorComponent, { static: true }]
}], className: [{
type: HostBinding,
args: ['class.k-gauge']
}] } });
/**
* @hidden
*/
class SettingsComponent {
key;
configurationService;
constructor(key, configurationService) {
this.key = key;
this.configurationService = configurationService;
}
ngOnChanges(changes) {
this.configurationService.copyChanges(this.key, changes);
}
ngOnDestroy() {
this.configurationService.set(this.key, null);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SettingsComponent, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }]; } });
/**
* @hidden
*/
class GaugeAreaComponent extends SettingsComponent {
key;
configurationService;
/**
* The background of the Gauge area. Accepts valid CSS color strings, including hex and rgb.
*/
background;
/**
* The border of the Gauge area.
*/
border;
/**
* The height of the Gauge area.
*/
height;
/**
* The margin of the Gauge area.
*/
margin;
/**
* The width of the Gauge area.
*/
width;
// due to NG error: The directive GaugeAreaComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter
// that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor
// to use parameters that are valid for DI.(-992016)
constructor(key, configurationService) {
super('gaugeArea', configurationService);
this.key = key;
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GaugeAreaComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GaugeAreaComponent, inputs: { background: "background", border: "border", height: "height", margin: "margin", width: "width" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GaugeAreaComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }]; }, propDecorators: { background: [{
type: Input
}], border: [{
type: Input
}], height: [{
type: Input
}], margin: [{
type: Input
}], width: [{
type: Input
}] } });
/**
* @hidden
*/
class LabelsComponent extends SettingsComponent {
key;
configurationService;
/**
* The background of the labels.
* Accepts valid CSS color strings, including hex and rgb.
*/
background;
/**
* The border of the labels.
*/
border;
/**
* The color of the labels.
* Accepts valid CSS color strings, including hex and rgb.
*/
color;
/**
* The font of the labels.
*/
font;
/**
* The format that is used to display the labels.
* Uses the IntlService [`format`]({% slug api_intl_intlservice %}#toc-format) method.
*/
format;
/**
* The margin of the labels.
*/
margin;
/**
* The padding of the labels.
*/
padding;
/**
* The function which returns the label content.
*
* The available fields in the function argument are:
*
* - `value`—The value of the label.
*/
content;
/**
* The visibility of the labels.
*/
visible;
// due to NG error: The directive LabelsComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter
// that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor
// to use parameters that are valid for DI.(-992016)
constructor(key, configurationService) {
super('label', configurationService);
this.key = key;
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelsComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LabelsComponent, inputs: { background: "background", border: "border", color: "color", font: "font", format: "format", margin: "margin", padding: "padding", content: "content", visible: "visible" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelsComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }]; }, propDecorators: { background: [{
type: Input
}], border: [{
type: Input
}], color: [{
type: Input
}], font: [{
type: Input
}], format: [{
type: Input
}], margin: [{
type: Input
}], padding: [{
type: Input
}], content: [{
type: Input
}], visible: [{
type: Input
}] } });
/**
* @hidden
*/
class RangeComponent extends CollectionItemComponent {
/**
* The start position of the range.
*/
from;
/**
* The end position of the range.
*/
to;
/**
* The range opacity.
*/
opacity;
/**
* The color of the range. Accepts valid CSS color strings, including hex and rgb.
*/
color;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RangeComponent, inputs: { from: "from", to: "to", opacity: "opacity", color: "color" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RangeComponent, decorators: [{
type: Directive
}], propDecorators: { from: [{
type: Input
}], to: [{
type: Input
}], opacity: [{
type: Input
}], color: [{
type: Input
}] } });
/**
* @hidden
*/
class ScaleComponent extends SettingsComponent {
key;
configurationService;
labels;
majorTicks;
minorTicks;
min;
max;
minorUnit;
majorUnit;
reverse;
rangeSize;
rangePlaceholderColor;
// due to NG error: The directive ScaleComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter
// that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor
// to use parameters that are valid for DI.(-992016)
constructor(key, configurationService) {
super('scale', configurationService);
this.key = key;
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScaleComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ScaleComponent, inputs: { labels: "labels", majorTicks: "majorTicks", minorTicks: "minorTicks", min: "min", max: "max", minorUnit: "minorUnit", majorUnit: "majorUnit", reverse: "reverse", rangeSize: "rangeSize", rangePlaceholderColor: "rangePlaceholderColor" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScaleComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }]; }, propDecorators: { labels: [{
type: Input
}], majorTicks: [{
type: Input
}], minorTicks: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], minorUnit: [{
type: Input
}], majorUnit: [{
type: Input
}], reverse: [{
type: Input
}], rangeSize: [{
type: Input
}], rangePlaceholderColor: [{
type: Input
}] } });
/**
* Represents the [Kendo UI ArcGauge component for Angular]({% slug overview_arcgauge_gauges %}).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
* <ng-template kendoArcGaugeCenterTemplate let-value="value">
* {{ value }}%
* </ng-template>
* </kendo-arcgauge>
* `
* })
* class AppComponent {
* public value: number = 10;
* }
* ```
*
* @remarks
* Supported children components are: {@link ArcScaleComponent}, {@link ArcLabelsComponent}, {@link ArcGaugeAreaComponent}, {@link ColorsComponent}.
*/
class ArcGaugeComponent extends GaugeComponent {
changeDetector;
/**
* Sets the value of the gauge.
*/
value;
/**
* Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
*/
color;
/**
* Sets the color ranges of the value pointer.
*/
colors;
/**
* Sets the opacity of the value pointer.
*/
opacity;
/**
* Sets the scale options of the ArcGauge.
*/
scale;
centerTemplate;
labelElement;
className = true;
centerTemplateContext = {};
constructor(changeDetector, configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
super(configurationService, themeService, intlService, localizationService, element, renderer, ngZone);
this.changeDetector = changeDetector;
}
ngOnInit() {
super.ngOnInit();
if (this.element) {
this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
}
}
ngAfterViewChecked() {
super.ngAfterViewChecked();
if (this.labelElement && !this.centerTemplate) {
this.changeDetector.detectChanges();
}
else if (!this.labelElement && this.centerTemplate) {
this.updateCenterTemplate();
}
}
/**
* Exports the Gauge as a Drawing `Scene`.
*
* @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 happens automatically unless you set the `resizeRateLimit` option to `0`.
*/
resize() {
super.resize();
this.updateCenterTemplate();
}
createInstance(element, options, theme, context) {
this.instance = new ArcGauge(element, options, theme, context);
this.updateElements();
}
updateOptions() {
super.updateOptions();
this.updateElements();
}
setValues() {
const value = this.configurationService.readValue();
this.instance.value(value);
this.updateCenterTemplate();
}
updateElements() {
this.resizeSensor.acceptSize();
this.updateCenterTemplate();
}
updateCenterTemplate() {
if (!this.instance || !this.centerTemplate) {
return;
}
this.centerTemplateContext.value = this.instance.value();
this.centerTemplateContext.color = this.instance.currentColor();
this.changeDetector.detectChanges();
this.positionLabel();
}
positionLabel() {
if (!this.labelElement) {
return;
}
const element = this.labelElement.nativeElement;
const width = element.offsetWidth;
const height = element.offsetHeight;
const position = this.instance.centerLabelPosition(width, height);
element.style.top = `${position.top}px`;
element.style.left = `${position.left}px`;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcGaugeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ConfigurationService }, { token: ThemeService }, { token: i2.IntlService }, { token: i3.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ArcGaugeComponent, isStandalone: true, selector: "kendo-arcgauge", inputs: { value: "value", color: "color", colors: "colors", opacity: "opacity", scale: "scale" }, host: { properties: { "class.k-arcgauge": "this.className" } }, providers: [
ConfigurationService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.arcgauge'
}
], queries: [{ propertyName: "centerTemplate", first: true, predicate: ArcCenterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], exportAs: ["kendoArcGauge"], usesInheritance: true, ngImport: i0, template: `
<div #surface class='k-chart-surface'></div>
<div class="k-arcgauge-label" *ngIf="centerTemplate" #label>
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
</div>
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcGaugeComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'kendoArcGauge',
providers: [
ConfigurationService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.arcgauge'
}
],
selector: 'kendo-arcgauge',
template: `
<div #surface class='k-chart-surface'></div>
<div class="k-arcgauge-label" *ngIf="centerTemplate" #label>
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
</div>
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet, ResizeSensorComponent]
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ConfigurationService }, { type: ThemeService }, { type: i2.IntlService }, { type: i3.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { value: [{
type: Input
}], color: [{
type: Input
}], colors: [{
type: Input
}], opacity: [{
type: Input
}], scale: [{
type: Input
}], centerTemplate: [{
type: ContentChild,
args: [ArcCenterTemplateDirective, { static: false }]
}], labelElement: [{
type: ViewChild,
args: ["label", { static: false }]
}], className: [{
type: HostBinding,
args: ['class.k-arcgauge']
}] } });
/**
* 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);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorComponent, isStandalone: true, selector: "kendo-arcgauge-color", inputs: { color: "color", opacity: "opacity", from: "from", to: "to" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorComponent, decorators: [{
type: Component,
args: [{
providers: [ConfigurationService],
selector: 'kendo-arcgauge-color',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { color: [{
type: Input
}], opacity: [{
type: Input
}], from: [{
type: Input
}], to: [{
type: Input
}] } });
/**
* Represents a collection of one or more ArcGauge colors
* ([more information and example]({% slug colorranges_arcgauge %})).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-arcgauge [value]="value">
* <kendo-arcgauge-colors>
* <kendo-arcgauge-color *ngFor="let item of colors"
* [from]="item.from" [to]="item.to" [color]="item.color">
* </kendo-arcgauge-color>
* </kendo-arcgauge-colors>
* </kendo-arcgauge>
* `
* })
* export class AppComponent {
* public value: number = 10;
*
* public colors: any[] = [{
* to: 25,
* color: '#0058e9'
* }, {
* from: 25,
* to: 50,
* color: '#37b400'
* }, {
* from: 50,
* to: 75,
* color: '#ffc000'
* }, {
* from: 75,
* color: '#f31700'
* }];
* }
* ```
*
* @remarks
* Supported children components are: {@link ColorComponent}.
*/
class ColorsComponent extends CollectionComponent {
children;
constructor(configurationService, collectionChangesService) {
super('colors', configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorsComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorsComponent, isStandalone: true, selector: "kendo-arcgauge-colors", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: ColorComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorsComponent, decorators: [{
type: Component,
args: [{
providers: [CollectionChangesService],
selector: 'kendo-arcgauge-colors',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
type: ContentChildren,
args: [ColorComponent]
}] } });
/**
* 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;
constructor(configurationService) {
super('gaugeArea', configurationService);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ArcGaugeAreaComponent, isStandalone: true, selector: "kendo-arcgauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcGaugeAreaComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-arcgauge-area',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
/**
* 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);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadialLabelsComponent, isStandalone: true, selector: "kendo-radialgauge-scale-labels", inputs: { position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialLabelsComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-radialgauge-scale-labels',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; }, propDecorators: { position: [{
type: Input
}] } });
/**
* 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;
constructor(configurationService) {
super(configurationService);
this.configurationService = configurationService;
configurationService.set(`${this.key}.visible`, true);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ArcLabelsComponent, isStandalone: true, selector: "kendo-arcgauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcLabelsComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-arcgauge-scale-labels',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
/**
* 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);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ArcScaleComponent, isStandalone: true, selector: "kendo-arcgauge-scale", inputs: { labels: "labels", rangeDistance: "rangeDistance", rangeLineCap: "rangeLineCap", startAngle: "startAngle", endAngle: "endAngle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcScaleComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-arcgauge-scale',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; }, propDecorators: { labels: [{
type: Input
}], rangeDistance: [{
type: Input
}], rangeLineCap: [{
type: Input
}], startAngle: [{
type: Input
}], endAngle: [{
type: Input
}] } });
/**
* Represents a directive that allows customizing the center part of the `<kendo-circulargauge>` component
* ([more information and example]({% slug centertemplate_circulargauge %})).
*
* The template context provides access to the current CircularGauge value through the `value` and `color` fields.
*
* @example
* ```html
* <kendo-circulargauge [value]="value">
* <ng-template kendoCircularGaugeCenterTemplate let-value="value" let-color="color">
* { value }}%
* </ng-template>
* </kendo-circulargauge>
* ```
*/
class CircularGaugeCenterTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeCenterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CircularGaugeCenterTemplateDirective, isStandalone: true, selector: "[kendoCircularGaugeCenterTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeCenterTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoCircularGaugeCenterTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the [Kendo UI CircularGauge component for Angular]({% slug overview_circulargauge_gauges %}).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-circulargauge [value]="value" [scale]="{ max: 100 }">
* <ng-template kendoCircularGaugeCenterTemplate let-value="value">
* {{ value }}%
* </ng-template>
* </kendo-circulargauge>
* `
* })
* class AppComponent {
* public value: number = 10;
* }
* ```
*
* @remarks
* Supported children components are: {@link CircularGaugeScaleComponent}, {@link CircularGaugeLabelsComponent}, {@link CircularGaugeAreaComponent}.
*/
class CircularGaugeComponent extends ArcGaugeComponent {
/**
* Specifies the scale options of the Gauge.
*/
scale;
centerTemplate;
createInstance(element, options, theme, context) {
this.instance = new CircularGauge(element, options, theme, context);
this.updateElements();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CircularGaugeComponent, isStandalone: true, selector: "kendo-circulargauge", inputs: { scale: "scale" }, providers: [
ConfigurationService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.circulargauge'
}
], queries: [{ propertyName: "centerTemplate", first: true, predicate: CircularGaugeCenterTemplateDirective, descendants: true }], exportAs: ["kendoCircularGauge"], usesInheritance: true, ngImport: i0, template: `
<div #surface class='k-chart-surface'></div>
<div class="k-arcgauge-label" *ngIf="centerTemplate" #label>
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
</div>
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'kendoCircularGauge',
providers: [
ConfigurationService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.circulargauge'
}
],
selector: 'kendo-circulargauge',
template: `
<div #surface class='k-chart-surface'></div>
<div class="k-arcgauge-label" *ngIf="centerTemplate" #label>
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
</div>
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet, ResizeSensorComponent]
}]
}], propDecorators: { scale: [{
type: Input
}], centerTemplate: [{
type: ContentChild,
args: [CircularGaugeCenterTemplateDirective, { static: false }]
}] } });
/**
* 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 });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CircularGaugeAreaComponent, isStandalone: true, selector: "kendo-circulargauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeAreaComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-circulargauge-area',
template: '',
standalone: true
}]
}] });
/**
* 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 });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CircularGaugeLabelsComponent, isStandalone: true, selector: "kendo-circulargauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeLabelsComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-circulargauge-scale-labels',
template: '',
standalone: true
}]
}] });
/**
* 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 {
/**
* @hidden
*/
endAngle;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeScaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CircularGaugeScaleComponent, isStandalone: true, selector: "kendo-circulargauge-scale", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeScaleComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-circulargauge-scale',
template: '',
standalone: true
}]
}] });
/**
* 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;
constructor(configurationService) {
super('gaugeArea', configurationService);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinearGaugeAreaComponent, isStandalone: true, selector: "kendo-lineargauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearGaugeAreaComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-lineargauge-area',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
/**
* 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;
constructor(configurationService) {
super('scale.labels', configurationService);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinearLabelsComponent, isStandalone: true, selector: "kendo-lineargauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearLabelsComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-lineargauge-scale-labels',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
/**
* Represents the [Kendo UI LinearGauge component for Angular]({% slug overview_lineargauge_gauges %}).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* _Component({
* selector: 'my-app',
* template: `
* <kendo-lineargauge [pointer]="{ value: value }">
* </kendo-lineargauge>
* `
* })
* 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 {
/**
* Configures the pointers of the LinearGauge.
*/
pointer;
/**
* Configures the scale of the LinearGauge.
*/
scale;
constructor(configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
super(configurationService, themeService, intlService, localizationService, element, renderer, ngZone);
}
createInstance(element, options, theme, context) {
this.instance = new LinearGauge(element, options, theme, context);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearGaugeComponent, deps: [{ token: ConfigurationService }, { token: ThemeService }, { token: i2.IntlService }, { token: i3.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinearGaugeComponent, isStandalone: true, selector: "kendo-lineargauge", inputs: { pointer: "pointer", scale: "scale" }, providers: [
ConfigurationService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.lineargauge'
}
], exportAs: ["kendoLinearGauge"], usesInheritance: true, ngImport: i0, template: `
<div #surface class='k-chart-surface'></div>
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`, isInline: true, dependencies: [{ kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearGaugeComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'kendoLinearGauge',
providers: [
ConfigurationService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.lineargauge'
}
],
selector: 'kendo-lineargauge',
template: `
<div #surface class='k-chart-surface'></div>
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`,
standalone: true,
imports: [ResizeSensorComponent]
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: ThemeService }, { type: i2.IntlService }, { type: i3.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { pointer: [{
type: Input
}], scale: [{
type: Input
}] } });
/**
* 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);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearPointerComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinearPointerComponent, isStandalone: true, selector: "kendo-lineargauge-pointer", inputs: { border: "border", color: "color", margin: "margin", opacity: "opacity", shape: "shape", size: "size", value: "value" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearPointerComponent, decorators: [{
type: Component,
args: [{
providers: [ConfigurationService],
selector: 'kendo-lineargauge-pointer',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { border: [{
type: Input
}], color: [{
type: Input
}], margin: [{
type: Input
}], opacity: [{
type: Input
}], shape: [{
type: Input
}], size: [{
type: Input
}], value: [{
type: Input
}] } });
/**
* Represents a collection of one or more LinearGauge pointers
* ([more information]({% slug multiplepointers_lineargauge %})).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-lineargauge>
* <kendo-lineargauge-pointers>
* <kendo-lineargauge-pointer *ngFor="let pointer of pointers"
* [value]="pointer.value" [color]="pointer.color" shape="barIndicator">
* </kendo-lineargauge-pointer>
* </kendo-lineargauge-pointers>
* </kendo-lineargauge>
* `
* })
* export class AppComponent {
* public pointers: any[] = [{
* value: 10,
* color: '#ff4500'
* }, {
* value: 12,
* color: '#28b4c8'
* }, {
* value: 20,
* color: '#8b0000'
* }];
* }
* ```
*
* @remarks
* Supported children components are: {@link LinearPointerComponent}
*/
class LinearPointersComponent extends CollectionComponent {
children;
constructor(configurationService, collectionChangesService) {
super('pointer', configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearPointersComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinearPointersComponent, isStandalone: true, selector: "kendo-lineargauge-pointers", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: LinearPointerComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearPointersComponent, decorators: [{
type: Component,
args: [{
providers: [CollectionChangesService],
selector: 'kendo-lineargauge-pointers',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
type: ContentChildren,
args: [LinearPointerComponent]
}] } });
/**
* 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) {
super(configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearRangeComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinearRangeComponent, isStandalone: true, selector: "kendo-lineargauge-scale-range", providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearRangeComponent, decorators: [{
type: Component,
args: [{
providers: [ConfigurationService],
selector: 'kendo-lineargauge-scale-range',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; } });
/**
* 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({
* selector: 'my-app',
* template: `
* <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 AppComponent {
* public ranges: any[] = [{
* from: 0,
* to: 15,
* color: '#ffd246'
* }, {
* from: 15,
* to: 30,
* color: '#28b4c8'
* }, {
* from: 30,
* to: 50,
* color: '#78d237'
* }];
* }
* ```
*
* @remarks
* Supported children components are: {@link LinearRangeComponent}
*/
class LinearRangesComponent extends CollectionComponent {
children;
constructor(configurationService, collectionChangesService) {
super('scale.ranges', configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearRangesComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinearRangesComponent, isStandalone: true, selector: "kendo-lineargauge-scale-ranges", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: LinearRangeComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearRangesComponent, decorators: [{
type: Component,
args: [{
providers: [CollectionChangesService],
selector: 'kendo-lineargauge-scale-ranges',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
type: ContentChildren,
args: [LinearRangeComponent]
}] } });
/**
* 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);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinearScaleComponent, isStandalone: true, selector: "kendo-lineargauge-scale", inputs: { line: "line", ranges: "ranges", mirror: "mirror", vertical: "vertical" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearScaleComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-lineargauge-scale',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; }, propDecorators: { line: [{
type: Input
}], ranges: [{
type: Input
}], mirror: [{
type: Input
}], vertical: [{
type: Input
}] } });
/**
* 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;
constructor(configurationService) {
super('gaugeArea', configurationService);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadialGaugeAreaComponent, isStandalone: true, selector: "kendo-radialgauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialGaugeAreaComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-radialgauge-area',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
/**
* 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);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialPointerComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadialPointerComponent, isStandalone: true, selector: "kendo-radialgauge-pointer", inputs: { cap: "cap", color: "color", length: "length", value: "value" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialPointerComponent, decorators: [{
type: Component,
args: [{
providers: [ConfigurationService],
selector: 'kendo-radialgauge-pointer',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { cap: [{
type: Input
}], color: [{
type: Input
}], length: [{
type: Input
}], value: [{
type: Input
}] } });
/**
* 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({
* selector: 'my-app',
* template: `
* <kendo-radialgauge>
* <kendo-radialgauge-pointers>
* <kendo-radialgauge-pointer *ngFor="let pointer of pointers"
* [value]="pointer.value" [color]="pointer.color">
* </kendo-radialgauge-pointer>
* </kendo-radialgauge-pointers>
* </kendo-radialgauge>
* `
* })
* export class AppComponent {
* public pointers: any[] = [{
* value: 10,
* color: '#ffd246'
* }, {
* value: 20,
* color: '#28b4c8'
* }, {
* value: 30,
* color: '#78d237'
* }];
* }
* ```
*
* @remarks
* Supported children components are: {@link RadialPointerComponent}
*/
class RadialPointersComponent extends CollectionComponent {
children;
constructor(configurationService, collectionChangesService) {
super('pointer', configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialPointersComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadialPointersComponent, isStandalone: true, selector: "kendo-radialgauge-pointers", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: RadialPointerComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialPointersComponent, decorators: [{
type: Component,
args: [{
providers: [CollectionChangesService],
selector: 'kendo-radialgauge-pointers',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
type: ContentChildren,
args: [RadialPointerComponent]
}] } });
/**
* Represents the [Kendo UI RadialGauge component for Angular]({% slug overview_radialgauge_gauges %}).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-radialgauge [pointer]="{ value: value }">
* </kendo-radialgauge>
* `
* })
* 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 {
/**
* Sets the configuration of the pointers.
* You can configure single or multiple pointers for the RadialGauge.
*/
pointer;
/**
* 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) {
super(configurationService, themeService, intlService, localizationService, element, renderer, ngZone);
}
createInstance(element, options, theme, context) {
this.instance = new RadialGauge(element, options, theme, context);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialGaugeComponent, deps: [{ token: ConfigurationService }, { token: ThemeService }, { token: i2.IntlService }, { token: i3.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadialGaugeComponent, isStandalone: true, selector: "kendo-radialgauge", inputs: { pointer: "pointer", scale: "scale" }, providers: [
ConfigurationService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.radialgauge'
}
], exportAs: ["kendoRadialGauge"], usesInheritance: true, ngImport: i0, template: `
<div #surface class='k-chart-surface'></div>
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`, isInline: true, dependencies: [{ kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialGaugeComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'kendoRadialGauge',
providers: [
ConfigurationService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.radialgauge'
}
],
selector: 'kendo-radialgauge',
template: `
<div #surface class='k-chart-surface'></div>
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`,
standalone: true,
imports: [ResizeSensorComponent]
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: ThemeService }, { type: i2.IntlService }, { type: i3.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { pointer: [{
type: Input
}], scale: [{
type: Input
}] } });
/**
* 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) {
super(configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialRangeComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadialRangeComponent, isStandalone: true, selector: "kendo-radialgauge-scale-range", providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialRangeComponent, decorators: [{
type: Component,
args: [{
providers: [ConfigurationService],
selector: 'kendo-radialgauge-scale-range',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; } });
/**
* 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({
* selector: 'my-app',
* template: `
* <kendo-radialgauge>
* <kendo-radialgauge-scale>
* <kendo-radialgauge-scale-ranges>
* <kendo-radialgauge-scale-range *ngFor="let range of ranges"
* [from]="range.from" [to]="range.to" [color]="range.color">
* </kendo-radialgauge-scale-range>
* </kendo-radialgauge-scale-ranges>
* </kendo-radialgauge-scale>
* </kendo-radialgauge>
* `
* })
* export class AppComponent {
* public ranges: any[] = [{
* from: 0,
* to: 15,
* color: '#ffd246'
* }, {
* from: 15,
* to: 30,
* color: '#28b4c8'
* }, {
* from: 30,
* to: 50,
* color: '#78d237'
* }];
* }
* ```
*
* @remarks
* Supported children components are: {@link RadialRangeComponent}
*/
class RadialRangesComponent extends CollectionComponent {
children;
constructor(configurationService, collectionChangesService) {
super('scale.ranges', configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialRangesComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadialRangesComponent, isStandalone: true, selector: "kendo-radialgauge-scale-ranges", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: RadialRangeComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialRangesComponent, decorators: [{
type: Component,
args: [{
providers: [CollectionChangesService],
selector: 'kendo-radialgauge-scale-ranges',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
type: ContentChildren,
args: [RadialRangeComponent]
}] } });
/**
* 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);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadialScaleComponent, isStandalone: true, selector: "kendo-radialgauge-scale", inputs: { labels: "labels", rangeDistance: "rangeDistance", ranges: "ranges", startAngle: "startAngle", endAngle: "endAngle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialScaleComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-radialgauge-scale',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: ConfigurationService }]; }, propDecorators: { labels: [{
type: Input
}], rangeDistance: [{
type: Input
}], ranges: [{
type: Input
}], startAngle: [{
type: Input
}], endAngle: [{
type: Input
}] } });
/**
* Use this utility array to access all ArcGauge-related components and directives in a standalone Angular component.
*/
const KENDO_ARCGAUGE = [
ArcGaugeComponent,
ArcCenterTemplateDirective,
ArcGaugeAreaComponent,
ArcScaleComponent,
ArcLabelsComponent,
ColorsComponent,
ColorComponent
];
/**
* Use this utility array to access all CircularGauge-related components and directives in a standalone Angular component.
*/
const KENDO_CIRCULARGAUGE = [
CircularGaugeComponent,
CircularGaugeCenterTemplateDirective,
CircularGaugeAreaComponent,
CircularGaugeScaleComponent,
CircularGaugeLabelsComponent
];
/**
* Use this utility array to access all LinearGauge-related components and directives in a standalone Angular component.
*/
const KENDO_LINEARGAUGE = [
LinearGaugeComponent,
LinearGaugeAreaComponent,
LinearScaleComponent,
LinearLabelsComponent,
LinearPointersComponent,
LinearPointerComponent,
LinearRangeComponent,
LinearRangesComponent
];
/**
* Use this utility array to access all RadialGauge-related components and directives in a standalone Angular component.
*/
const KENDO_RADIALGAUGE = [
RadialGaugeComponent,
RadialGaugeAreaComponent,
RadialScaleComponent,
RadialLabelsComponent,
RadialPointersComponent,
RadialPointerComponent,
RadialRangeComponent,
RadialRangesComponent
];
/**
* 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,
...KENDO_CIRCULARGAUGE,
...KENDO_LINEARGAUGE,
...KENDO_RADIALGAUGE
];
// IMPORTANT: NgModule export kept for backwards compatibility
/**
* 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
* ```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({
* bootstrap: [AppComponent],
* declarations: [AppComponent],
* imports: [BrowserModule, ArcGaugeModule]
* })
* export class AppModule { }
* ```
*/
class ArcGaugeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ArcGaugeModule, imports: [ArcGaugeComponent, ArcCenterTemplateDirective, ArcGaugeAreaComponent, ArcScaleComponent, ArcLabelsComponent, ColorsComponent, ColorComponent], exports: [ArcGaugeComponent, ArcCenterTemplateDirective, ArcGaugeAreaComponent, ArcScaleComponent, ArcLabelsComponent, ColorsComponent, ColorComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcGaugeModule, providers: [ThemeService], imports: [ArcGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArcGaugeModule, decorators: [{
type: NgModule,
args: [{
exports: [...KENDO_ARCGAUGE],
imports: [...KENDO_ARCGAUGE],
providers: [ThemeService]
}]
}] });
// IMPORTANT: NgModule export kept for backwards compatibility
/**
* 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
* import { NgModule } from '@angular/core';
* import { BrowserModule } from '@angular/platform-browser';
* import { LinearGaugeModule } from '@progress/kendo-angular-gauges';
* import { AppComponent } from './app.component';
*
* @NgModule({
* bootstrap: [AppComponent],
* declarations: [AppComponent],
* imports: [BrowserModule, LinearGaugeModule]
* })
* export class AppModule {
* }
* ```
*/
class LinearGaugeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LinearGaugeModule, imports: [LinearGaugeComponent, LinearGaugeAreaComponent, LinearScaleComponent, LinearLabelsComponent, LinearPointersComponent, LinearPointerComponent, LinearRangeComponent, LinearRangesComponent], exports: [LinearGaugeComponent, LinearGaugeAreaComponent, LinearScaleComponent, LinearLabelsComponent, LinearPointersComponent, LinearPointerComponent, LinearRangeComponent, LinearRangesComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearGaugeModule, providers: [ThemeService], imports: [LinearGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinearGaugeModule, decorators: [{
type: NgModule,
args: [{
exports: [...KENDO_LINEARGAUGE],
imports: [...KENDO_LINEARGAUGE],
providers: [ThemeService]
}]
}] });
// IMPORTANT: NgModule export kept for backwards compatibility
/**
* 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 uses the RadialGauge component.
*
* @example
* ```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({
* bootstrap: [AppComponent],
* declarations: [AppComponent],
* imports: [BrowserModule, RadialGaugeModule]
* })
* export class AppModule {
* }
* ```
*/
class RadialGaugeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: RadialGaugeModule, imports: [RadialGaugeComponent, RadialGaugeAreaComponent, RadialScaleComponent, RadialLabelsComponent, RadialPointersComponent, RadialPointerComponent, RadialRangeComponent, RadialRangesComponent], exports: [RadialGaugeComponent, RadialGaugeAreaComponent, RadialScaleComponent, RadialLabelsComponent, RadialPointersComponent, RadialPointerComponent, RadialRangeComponent, RadialRangesComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialGaugeModule, providers: [ThemeService], imports: [RadialGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadialGaugeModule, decorators: [{
type: NgModule,
args: [{
exports: [...KENDO_RADIALGAUGE],
imports: [...KENDO_RADIALGAUGE],
providers: [ThemeService]
}]
}] });
// IMPORTANT: NgModule export kept for backwards compatibility
/**
* 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 uses the CircularGauge component.
*
* @example
* ```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({
* bootstrap: [AppComponent],
* declarations: [AppComponent],
* imports: [BrowserModule, CircularGaugeModule]
* })
* export class AppModule { }
* ```
*/
class CircularGaugeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeModule, imports: [CircularGaugeComponent, CircularGaugeCenterTemplateDirective, CircularGaugeAreaComponent, CircularGaugeScaleComponent, CircularGaugeLabelsComponent], exports: [CircularGaugeComponent, CircularGaugeCenterTemplateDirective, CircularGaugeAreaComponent, CircularGaugeScaleComponent, CircularGaugeLabelsComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeModule, providers: [ThemeService], imports: [CircularGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularGaugeModule, decorators: [{
type: NgModule,
args: [{
exports: [...KENDO_CIRCULARGAUGE],
imports: [...KENDO_CIRCULARGAUGE],
providers: [ThemeService]
}]
}] });
// IMPORTANT: NgModule export kept for backwards compatibility
/**
* Represents the [NgModule](link:site.data.urls.angular['ngmodules']) definition that includes all Gauge components and directives.
*
* 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.
*
* @example
* ```ts-no-run
* import { NgModule } from '@angular/core';
* import { BrowserModule } from '@angular/platform-browser';
* import { GaugesModule } from '@progress/kendo-angular-gauges';
* import { AppComponent } from './app.component';
*
* _@NgModule({
* bootstrap: [AppComponent],
* declarations: [AppComponent],
* imports: [BrowserModule, GaugesModule]
* })
* export class AppModule {
* }
* ```
*/
class GaugesModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GaugesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GaugesModule, imports: [ArcGaugeComponent, ArcCenterTemplateDirective, ArcGaugeAreaComponent, ArcScaleComponent, ArcLabelsComponent, ColorsComponent, ColorComponent, CircularGaugeComponent, CircularGaugeCenterTemplateDirective, CircularGaugeAreaComponent, CircularGaugeScaleComponent, CircularGaugeLabelsComponent, LinearGaugeComponent, LinearGaugeAreaComponent, LinearScaleComponent, LinearLabelsComponent, LinearPointersComponent, LinearPointerComponent, LinearRangeComponent, LinearRangesComponent, RadialGaugeComponent, RadialGaugeAreaComponent, RadialScaleComponent, RadialLabelsComponent, RadialPointersComponent, RadialPointerComponent, RadialRangeComponent, RadialRangesComponent], exports: [ArcGaugeComponent, ArcCenterTemplateDirective, ArcGaugeAreaComponent, ArcScaleComponent, ArcLabelsComponent, ColorsComponent, ColorComponent, CircularGaugeComponent, CircularGaugeCenterTemplateDirective, CircularGaugeAreaComponent, CircularGaugeScaleComponent, CircularGaugeLabelsComponent, LinearGaugeComponent, LinearGaugeAreaComponent, LinearScaleComponent, LinearLabelsComponent, LinearPointersComponent, LinearPointerComponent, LinearRangeComponent, LinearRangesComponent, RadialGaugeComponent, RadialGaugeAreaComponent, RadialScaleComponent, RadialLabelsComponent, RadialPointersComponent, RadialPointerComponent, RadialRangeComponent, RadialRangesComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GaugesModule, providers: [ThemeService], imports: [ArcGaugeComponent, CircularGaugeComponent, LinearGaugeComponent, RadialGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GaugesModule, decorators: [{
type: NgModule,
args: [{
exports: [...KENDO_GAUGES],
imports: [...KENDO_GAUGES],
providers: [ThemeService]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ArcCenterTemplateDirective, ArcGaugeAreaComponent, ArcGaugeComponent, ArcGaugeModule, ArcLabelsComponent, ArcScaleComponent, CircularGaugeAreaComponent, CircularGaugeCenterTemplateDirective, CircularGaugeComponent, CircularGaugeLabelsComponent, CircularGaugeModule, CircularGaugeScaleComponent, CollectionChangesService, CollectionComponent, CollectionItemComponent, ColorComponent, ColorsComponent, ConfigurationService, GaugeAreaComponent, GaugeComponent, GaugesModule, KENDO_ARCGAUGE, KENDO_CIRCULARGAUGE, KENDO_GAUGES, KENDO_LINEARGAUGE, KENDO_RADIALGAUGE, LabelsComponent, LinearGaugeAreaComponent, LinearGaugeComponent, LinearGaugeModule, LinearLabelsComponent, LinearPointerComponent, LinearPointersComponent, LinearRangeComponent, LinearRangesComponent, LinearScaleComponent, RadialGaugeAreaComponent, RadialGaugeComponent, RadialGaugeModule, RadialLabelsComponent, RadialPointerComponent, RadialPointersComponent, RadialRangeComponent, RadialRangesComponent, RadialScaleComponent, RangeComponent, ScaleComponent, SettingsComponent, ThemeService };