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

Kendo UI Angular Gauges

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import * as i0 from '@angular/core';
import { Directive, Optional, Injectable, Input, ViewChild, HostBinding, Component, ChangeDetectionStrategy, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { gaugeTheme, ArcGauge, CircularGauge, LinearGauge, RadialGauge } from '@progress/kendo-charts';
import * as i2 from '@progress/kendo-angular-intl';
import * as i3 from '@progress/kendo-angular-l10n';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { exportImage, exportSVG, drawDOM } from '@progress/kendo-drawing';
import { ResizeSensorComponent } from '@progress/kendo-angular-common';
import { validatePackage } from '@progress/kendo-licensing';
import { NgTemplateOutlet } from '@angular/common';

/**
 * Represents a directive that allows customizing the center part of the `<kendo-arcgauge>` component.
 * Use this directive to create a center template
 * ([more information and example]({% slug centertemplate_arcgauge %})).
 *
 * The template context provides access to the current ArcGauge value through the `value` and `color` fields.
 *
 * @example
 * ```html
 * <kendo-arcgauge [value]="value">
 *    <ng-template kendoArcGaugeCenterTemplate let-value="value" let-color="color">
 *         {{ value }}%
 *     </ng-template>
 * </kendo-arcgauge>
 * ```
 */
class ArcCenterTemplateDirective {
    templateRef;
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArcCenterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ArcCenterTemplateDirective, isStandalone: true, selector: "[kendoArcGaugeCenterTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationService, decorators: [{
            type: Injectable
        }] });

/**
 * @hidden
 */
class CollectionChangesService {
    hasChanges;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollectionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollectionChangesService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThemeService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", ngImport: i0, type: CollectionComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CollectionComponent, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", ngImport: i0, type: CollectionItemComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CollectionItemComponent, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: 1764751731,
    version: '21.2.0',
    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
};

const inDocument = (element) => {
    let node = element;
    while (node && node !== document.body) {
        node = node.parentNode;
    }
    return Boolean(node);
};
/**
 * @hidden
 */
class GaugeComponent {
    configurationService;
    themeService;
    intlService;
    localizationService;
    element;
    renderer;
    ngZone;
    /**
     * Specifies options for the Gauge area.
     */
    gaugeArea;
    /**
     * Specifies the output type.
     */
    renderAs;
    /**
     * The maximum number of times the Gauge resizes per second.
     * Defaults to `10`. To disable the automatic resizing, set `resizeRateLimit` to `0`.
     */
    resizeRateLimit = 10;
    /**
     * Specifies the scale options.
     */
    scale;
    /**
     * Specifies if the changes will be animated.
     */
    transitions;
    surfaceElement;
    resizeSensor;
    className = true;
    options;
    theme = null;
    instance;
    subscriptions;
    redrawTimeout;
    rtl = false;
    constructor(configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
        this.configurationService = configurationService;
        this.themeService = themeService;
        this.intlService = intlService;
        this.localizationService = localizationService;
        this.element = element;
        this.renderer = renderer;
        this.ngZone = ngZone;
        validatePackage(packageMetadata);
    }
    ngOnInit() {
        this.setDirection();
        this.subscriptions = this.intlService.changes.subscribe(this.intlChange.bind(this));
        this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
    }
    ngAfterViewChecked() {
        if (typeof document === 'undefined') {
            return;
        }
        let updateMethod;
        if (!this.instance) {
            updateMethod = this.init;
        }
        else if (this.configurationService.hasChanges) {
            updateMethod = this.updateOptions;
        }
        else if (this.configurationService.valueChange) {
            updateMethod = this.setValues;
        }
        if (updateMethod) {
            clearTimeout(this.redrawTimeout);
            if (!this.instance && !inDocument(this.element.nativeElement)) { // required in case the gauge is initialized by ng-content outside of the DOM
                this.defer(() => {
                    this.updateCall(updateMethod);
                });
            }
            else {
                this.updateCall(updateMethod);
            }
        }
    }
    updateCall(updateMethod) {
        this.updateDirection();
        updateMethod.call(this);
        this.updateSize();
    }
    updateOptions() {
        this.instance.setOptions(this.configurationService.read());
    }
    setValues() {
        this.instance.allValues(this.configurationService.readValues());
    }
    ngOnChanges(changes) {
        this.configurationService.copyChanges('', changes);
    }
    ngOnDestroy() {
        if (this.instance) {
            this.instance.destroy();
        }
        this.subscriptions?.unsubscribe();
        clearTimeout(this.redrawTimeout);
    }
    /**
     * Exports the Gauge as an image. The export operation is asynchronous and returns a promise.
     *
     * @param {ImageExportOptions} options - The parameters for the exported image.
     * @returns {Promise<string>} - A promise that will be resolved with a PNG image that is encoded as a Data URI.
     */
    exportImage(options = {}) {
        return this.exportVisual().then((visual) => {
            return exportImage(visual, options);
        });
    }
    /**
     * Exports the Gauge as an SVG document. The export operation is asynchronous and returns a promise.
     *
     * @param {SVGExportOptions} options - The parameters for the exported file.
     * @returns {Promise<string>} - A promise that will be resolved with an SVG document that is encoded as a Data URI.
     */
    exportSVG(options = {}) {
        return this.exportVisual().then((visual) => {
            return exportSVG(visual, options);
        });
    }
    /**
     * Exports the Gauge as a Drawing `Scene`.
     *
     * @returns {Promise<Group>} - A promise that will be resolved with the export visual.
     */
    exportVisual() {
        return Promise.resolve(this.instance.exportVisual());
    }
    /**
     * @hidden
     */
    onResize() {
        if (this.autoResize) {
            this.resize();
        }
    }
    /**
     * Detects the size of the container and redraws the Gauge.
     * Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
     */
    resize() {
        if (this.instance) {
            this.instance.resize();
        }
    }
    init() {
        if (!this.surfaceElement) {
            return;
        }
        this.createInstance(this.surfaceElement.nativeElement, this.configurationService.read(), this.themeService.read(), {
            intlService: this.intlService,
            rtl: this.rtl
        });
    }
    get autoResize() {
        return this.resizeRateLimit > 0;
    }
    updateSize() {
        this.resizeSensor.acceptSize();
    }
    intlChange() {
        if (this.instance) {
            this.deferredRedraw();
        }
    }
    rtlChange() {
        if (this.instance && this.rtl !== this.isRTL) {
            this.deferredRedraw();
        }
    }
    deferredRedraw() {
        this.defer(() => {
            this.updateDirection();
            this.instance.noTransitionsRedraw();
        });
    }
    defer(callback) {
        this.ngZone.runOutsideAngular(() => {
            clearTimeout(this.redrawTimeout);
            this.redrawTimeout = setTimeout(callback, 0);
        });
    }
    updateDirection() {
        const current = this.isRTL;
        if (this.rtl !== current) {
            this.setDirection();
            if (this.instance) {
                this.instance.setDirection(current);
            }
        }
    }
    setDirection() {
        this.rtl = this.isRTL;
        if (this.element) {
            this.renderer.setAttribute(this.element.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
        }
    }
    get isRTL() {
        return Boolean(this.localizationService.rtl);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", type: GaugeComponent, inputs: { gaugeArea: "gaugeArea", renderAs: "renderAs", resizeRateLimit: "resizeRateLimit", scale: "scale", transitions: "transitions" }, host: { properties: { "class.k-gauge": "this.className" } }, viewQueries: [{ propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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
            }], surfaceElement: [{
                type: ViewChild,
                args: ['surface', { static: true }]
            }], resizeSensor: [{
                type: ViewChild,
                args: [ResizeSensorComponent, { static: true }]
            }], className: [{
                type: HostBinding,
                args: ['class.k-gauge']
            }] } });

/**
 * @hidden
 */
class SettingsComponent {
    key;
    configurationService;
    constructor(key, configurationService) {
        this.key = key;
        this.configurationService = configurationService;
    }
    ngOnChanges(changes) {
        this.configurationService.copyChanges(this.key, changes);
    }
    ngOnDestroy() {
        this.configurationService.set(this.key, null);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingsComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SettingsComponent, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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.
     */
    background;
    /**
     * The border of the Gauge area.
     */
    border;
    /**
     * The height of the Gauge area.
     */
    height;
    /**
     * The margin of the Gauge area.
     */
    margin;
    /**
     * The width of the Gauge area.
     */
    width;
    // due to NG error: The directive GaugeAreaComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter 
    // that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor 
    // to use parameters that are valid for DI.(-992016)
    constructor(key, configurationService) {
        super('gaugeArea', configurationService);
        this.key = key;
        this.configurationService = configurationService;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GaugeAreaComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: GaugeAreaComponent, inputs: { background: "background", border: "border", height: "height", margin: "margin", width: "width" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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.
     */
    background;
    /**
     * The border of the labels.
     */
    border;
    /**
     * The color of the labels.
     * Accepts valid CSS color strings, including hex and rgb.
     */
    color;
    /**
     * The font of the labels.
     */
    font;
    /**
     * The format that is used to display the labels.
     * Uses the IntlService [`format`]({% slug api_intl_intlservice %}#toc-format) method.
     */
    format;
    /**
     * The margin of the labels.
     */
    margin;
    /**
     * The padding of the labels.
     */
    padding;
    /**
     * The function which returns the label content.
     *
     * The available fields in the function argument are:
     *
     * - `value`&mdash;The value of the label.
     */
    content;
    /**
     * The visibility of the labels.
     */
    visible;
    // due to NG error: The directive LabelsComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter 
    // that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor 
    // to use parameters that are valid for DI.(-992016)
    constructor(key, configurationService) {
        super('label', configurationService);
        this.key = key;
        this.configurationService = configurationService;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LabelsComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LabelsComponent, inputs: { background: "background", border: "border", color: "color", font: "font", format: "format", margin: "margin", padding: "padding", content: "content", visible: "visible" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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.
     */
    from;
    /**
     * The end position of the range.
     */
    to;
    /**
     * The range opacity.
     */
    opacity;
    /**
     * The color of the range. Accepts valid CSS color strings, including hex and rgb.
     */
    color;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RangeComponent, inputs: { from: "from", to: "to", opacity: "opacity", color: "color" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeComponent, decorators: [{
            type: Directive
        }], propDecorators: { from: [{
                type: Input
            }], to: [{
                type: Input
            }], opacity: [{
                type: Input
            }], color: [{
                type: Input
            }] } });

/**
 * @hidden
 */
class ScaleComponent extends SettingsComponent {
    key;
    configurationService;
    labels;
    majorTicks;
    minorTicks;
    min;
    max;
    minorUnit;
    majorUnit;
    reverse;
    rangeSize;
    rangePlaceholderColor;
    // due to NG error: The directive ScaleComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter 
    // that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor 
    // to use parameters that are valid for DI.(-992016)
    constructor(key, configurationService) {
        super('scale', configurationService);
        this.key = key;
        this.configurationService = configurationService;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScaleComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ScaleComponent, inputs: { labels: "labels", majorTicks: "majorTicks", minorTicks: "minorTicks", min: "min", max: "max", minorUnit: "minorUnit", majorUnit: "majorUnit", reverse: "reverse", rangeSize: "rangeSize", rangePlaceholderColor: "rangePlaceholderColor" }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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]({% slug overview_arcgauge_gauges %}).
 *
 * @example
 * ```ts
 * import { Component } from '@angular/core';
 *
 * @Component({
 *   selector: 'my-app',
 *   template: `
 *      <kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
 *          <ng-template kendoArcGaugeCenterTemplate let-value="value">
 *              {{ value }}%
 *          </ng-template>
 *      </kendo-arcgauge>
 *   `
 * })
 * class AppComponent {
 *   public value: number = 10;
 * }
 * ```
 *
 * @remarks
 * Supported children components are: {@link ArcScaleComponent}, {@link ArcLabelsComponent}, {@link ArcGaugeAreaComponent}, {@link ColorsComponent}.
 */
class ArcGaugeComponent extends GaugeComponent {
    changeDetector;
    /**
     * Sets the value of the gauge.
     */
    value;
    /**
     * Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
     */
    color;
    /**
     * Sets the color ranges of the value pointer.
     */
    colors;
    /**
     * Sets the opacity of the value pointer.
     */
    opacity;
    /**
     * Sets the scale options of the ArcGauge.
     */
    scale;
    centerTemplate;
    labelElement;
    className = true;
    centerTemplateContext = {};
    constructor(changeDetector, configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
        super(configurationService, themeService, intlService, localizationService, element, renderer, ngZone);
        this.changeDetector = changeDetector;
    }
    ngOnInit() {
        super.ngOnInit();
        if (this.element) {
            this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
        }
    }
    ngAfterViewChecked() {
        super.ngAfterViewChecked();
        if (this.labelElement && !this.centerTemplate) {
            this.changeDetector.detectChanges();
        }
        else if (!this.labelElement && this.centerTemplate) {
            this.updateCenterTemplate();
        }
    }
    /**
     * Exports the Gauge as a Drawing `Scene`.
     *
     * @returns A promise that resolves with the export visual.
     */
    exportVisual() {
        return drawDOM(this.element.nativeElement);
    }
    /**
     * Detects the size of the container and redraws the Gauge.
     * Resizing happens automatically unless you set the `resizeRateLimit` option to `0`.
     */
    resize() {
        super.resize();
        this.updateCenterTemplate();
    }
    createInstance(element, options, theme, context) {
        this.instance = new ArcGauge(element, options, theme, context);
        this.updateElements();
    }
    updateOptions() {
        super.updateOptions();
        this.updateElements();
    }
    setValues() {
        const value = this.configurationService.readValue();
        this.instance.value(value);
        this.updateCenterTemplate();
    }
    updateElements() {
        this.resizeSensor.acceptSize();
        this.updateCenterTemplate();
    }
    updateCenterTemplate() {
        if (!this.instance || !this.centerTemplate) {
            return;
        }
        this.centerTemplateContext.value = this.instance.value();
        this.centerTemplateContext.color = this.instance.currentColor();
        this.changeDetector.detectChanges();
        this.positionLabel();
    }
    positionLabel() {
        if (!this.labelElement) {
            return;
        }
        const element = this.labelElement.nativeElement;
        const width = element.offsetWidth;
        const height = element.offsetHeight;
        const position = this.instance.centerLabelPosition(width, height);
        element.style.top = `${position.top}px`;
        element.style.left = `${position.left}px`;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", type: ArcGaugeComponent, isStandalone: true, selector: "kendo-arcgauge", inputs: { value: "value", color: "color", colors: "colors", opacity: "opacity", scale: "scale" }, host: { properties: { "class.k-arcgauge": "this.className" } }, providers: [
            ConfigurationService,
            LocalizationService,
            {
                provide: L10N_PREFIX,
                useValue: 'kendo.arcgauge'
            }
        ], queries: [{ propertyName: "centerTemplate", first: true, predicate: ArcCenterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], exportAs: ["kendoArcGauge"], usesInheritance: true, ngImport: i0, template: `
    <div #surface class='k-chart-surface'></div>
    @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: "18.2.14", ngImport: i0, type: ArcGaugeComponent, decorators: [{
            type: Component,
            args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    exportAs: 'kendoArcGauge',
                    providers: [
                        ConfigurationService,
                        LocalizationService,
                        {
                            provide: L10N_PREFIX,
                            useValue: 'kendo.arcgauge'
                        }
                    ],
                    selector: 'kendo-arcgauge',
                    template: `
    <div #surface class='k-chart-surface'></div>
    @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.
     */
    color;
    /**
     * Sets the opacity of the range.
     */
    opacity;
    /**
     * Sets the start value of the range.
     */
    from;
    /**
     * Sets the end value of the range.
     */
    to;
    constructor(configurationService, collectionChangesService) {
        super(configurationService, collectionChangesService);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColorComponent, isStandalone: true, selector: "kendo-arcgauge-color", inputs: { color: "color", opacity: "opacity", from: "from", to: "to" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorComponent, decorators: [{
            type: Component,
            args: [{
                    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]({% slug colorranges_arcgauge %})).
 *
 * @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: "18.2.14", ngImport: i0, type: ColorsComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColorsComponent, isStandalone: true, selector: "kendo-arcgauge-colors", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: ColorComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorsComponent, decorators: [{
            type: Component,
            args: [{
                    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: "18.2.14", ngImport: i0, type: ArcGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ArcGaugeAreaComponent, isStandalone: true, selector: "kendo-arcgauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArcGaugeAreaComponent, decorators: [{
            type: Component,
            args: [{
                    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.
     */
    position;
    constructor(configurationService) {
        super('scale.labels', configurationService);
        this.configurationService = configurationService;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadialLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RadialLabelsComponent, isStandalone: true, selector: "kendo-radialgauge-scale-labels", inputs: { position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadialLabelsComponent, decorators: [{
            type: Component,
            args: [{
                    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: "18.2.14", ngImport: i0, type: ArcLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ArcLabelsComponent, isStandalone: true, selector: "kendo-arcgauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArcLabelsComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'kendo-arcgauge-scale-labels',
                    template: '',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: ConfigurationService }] });

/**
 * Represents the configuration options for the scale of the ArcGauge
 * ([see example]({% slug scaleoptions_arcgauge %})).
 *
 * @example
 * ```ts
 * import { Component } from '@angular/core';
 *
 * @Component({
 *     selector: 'my-app',
 *     template: `
 *         <kendo-arcgauge [value]="value">
 *             <kendo-arcgauge-scale
 *                 [startAngle]="-90"
 *                 [endAngle]="90"
 *                 [rangeDistance]="10">
 *             </kendo-arcgauge-scale>
 *         </kendo-arcgauge>
 *     `
 * })
 * export class AppComponent {
 *     public value: number = 30;
 * }
 * ```
 *
 * @remarks
 * Supported children components are: {@link ArcLabelsComponent}
 */
class ArcScaleComponent extends ScaleComponent {
    configurationService;
    /**
     * Sets the scale labels configuration.
     */
    labels;
    /**
     * Sets the distance between the scale ranges in pixels.
     */
    rangeDistance;
    /**
     * Sets the line cap style for the scale ranges.
     */
    rangeLineCap;
    /**
     * Sets the start angle of the Gauge in degrees.
     */
    startAngle;
    /**
     * Sets the end angle of the Gauge in degrees.
     */
    endAngle;
    constructor(configurationService) {
        super('scale', configurationService);
        this.configurationService = configurationService;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArcScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ArcScaleComponent, isStandalone: true, selector: "kendo-arcgauge-scale", inputs: { labels: "labels", rangeDistance: "rangeDistance", rangeLineCap: "rangeLineCap", startAngle: "startAngle", endAngle: "endAngle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArcScaleComponent, decorators: [{
            type: Component,
            args: [{
                    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]({% slug centertemplate_circulargauge %})).
 *
 * The template context provides access to the current CircularGauge value through the `value` and `color` fields.
 *
 * @example
 * ```html
 * <kendo-circulargauge [value]="value">
 *     <ng-template kendoCircularGaugeCenterTemplate let-value="value" let-color="color">
 *          { value }}%
 *     </ng-template>
 * </kendo-circulargauge>
 * ```
 */
class CircularGaugeCenterTemplateDirective {
    templateRef;
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CircularGaugeCenterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CircularGaugeCenterTemplateDirective, isStandalone: true, selector: "[kendoCircularGaugeCenterTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CircularGaugeCenterTemplateDirective, decorators: [{
            type: Directive,