@progress/kendo-angular-gauges
Version:
Kendo UI Angular Gauges
3,025 lines • 126 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2026 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 { Optional, Directive, Injectable, signal, HostBinding, ViewChild, Input, ContentChild, ChangeDetectionStrategy, Component, 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 { 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](https://www.telerik.com/kendo-angular-ui/components/gauges/circulargauge/center-template)).
*
* 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: "20.3.27", ngImport: i0, type: ArcCenterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ArcCenterTemplateDirective, isStandalone: true, selector: "[kendoArcGaugeCenterTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ArcCenterTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoArcGaugeCenterTemplate]',
standalone: true
}]
}], ctorParameters: () => [{ 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: "20.3.27", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ConfigurationService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ConfigurationService, decorators: [{
type: Injectable
}] });
/**
* @hidden
*/
class CollectionChangesService {
hasChanges;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CollectionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CollectionChangesService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ThemeService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: CollectionComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CollectionComponent, isStandalone: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CollectionComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ 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: "20.3.27", ngImport: i0, type: CollectionItemComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CollectionItemComponent, isStandalone: true, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CollectionItemComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: ConfigurationService }, { type: CollectionChangesService }] });
/**
* @hidden
*/
const packageMetadata = {
name: '@progress/kendo-angular-gauges',
productName: 'Kendo UI for Angular',
productCode: 'KENDOUIANGULAR',
productCodes: ['KENDOUIANGULAR'],
publishDate: 1786526060,
version: '25.0.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.
*/
set gaugeArea(value) {
this._gaugeArea.set(value);
}
get gaugeArea() {
return this._gaugeArea();
}
/**
* Specifies the output type.
*/
set renderAs(value) {
this._renderAs.set(value);
}
get renderAs() {
return this._renderAs();
}
/**
* The maximum number of times the Gauge resizes per second.
* Defaults to `10`. To disable the automatic resizing, set `resizeRateLimit` to `0`.
*/
set resizeRateLimit(value) {
this._resizeRateLimit.set(value);
}
get resizeRateLimit() {
return this._resizeRateLimit();
}
/**
* Specifies the scale options.
*/
set scale(value) {
this._scale.set(value);
}
get scale() {
return this._scale();
}
/**
* Specifies if the changes will be animated.
*/
set transitions(value) {
this._transitions.set(value);
}
get transitions() {
return this._transitions();
}
resizeSensor;
className = true;
options;
theme = null;
instance;
subscriptions;
redrawTimeout;
rtl = false;
_transitions = signal(undefined, ...(ngDevMode ? [{ debugName: "_transitions" }] : []));
_scale = signal(undefined, ...(ngDevMode ? [{ debugName: "_scale" }] : []));
_resizeRateLimit = signal(10, ...(ngDevMode ? [{ debugName: "_resizeRateLimit" }] : []));
_renderAs = signal(undefined, ...(ngDevMode ? [{ debugName: "_renderAs" }] : []));
_gaugeArea = signal(undefined, ...(ngDevMode ? [{ debugName: "_gaugeArea" }] : []));
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)));
}
ngOnChanges(changes) {
this.configurationService.copyChanges('', changes);
}
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);
}
}
}
ngOnDestroy() {
if (this.instance) {
this.instance.destroy();
}
this.subscriptions?.unsubscribe();
clearTimeout(this.redrawTimeout);
}
updateCall(updateMethod) {
this.updateDirection();
updateMethod.call(this);
this.updateSize();
}
updateOptions() {
this.instance.setOptions(this.configurationService.read());
}
setValues() {
this.instance.allValues(this.configurationService.readValues());
}
/**
* 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.element) {
return;
}
this.createInstance(this.element.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: "20.3.27", 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: "20.3.27", type: GaugeComponent, isStandalone: true, inputs: { gaugeArea: "gaugeArea", renderAs: "renderAs", resizeRateLimit: "resizeRateLimit", scale: "scale", transitions: "transitions" }, host: { properties: { "class.k-gauge": "this.className" } }, viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GaugeComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ 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
}], 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: "20.3.27", ngImport: i0, type: SettingsComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: SettingsComponent, isStandalone: true, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SettingsComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ 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.
*/
set background(value) {
this._background.set(value);
}
get background() {
return this._background();
}
/**
* The border of the Gauge area.
*/
set border(value) {
this._border.set(value);
}
get border() {
return this._border();
}
/**
* The height of the Gauge area.
*/
set height(value) {
this._height.set(value);
}
get height() {
return this._height();
}
/**
* The margin of the Gauge area.
*/
set margin(value) {
this._margin.set(value);
}
get margin() {
return this._margin();
}
/**
* The width of the Gauge area.
*/
set width(value) {
this._width.set(value);
}
get width() {
return this._width();
}
_width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
_margin = signal(undefined, ...(ngDevMode ? [{ debugName: "_margin" }] : []));
_height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
_background = signal(undefined, ...(ngDevMode ? [{ debugName: "_background" }] : []));
_border = signal(undefined, ...(ngDevMode ? [{ debugName: "_border" }] : []));
// 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: "20.3.27", ngImport: i0, type: GaugeAreaComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: GaugeAreaComponent, isStandalone: true, inputs: { background: "background", border: "border", height: "height", margin: "margin", width: "width" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GaugeAreaComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ 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.
*/
set background(value) {
this._background.set(value);
}
get background() {
return this._background();
}
/**
* The border of the labels.
*/
set border(value) {
this._border.set(value);
}
get border() {
return this._border();
}
/**
* The color of the labels.
* Accepts valid CSS color strings, including hex and rgb.
*/
set color(value) {
this._color.set(value);
}
get color() {
return this._color();
}
/**
* The font of the labels.
*/
set font(value) {
this._font.set(value);
}
get font() {
return this._font();
}
/**
* The format that is used to display the labels.
* Uses the IntlService [`format`](https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/api/intlservice#format) method.
*/
set format(value) {
this._format.set(value);
}
get format() {
return this._format();
}
/**
* The margin of the labels.
*/
set margin(value) {
this._margin.set(value);
}
get margin() {
return this._margin();
}
/**
* The padding of the labels.
*/
set padding(value) {
this._padding.set(value);
}
get padding() {
return this._padding();
}
/**
* The function which returns the label content.
*
* The available fields in the function argument are:
*
* - `value`—The value of the label.
*/
set content(value) {
this._content.set(value);
}
get content() {
return this._content();
}
/**
* The visibility of the labels.
*/
set visible(value) {
this._visible.set(value);
}
get visible() {
return this._visible();
}
_visible = signal(undefined, ...(ngDevMode ? [{ debugName: "_visible" }] : []));
_content = signal(undefined, ...(ngDevMode ? [{ debugName: "_content" }] : []));
_padding = signal(undefined, ...(ngDevMode ? [{ debugName: "_padding" }] : []));
_margin = signal(undefined, ...(ngDevMode ? [{ debugName: "_margin" }] : []));
_format = signal(undefined, ...(ngDevMode ? [{ debugName: "_format" }] : []));
_font = signal(undefined, ...(ngDevMode ? [{ debugName: "_font" }] : []));
_color = signal(undefined, ...(ngDevMode ? [{ debugName: "_color" }] : []));
_border = signal(undefined, ...(ngDevMode ? [{ debugName: "_border" }] : []));
_background = signal(undefined, ...(ngDevMode ? [{ debugName: "_background" }] : []));
// 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: "20.3.27", ngImport: i0, type: LabelsComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LabelsComponent, isStandalone: true, 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: "20.3.27", ngImport: i0, type: LabelsComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ 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.
*/
set from(value) {
this._from.set(value);
}
get from() {
return this._from();
}
/**
* The end position of the range.
*/
set to(value) {
this._to.set(value);
}
get to() {
return this._to();
}
/**
* The range opacity.
*/
set opacity(value) {
this._opacity.set(value);
}
get opacity() {
return this._opacity();
}
/**
* The color of the range. Accepts valid CSS color strings, including hex and rgb.
*/
set color(value) {
this._color.set(value);
}
get color() {
return this._color();
}
_to = signal(undefined, ...(ngDevMode ? [{ debugName: "_to" }] : []));
_from = signal(undefined, ...(ngDevMode ? [{ debugName: "_from" }] : []));
_opacity = signal(undefined, ...(ngDevMode ? [{ debugName: "_opacity" }] : []));
_color = signal(undefined, ...(ngDevMode ? [{ debugName: "_color" }] : []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: RangeComponent, isStandalone: true, inputs: { from: "from", to: "to", opacity: "opacity", color: "color" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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;
set labels(value) {
this._labels.set(value);
}
get labels() {
return this._labels();
}
set majorTicks(value) {
this._majorTicks.set(value);
}
get majorTicks() {
return this._majorTicks();
}
set minorTicks(value) {
this._minorTicks.set(value);
}
get minorTicks() {
return this._minorTicks();
}
set min(value) {
this._min.set(value);
}
get min() {
return this._min();
}
set max(value) {
this._max.set(value);
}
get max() {
return this._max();
}
set minorUnit(value) {
this._minorUnit.set(value);
}
get minorUnit() {
return this._minorUnit();
}
set majorUnit(value) {
this._majorUnit.set(value);
}
get majorUnit() {
return this._majorUnit();
}
set reverse(value) {
this._reverse.set(value);
}
get reverse() {
return this._reverse();
}
set rangeSize(value) {
this._rangeSize.set(value);
}
get rangeSize() {
return this._rangeSize();
}
set rangePlaceholderColor(value) {
this._rangePlaceholderColor.set(value);
}
get rangePlaceholderColor() {
return this._rangePlaceholderColor();
}
_rangePlaceholderColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_rangePlaceholderColor" }] : []));
_rangeSize = signal(undefined, ...(ngDevMode ? [{ debugName: "_rangeSize" }] : []));
_reverse = signal(undefined, ...(ngDevMode ? [{ debugName: "_reverse" }] : []));
_majorUnit = signal(undefined, ...(ngDevMode ? [{ debugName: "_majorUnit" }] : []));
_minorUnit = signal(undefined, ...(ngDevMode ? [{ debugName: "_minorUnit" }] : []));
_max = signal(undefined, ...(ngDevMode ? [{ debugName: "_max" }] : []));
_min = signal(undefined, ...(ngDevMode ? [{ debugName: "_min" }] : []));
_minorTicks = signal(undefined, ...(ngDevMode ? [{ debugName: "_minorTicks" }] : []));
_majorTicks = signal(undefined, ...(ngDevMode ? [{ debugName: "_majorTicks" }] : []));
_labels = signal(undefined, ...(ngDevMode ? [{ debugName: "_labels" }] : []));
// 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: "20.3.27", ngImport: i0, type: ScaleComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ScaleComponent, isStandalone: true, 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: "20.3.27", ngImport: i0, type: ScaleComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ 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](https://www.telerik.com/kendo-angular-ui/components/gauges/arcgauge).
*
* @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.
*/
set value(v) {
this._value.set(v);
}
get value() {
return this._value();
}
/**
* Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
*/
set color(v) {
this._color.set(v);
}
get color() {
return this._color();
}
/**
* Sets the color ranges of the value pointer.
*/
set colors(v) {
this._colors.set(v);
}
get colors() {
return this._colors();
}
/**
* Sets the opacity of the value pointer.
*/
set opacity(v) {
this._opacity.set(v);
}
get opacity() {
return this._opacity();
}
/**
* Sets the scale options of the ArcGauge.
*/
set scale(value) {
super.scale = value;
}
get scale() {
return super.scale;
}
centerTemplate;
labelElement;
className = true;
get centerTemplateContext() {
return this._centerTemplateContext();
}
set centerTemplateContext(value) {
this._centerTemplateContext.set(value);
}
_centerTemplateContext = signal({}, ...(ngDevMode ? [{ debugName: "_centerTemplateContext" }] : []));
_colors = signal(undefined, ...(ngDevMode ? [{ debugName: "_colors" }] : []));
_color = signal(undefined, ...(ngDevMode ? [{ debugName: "_color" }] : []));
_value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
_opacity = signal(undefined, ...(ngDevMode ? [{ debugName: "_opacity" }] : []));
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.set({
value: this.instance.value(),
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: "20.3.27", 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: "17.0.0", version: "20.3.27", 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: `
@if (centerTemplate) {
<div class="k-arcgauge-label" #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: 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: "20.3.27", 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: `
@if (centerTemplate) {
<div class="k-arcgauge-label" #label>
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
</div>
}
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`,
standalone: true,
imports: [NgTemplateOutlet, ResizeSensorComponent]
}]
}], ctorParameters: () => [{ 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.
*/
set color(value) {
this._color.set(value);
}
get color() {
return this._color();
}
/**
* Sets the opacity of the range.
*/
set opacity(value) {
this._opacity.set(value);
}
get opacity() {
return this._opacity();
}
/**
* Sets the start value of the range.
*/
set from(value) {
this._from.set(value);
}
get from() {
return this._from();
}
/**
* Sets the end value of the range.
*/
set to(value) {
this._to.set(value);
}
get to() {
return this._to();
}
_to = signal(undefined, ...(ngDevMode ? [{ debugName: "_to" }] : []));
_from = signal(undefined, ...(ngDevMode ? [{ debugName: "_from" }] : []));
_opacity = signal(undefined, ...(ngDevMode ? [{ debugName: "_opacity" }] : []));
_color = signal(undefined, ...(ngDevMode ? [{ debugName: "_color" }] : []));
constructor(configurationService, collectionChangesService) {
super(configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ConfigurationService],
selector: 'kendo-arcgauge-color',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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](https://www.telerik.com/kendo-angular-ui/components/gauges/arcgauge/color-ranges)).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-arcgauge [value]="value">
* <kendo-arcgauge-colors>
* @for (item of colors; track item) {
* <kendo-arcgauge-color
* [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: "20.3.27", ngImport: i0, type: ColorsComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: ColorsComponent, isStandalone: true, selector: "kendo-arcgauge-colors", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: ColorComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorsComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [CollectionChangesService],
selector: 'kendo-arcgauge-colors',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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: "20.3.27", ngImport: i0, type: ArcGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: ArcGaugeAreaComponent, isStandalone: true, selector: "kendo-arcgauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ArcGaugeAreaComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-arcgauge-area',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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.
*/
set position(value) {
this._position.set(value);
}
get position() {
return this._position();
}
_position = signal(undefined, ...(ngDevMode ? [{ debugName: "_position" }] : []));
constructor(configurationService) {
super('scale.labels', configurationService);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadialLabelsComponent, isStandalone: true, selector: "kendo-radialgauge-scale-labels", inputs: { position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialLabelsComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-radialgauge-scale-labels',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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: "20.3.27", ngImport: i0, type: ArcLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: ArcLabelsComponent, isStandalone: true, selector: "kendo-arcgauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ArcLabelsComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-arcgauge-scale-labels',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ type: ConfigurationService }] });
/**
* Represents the configuration options for the scale of the ArcGauge
* ([see example](https://www.telerik.com/kendo-angular-ui/components/gauges/arcgauge/scale-options)).
*
* @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.
*/
set labels(value) {
super.labels = value;
}
get labels() {
return super.labels;
}
/**
* Sets the distance between the scale ranges in pixels.
*/
set rangeDistance(value) {
this._rangeDistance.set(value);
}
get rangeDistance() {
return this._rangeDistance();
}
/**
* Sets the line cap style for the scale ranges.
*/
set rangeLineCap(value) {
this._rangeLineCap.set(value);
}
get rangeLineCap() {
return this._rangeLineCap();
}
/**
* Sets the start angle of the Gauge in degrees.
*/
set startAngle(value) {
this._startAngle.set(value);
}
get startAngle() {
return this._startAngle();
}
/**
* Sets the end angle of the Gauge in degrees.
*/
set endAngle(value) {
this._endAngle.set(value);
}
get endAngle() {
return this._endAngle();
}
_endAngle = signal(undefined, ...(ngDevMode ? [{ debugName: "_endAngle" }] : []));
_startAngle = signal(undefined, ...(ngDevMode ? [{ debugName: "_startAngle" }] : []));
_rangeLineCap = signal(undefined, ...(ngDevMode ? [{ debugName: "_rangeLineCap" }] : []));
_rangeDistance = signal(undefined, ...(ngDevMode ? [{ debugName: "_rangeDistance" }] : []));
constructor(configurationService) {
super('scale', configurationService);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ArcScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ArcScaleComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-arcgauge-scale',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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](https://www.telerik.com/kendo-angular-ui/components/gauges/circulargauge/center-template)).
*
* 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: "20.3.27", ngImport: i0, type: CircularGaugeCenterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CircularGaugeCenterTemplateDirective, isStandalone: true, selector: "[kendoCircularGaugeCenterTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CircularGaugeCenterTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoCircularGaugeCenterTemplate]',
standalone: true
}]
}], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }] });
/**
* Represents the [Kendo UI CircularGauge component for Angular](https://www.telerik.com/kendo-angular-ui/components/gauges/circulargauge).
*
* @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.
*/
set scale(value) {
super.scale = value;
}
get scale() {
return super.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: "20.3.27", ngImport: i0, type: CircularGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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: `
@if (centerTemplate) {
<div class="k-arcgauge-label" #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: 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: "20.3.27", 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: `
@if (centerTemplate) {
<div class="k-arcgauge-label" #label>
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
</div>
}
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`,
standalone: true,
imports: [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: "20.3.27", ngImport: i0, type: CircularGaugeAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CircularGaugeAreaComponent, isStandalone: true, selector: "kendo-circulargauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CircularGaugeAreaComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
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: "20.3.27", ngImport: i0, type: CircularGaugeLabelsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CircularGaugeLabelsComponent, isStandalone: true, selector: "kendo-circulargauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CircularGaugeLabelsComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-circulargauge-scale-labels',
template: '',
standalone: true
}]
}] });
/**
* Represents the configuration options for the scale of the Circular Gauge
* ([see example](https://www.telerik.com/kendo-angular-ui/components/gauges/circulargauge/scale-options)).
*
* @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
*/
set endAngle(value) {
super.endAngle = value;
}
get endAngle() {
return super.endAngle;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CircularGaugeScaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CircularGaugeScaleComponent, isStandalone: true, selector: "kendo-circulargauge-scale", inputs: { endAngle: "endAngle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CircularGaugeScaleComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-circulargauge-scale',
template: '',
standalone: true
}]
}], propDecorators: { endAngle: [{
type: Input
}] } });
/**
* 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: "20.3.27", ngImport: i0, type: LinearGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: LinearGaugeAreaComponent, isStandalone: true, selector: "kendo-lineargauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearGaugeAreaComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-lineargauge-area',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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: "20.3.27", ngImport: i0, type: LinearLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: LinearLabelsComponent, isStandalone: true, selector: "kendo-lineargauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearLabelsComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-lineargauge-scale-labels',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ type: ConfigurationService }] });
/**
* Represents the [Kendo UI LinearGauge component for Angular](https://www.telerik.com/kendo-angular-ui/components/gauges/lineargauge).
*
* @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.
*/
set pointer(value) {
this._pointer.set(value);
}
get pointer() {
return this._pointer();
}
/**
* Configures the scale of the LinearGauge.
*/
set scale(value) {
super.scale = value;
}
get scale() {
return super.scale;
}
_pointer = signal(undefined, ...(ngDevMode ? [{ debugName: "_pointer" }] : []));
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: "20.3.27", 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: "20.3.27", 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: `
<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: "20.3.27", 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: `
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`,
standalone: true,
imports: [ResizeSensorComponent]
}]
}], ctorParameters: () => [{ 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.
*/
set border(value) {
this._border.set(value);
}
get border() {
return this._border();
}
/**
* Specifies the color of the pointer.
*/
set color(value) {
this._color.set(value);
}
get color() {
return this._color();
}
/**
* Sets the margin of the pointer. You can set this option to a number or an object with specific margin values.
*/
set margin(value) {
this._margin.set(value);
}
get margin() {
return this._margin();
}
/**
* Controls the transparency of the pointer. The value ranges from 0 (transparent) to 1 (opaque).
*/
set opacity(value) {
this._opacity.set(value);
}
get opacity() {
return this._opacity();
}
/**
* Defines the shape of the pointer.
*/
set shape(value) {
this._shape.set(value);
}
get shape() {
return this._shape();
}
/**
* Sets the size of the pointer in pixels.
*/
set size(value) {
this._size.set(value);
}
get size() {
return this._size();
}
/**
* Specifies the value that the pointer displays on the scale.
*/
set value(v) {
this._value.set(v);
}
get value() {
return this._value();
}
_value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
_size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
_shape = signal(undefined, ...(ngDevMode ? [{ debugName: "_shape" }] : []));
_opacity = signal(undefined, ...(ngDevMode ? [{ debugName: "_opacity" }] : []));
_margin = signal(undefined, ...(ngDevMode ? [{ debugName: "_margin" }] : []));
_border = signal(undefined, ...(ngDevMode ? [{ debugName: "_border" }] : []));
_color = signal(undefined, ...(ngDevMode ? [{ debugName: "_color" }] : []));
constructor(configurationService, collectionChangesService) {
super(configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearPointerComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearPointerComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ConfigurationService],
selector: 'kendo-lineargauge-pointer',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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](https://www.telerik.com/kendo-angular-ui/components/gauges/lineargauge/multiple-pointers)).
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-lineargauge>
* <kendo-lineargauge-pointers>
* @for (pointer of pointers; track pointer) {
* <kendo-lineargauge-pointer
* [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: "20.3.27", ngImport: i0, type: LinearPointersComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: LinearPointersComponent, isStandalone: true, selector: "kendo-lineargauge-pointers", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: LinearPointerComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearPointersComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [CollectionChangesService],
selector: 'kendo-lineargauge-pointers',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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>
* @for (range of ranges; track range) {
* <kendo-lineargauge-scale-range [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: "20.3.27", ngImport: i0, type: LinearRangeComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: LinearRangeComponent, isStandalone: true, selector: "kendo-lineargauge-scale-range", providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearRangeComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ConfigurationService],
selector: 'kendo-lineargauge-scale-range',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ type: ConfigurationService }, { type: CollectionChangesService }] });
/**
* Represents a collection of one or more LinearGauge scale ranges
* ([more information and example](https://www.telerik.com/kendo-angular-ui/components/gauges/lineargauge/scale-ranges)).
*
* 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>
* @for (range of ranges; track range) {
* <kendo-lineargauge-scale-range
* [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: "20.3.27", ngImport: i0, type: LinearRangesComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: LinearRangesComponent, isStandalone: true, selector: "kendo-lineargauge-scale-ranges", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: LinearRangeComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearRangesComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [CollectionChangesService],
selector: 'kendo-lineargauge-scale-ranges',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ type: ConfigurationService }, { type: CollectionChangesService }], propDecorators: { children: [{
type: ContentChildren,
args: [LinearRangeComponent]
}] } });
/**
* Represents the configuration options for the scale of the LinearGauge
* ([see example](https://www.telerik.com/kendo-angular-ui/components/gauges/lineargauge/scale-options)).
*
* @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.
*/
set line(value) {
this._line.set(value);
}
get line() {
return this._line();
}
/**
* Configures the ranges that are displayed on the scale.
*/
set ranges(value) {
this._ranges.set(value);
}
get ranges() {
return this._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
*/
set mirror(value) {
this._mirror.set(value);
}
get mirror() {
return this._mirror();
}
/**
* Sets the orientation of the scale. When you set this option to `false`, the scale displays horizontally.
*
* @default true
*/
set vertical(value) {
this._vertical.set(value);
}
get vertical() {
return this._vertical();
}
_vertical = signal(undefined, ...(ngDevMode ? [{ debugName: "_vertical" }] : []));
_mirror = signal(undefined, ...(ngDevMode ? [{ debugName: "_mirror" }] : []));
_ranges = signal(undefined, ...(ngDevMode ? [{ debugName: "_ranges" }] : []));
_line = signal(undefined, ...(ngDevMode ? [{ debugName: "_line" }] : []));
constructor(configurationService) {
super('scale', configurationService);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: LinearScaleComponent, isStandalone: true, selector: "kendo-lineargauge-scale", inputs: { line: "line", ranges: "ranges", mirror: "mirror", vertical: "vertical" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LinearScaleComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-lineargauge-scale',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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: "20.3.27", ngImport: i0, type: RadialGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadialGaugeAreaComponent, isStandalone: true, selector: "kendo-radialgauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialGaugeAreaComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-radialgauge-area',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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.
*/
set cap(value) {
this._cap.set(value);
}
get cap() {
return this._cap();
}
/**
* Specifies the color of the pointer.
*/
set color(value) {
this._color.set(value);
}
get color() {
return this._color();
}
/**
* Sets the length of the pointer as a percentage of the scale radius.
*/
set length(value) {
this._length.set(value);
}
get length() {
return this._length();
}
/**
* Sets the value of the pointer.
*/
set value(v) {
this._value.set(v);
}
get value() {
return this._value();
}
_color = signal(undefined, ...(ngDevMode ? [{ debugName: "_color" }] : []));
_cap = signal(undefined, ...(ngDevMode ? [{ debugName: "_cap" }] : []));
_length = signal(undefined, ...(ngDevMode ? [{ debugName: "_length" }] : []));
_value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
constructor(configurationService, collectionChangesService) {
super(configurationService, collectionChangesService);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialPointerComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialPointerComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ConfigurationService],
selector: 'kendo-radialgauge-pointer',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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](https://www.telerik.com/kendo-angular-ui/components/gauges/radialgauge/multiple-pointers)).
*
* 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>
* @for (pointer of pointers; track pointer) {
* <kendo-radialgauge-pointer
* [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: "20.3.27", ngImport: i0, type: RadialPointersComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadialPointersComponent, isStandalone: true, selector: "kendo-radialgauge-pointers", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: RadialPointerComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialPointersComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [CollectionChangesService],
selector: 'kendo-radialgauge-pointers',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ type: ConfigurationService }, { type: CollectionChangesService }], propDecorators: { children: [{
type: ContentChildren,
args: [RadialPointerComponent]
}] } });
/**
* Represents the [Kendo UI RadialGauge component for Angular](https://www.telerik.com/kendo-angular-ui/components/gauges/radialgauge).
*
* @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.
*/
set pointer(value) {
this._pointer.set(value);
}
get pointer() {
return this._pointer();
}
/**
* Sets the configuration of the scale.
* The scale defines the range, appearance, and behavior of the gauge.
*/
set scale(value) {
super.scale = value;
}
get scale() {
return super.scale;
}
_pointer = signal(undefined, ...(ngDevMode ? [{ debugName: "_pointer" }] : []));
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: "20.3.27", 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: "20.3.27", 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: `
<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: "20.3.27", 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: `
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
`,
standalone: true,
imports: [ResizeSensorComponent]
}]
}], ctorParameters: () => [{ 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: "20.3.27", ngImport: i0, type: RadialRangeComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadialRangeComponent, isStandalone: true, selector: "kendo-radialgauge-scale-range", providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialRangeComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ConfigurationService],
selector: 'kendo-radialgauge-scale-range',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ type: ConfigurationService }, { type: CollectionChangesService }] });
/**
* Represents a collection of one or more RadialGauge scale ranges
* ([more information and example](https://www.telerik.com/kendo-angular-ui/components/gauges/radialgauge/scale-ranges)).
*
* 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>
* @for (range of ranges; track range) {
* <kendo-radialgauge-scale-range
* [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: "20.3.27", ngImport: i0, type: RadialRangesComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadialRangesComponent, isStandalone: true, selector: "kendo-radialgauge-scale-ranges", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: RadialRangeComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialRangesComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [CollectionChangesService],
selector: 'kendo-radialgauge-scale-ranges',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ type: ConfigurationService }, { type: CollectionChangesService }], propDecorators: { children: [{
type: ContentChildren,
args: [RadialRangeComponent]
}] } });
/**
* Represents the configuration options for the scale of a RadialGauge
* ([more information and example](https://www.telerik.com/kendo-angular-ui/components/gauges/radialgauge/scale-options)).
*
* @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.
*/
set labels(value) {
super.labels = value;
}
get labels() {
return super.labels;
}
/**
* Specifies the distance between the scale ranges and the ticks.
*/
set rangeDistance(value) {
this._rangeDistance.set(value);
}
get rangeDistance() {
return this._rangeDistance();
}
/**
* Sets the ranges of the scale.
*/
set ranges(value) {
this._ranges.set(value);
}
get ranges() {
return this._ranges();
}
/**
* Specifies the start angle of the Gauge in degrees.
*/
set startAngle(value) {
this._startAngle.set(value);
}
get startAngle() {
return this._startAngle();
}
/**
* Specifies the end angle of the Gauge in degrees.
*/
set endAngle(value) {
this._endAngle.set(value);
}
get endAngle() {
return this._endAngle();
}
_endAngle = signal(undefined, ...(ngDevMode ? [{ debugName: "_endAngle" }] : []));
_startAngle = signal(undefined, ...(ngDevMode ? [{ debugName: "_startAngle" }] : []));
_ranges = signal(undefined, ...(ngDevMode ? [{ debugName: "_ranges" }] : []));
_rangeDistance = signal(undefined, ...(ngDevMode ? [{ debugName: "_rangeDistance" }] : []));
constructor(configurationService) {
super('scale', configurationService);
this.configurationService = configurationService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadialScaleComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-radialgauge-scale',
template: '',
standalone: true
}]
}], ctorParameters: () => [{ 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: "20.3.27", ngImport: i0, type: ArcGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: ArcGaugeModule, providers: [ThemeService], imports: [ArcGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: LinearGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: LinearGaugeModule, providers: [ThemeService], imports: [LinearGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: RadialGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: RadialGaugeModule, providers: [ThemeService], imports: [RadialGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: CircularGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: CircularGaugeModule, providers: [ThemeService], imports: [CircularGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: GaugesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", 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: "20.3.27", ngImport: i0, type: GaugesModule, providers: [ThemeService], imports: [ArcGaugeComponent, CircularGaugeComponent, LinearGaugeComponent, RadialGaugeComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", 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 };