@progress/kendo-angular-gauges 4.1.2 → 5.0.0-dev.202204131907

package/fesm2015/kendo-angular-gauges.js

@@ -0,0 +1,1924 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 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 { Injectable, NgModule, Directive, Input, ViewChild, HostBinding, Optional, Component, ChangeDetectionStrategy, ContentChild, ContentChildren } from '@angular/core';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@progress/kendo-angular-common';
+import { ResizeSensorModule, ResizeSensorComponent } from '@progress/kendo-angular-common';
+export { ResizeSensorComponent } from '@progress/kendo-angular-common';
+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 { validatePackage } from '@progress/kendo-licensing';
+import * as i2 from '@progress/kendo-angular-intl';
+import { ArcGauge, LinearGauge, RadialGauge, CircularGauge } from '@progress/kendo-charts';
+
+function isObject(value) {
+    return typeof value === "object";
+}
+function diffOptions(original, current) {
+    if (Object.keys(original).length !== Object.keys(current).length) {
+        return true;
+    }
+    for (let 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 {
+    constructor() {
+        this.options = {};
+    }
+    copyChanges(prefix, changes) {
+        for (let 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 };
+    }
+}
+ConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+class CollectionChangesService {
+}
+CollectionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollectionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CollectionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollectionChangesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollectionChangesService, decorators: [{
+            type: Injectable
+        }] });
+
+const template = `
+    <div class="k-var--gauge-pointer"></div>
+    <div class="k-var--gauge-track"></div>
+    <div class="k-var--normal-text-color"></div>
+`;
+/**
+ * @hidden
+ */
+class ThemeService {
+    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.innerHTML = template;
+        document.body.appendChild(container);
+        try {
+            const pointerColor = this.getColor(container, 'gauge-pointer');
+            const rangePlaceholder = this.getColor(container, 'gauge-track');
+            const textColor = this.getColor(container, 'normal-text-color');
+            this.options = {
+                pointer: {
+                    color: pointerColor
+                },
+                scale: {
+                    labels: {
+                        color: textColor
+                    },
+                    rangePlaceholderColor: rangePlaceholder,
+                    minorTicks: {
+                        color: textColor
+                    },
+                    majorTicks: {
+                        color: textColor
+                    },
+                    line: {
+                        color: textColor
+                    }
+                }
+            };
+        }
+        finally {
+            document.body.removeChild(container);
+        }
+    }
+    getColor(container, varName) {
+        return window.getComputedStyle(container.querySelector(`.k-var--${varName}`)).backgroundColor;
+    }
+}
+ThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ThemeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+class SharedModule {
+}
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, exports: [ResizeSensorModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, providers: [
+        ThemeService
+    ], imports: [ResizeSensorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [ResizeSensorModule],
+                    providers: [
+                        ThemeService
+                    ]
+                }]
+        }] });
+
+/**
+ * @hidden
+ */
+class CollectionComponent {
+    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()));
+    }
+}
+CollectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollectionComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+CollectionComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CollectionComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollectionComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }, { type: CollectionChangesService }]; } });
+
+/**
+ * @hidden
+ */
+class CollectionItemComponent {
+    constructor(configurationService, collectionChangesService) {
+        this.configurationService = configurationService;
+        this.collectionChangesService = collectionChangesService;
+    }
+    ngOnChanges(changes) {
+        this.configurationService.copyChanges('', changes);
+        this.collectionChangesService.hasChanges = true;
+    }
+}
+CollectionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollectionItemComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+CollectionItemComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CollectionItemComponent, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollectionItemComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; } });
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-gauges',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1649876825,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
+};
+
+const inDocument = (element) => {
+    let node = element;
+    while (node && node !== document.body) {
+        node = node.parentNode;
+    }
+    return Boolean(node);
+};
+/**
+ * @hidden
+ */
+class GaugeComponent {
+    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;
+        /**
+         * The maximum number of times the Gauge resizes per second.
+         * Defaults to `10`. To disable the automatic resizing, set `resizeRateLimit` to `0`.
+         */
+        this.resizeRateLimit = 10;
+        this.className = true;
+        this.theme = null;
+        this.rtl = false;
+        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(_event) {
+        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);
+    }
+}
+GaugeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+GaugeComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: GaugeComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: ThemeService }, { type: i2.IntlService }, { type: i3.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { gaugeArea: [{
+                type: Input
+            }], renderAs: [{
+                type: Input
+            }], resizeRateLimit: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], transitions: [{
+                type: Input
+            }], surfaceElement: [{
+                type: ViewChild,
+                args: ['surface', { static: true }]
+            }], resizeSensor: [{
+                type: ViewChild,
+                args: [ResizeSensorComponent, { static: true }]
+            }], className: [{
+                type: HostBinding,
+                args: ['class.k-gauge']
+            }] } });
+
+/**
+ * @hidden
+ */
+class SettingsComponent {
+    constructor(key, configurationService) {
+        this.key = key;
+        this.configurationService = configurationService;
+    }
+    ngOnChanges(changes) {
+        this.configurationService.copyChanges(this.key, changes);
+    }
+    ngOnDestroy() {
+        this.configurationService.set(this.key, null);
+    }
+}
+SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+SettingsComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SettingsComponent, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }]; } });
+
+/**
+ * @hidden
+ */
+class GaugeAreaComponent extends SettingsComponent {
+}
+GaugeAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GaugeAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GaugeAreaComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GaugeAreaComponent, inputs: { background: "background", border: "border", height: "height", margin: "margin", width: "width" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GaugeAreaComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { background: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LabelsComponent extends SettingsComponent {
+}
+LabelsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LabelsComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+LabelsComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: LabelsComponent, decorators: [{
+            type: Directive
+        }], 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 {
+}
+RangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+RangeComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: RangeComponent, inputs: { from: "from", to: "to", opacity: "opacity", color: "color" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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 {
+}
+ScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ScaleComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: ScaleComponent, decorators: [{
+            type: Directive
+        }], 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
+            }] } });
+
+/**
+ * A directive that selects a [template]({{ site.data.urls.angular['templatesyntax'] }})
+ * within the `<kendo-arcgauge>` component which will be used for the center template
+ * ([more information and example]({% slug centertemplate_arcgauge %})).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-arcgauge [value]="value">
+ *             <ng-template kendoArcGaugeCenterTemplate let-value="value">
+ *                 {{ value }}%
+ *             </ng-template>
+ *         </kendo-arcgauge>
+ *
+ *     `
+ * })
+ * export class AppComponent {
+ *   public value: number = 10;
+ * }
+ *
+ * ```
+ */
+class ArcCenterTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ArcCenterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcCenterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ArcCenterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ArcCenterTemplateDirective, selector: "[kendoArcGaugeCenterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcCenterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoArcGaugeCenterTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * 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;
+ * }
+ *
+ * ```
+ */
+class ArcGaugeComponent extends GaugeComponent {
+    constructor(changeDetector, configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
+        super(configurationService, themeService, intlService, localizationService, element, renderer, ngZone);
+        this.changeDetector = changeDetector;
+        this.className = true;
+        this.centerTemplateContext = {};
+    }
+    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 {Promise<Group>} - A promise that will be resolved with the export visual.
+     */
+    exportVisual() {
+        return drawDOM(this.element.nativeElement);
+    }
+    /**
+     * Detects the size of the container and redraws the Gauge.
+     * Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
+     */
+    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`;
+    }
+    //eslint-disable-next-line  no-empty
+    updateSize() {
+    }
+}
+ArcGaugeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+ArcGaugeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ArcGaugeComponent, selector: "kendo-arcgauge", inputs: { value: "value", color: "color", colors: "colors", opacity: "opacity", scale: "scale" }, host: { properties: { "class.k-arcgauge": "this.className" } }, providers: [
+        ConfigurationService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.arcgauge'
+        }
+    ], queries: [{ propertyName: "centerTemplate", first: true, predicate: ArcCenterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], exportAs: ["kendoArcGauge"], usesInheritance: true, ngImport: i0, template: `
+    <div #surface class='k-chart-surface'></div>
+    <div class="k-arcgauge-label" *ngIf="centerTemplate" #label>
+        <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
+    </div>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+  `, isInline: true, components: [{ type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcGaugeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoArcGauge',
+                    providers: [
+                        ConfigurationService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.arcgauge'
+                        }
+                    ],
+                    selector: 'kendo-arcgauge',
+                    template: `
+    <div #surface class='k-chart-surface'></div>
+    <div class="k-arcgauge-label" *ngIf="centerTemplate" #label>
+        <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
+    </div>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ConfigurationService }, { type: ThemeService }, { type: i2.IntlService }, { type: i3.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { value: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], centerTemplate: [{
+                type: ContentChild,
+                args: [ArcCenterTemplateDirective, { static: false }]
+            }], labelElement: [{
+                type: ViewChild,
+                args: ["label", { static: false }]
+            }], className: [{
+                type: HostBinding,
+                args: ['class.k-arcgauge']
+            }] } });
+
+/**
+ * The configuration options of the ArcGauge area.
+ * Represents the entire visible area of the ArcGauge.
+ */
+class ArcGaugeAreaComponent extends GaugeAreaComponent {
+    constructor(configurationService) {
+        super('gaugeArea', configurationService);
+        this.configurationService = configurationService;
+    }
+}
+ArcGaugeAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+ArcGaugeAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ArcGaugeAreaComponent, selector: "kendo-arcgauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcGaugeAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-arcgauge-area',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
+
+/**
+ * The configuration options for the scale of the ArcGauge
+ * ([see example]({% slug scaleoptions_arcgauge %})).
+ */
+class ArcScaleComponent extends ScaleComponent {
+    constructor(configurationService) {
+        super('scale', configurationService);
+        this.configurationService = configurationService;
+    }
+}
+ArcScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+ArcScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ArcScaleComponent, 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: "12.2.16", ngImport: i0, type: ArcScaleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-arcgauge-scale',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; }, propDecorators: { labels: [{
+                type: Input
+            }], rangeDistance: [{
+                type: Input
+            }], rangeLineCap: [{
+                type: Input
+            }], startAngle: [{
+                type: Input
+            }], endAngle: [{
+                type: Input
+            }] } });
+
+/**
+ * The configuration options for the scale labels of the RadialGauge.
+ */
+class RadialLabelsComponent extends LabelsComponent {
+    constructor(configurationService) {
+        super('scale.labels', configurationService);
+        this.configurationService = configurationService;
+    }
+}
+RadialLabelsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+RadialLabelsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadialLabelsComponent, selector: "kendo-radialgauge-scale-labels", inputs: { position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialLabelsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-radialgauge-scale-labels',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; }, propDecorators: { position: [{
+                type: Input
+            }] } });
+
+/**
+ * The configuration options for the scale labels of the ArcGauge.
+ */
+class ArcLabelsComponent extends RadialLabelsComponent {
+    constructor(configurationService) {
+        super(configurationService);
+        this.configurationService = configurationService;
+        configurationService.set(`${this.key}.visible`, true);
+    }
+}
+ArcLabelsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+ArcLabelsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ArcLabelsComponent, selector: "kendo-arcgauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcLabelsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-arcgauge-scale-labels',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
+
+/**
+ * The configuration options for an ArcGauge color item.
+ */
+class ColorComponent extends CollectionItemComponent {
+    constructor(configurationService, collectionChangesService) {
+        super(configurationService, collectionChangesService);
+    }
+}
+ColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+ColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorComponent, 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: "12.2.16", ngImport: i0, type: ColorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [ConfigurationService],
+                    selector: 'kendo-arcgauge-color',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { color: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], from: [{
+                type: Input
+            }], to: [{
+                type: Input
+            }] } });
+
+/**
+ * A collection of one or more ArcGauge colors
+ * ([more information and example]({% slug colorranges_arcgauge %})).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-arcgauge [value]="value">
+ *              <kendo-arcgauge-colors>
+ *                  <kendo-arcgauge-color *ngFor="let item of colors"
+ *                      [from]="item.from" [to]="item.to" [color]="item.color">
+ *                  </kendo-arcgauge-color>
+ *              </kendo-arcgauge-colors>
+ *         </kendo-arcgauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public value: number = 10;
+ *
+ *     public colors: any[] = [{
+ *         to: 25,
+ *         color: '#0058e9'
+ *     }, {
+ *         from: 25,
+ *         to: 50,
+ *         color: '#37b400'
+ *     }, {
+ *         from: 50,
+ *         to: 75,
+ *         color: '#ffc000'
+ *     }, {
+ *         from: 75,
+ *         color: '#f31700'
+ *     }];
+ * }
+ *
+ * ```
+ */
+class ColorsComponent extends CollectionComponent {
+    constructor(configurationService, collectionChangesService) {
+        super('colors', configurationService, collectionChangesService);
+    }
+}
+ColorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorsComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+ColorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorsComponent, 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: "12.2.16", ngImport: i0, type: ColorsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [CollectionChangesService],
+                    selector: 'kendo-arcgauge-colors',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
+                type: ContentChildren,
+                args: [ColorComponent]
+            }] } });
+
+const DIRECTIVES$3 = [ArcGaugeComponent, ArcCenterTemplateDirective, ArcGaugeAreaComponent, ArcScaleComponent, ArcLabelsComponent,
+    ColorsComponent, ColorComponent];
+/**
+ * A [module]({{ site.data.urls.angular['ngmodules'] }}) that includes the ArcGauge component and its directives.
+ * Imports the `ArcGaugeModule` into your application
+ * [root module]({{ site.data.urls.angular['ngmodules'] }}#angular-modularity) or any other sub-module
+ * that will use the ArcGauge component.
+ *
+ * @example
+ * ```ts-no-run
+ * 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 {
+}
+ArcGaugeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ArcGaugeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcGaugeModule, declarations: [ArcGaugeComponent, ArcCenterTemplateDirective, ArcGaugeAreaComponent, ArcScaleComponent, ArcLabelsComponent,
+        ColorsComponent, ColorComponent], imports: [SharedModule, CommonModule], exports: [ArcGaugeComponent, ArcCenterTemplateDirective, ArcGaugeAreaComponent, ArcScaleComponent, ArcLabelsComponent,
+        ColorsComponent, ColorComponent] });
+ArcGaugeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcGaugeModule, imports: [[SharedModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ArcGaugeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DIRECTIVES$3],
+                    exports: [DIRECTIVES$3],
+                    imports: [SharedModule, CommonModule]
+                }]
+        }] });
+
+/**
+ * Represents the [Kendo UI LinearGauge component for Angular]({% slug overview_lineargauge_gauges %}).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *      <kendo-lineargauge [pointer]="{ value: value }">
+ *      </kendo-lineargauge>
+ *   `
+ * })
+ * class AppComponent {
+ *   public value: number = 10;
+ * }
+ *
+ * ```
+ */
+class LinearGaugeComponent extends GaugeComponent {
+    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);
+    }
+}
+LinearGaugeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+LinearGaugeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinearGaugeComponent, selector: "kendo-lineargauge", inputs: { pointer: "pointer", scale: "scale" }, providers: [
+        ConfigurationService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.lineargauge'
+        }
+    ], exportAs: ["kendoLinearGauge"], usesInheritance: true, ngImport: i0, template: `
+    <div #surface class='k-chart-surface'></div>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+  `, isInline: true, components: [{ type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearGaugeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoLinearGauge',
+                    providers: [
+                        ConfigurationService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.lineargauge'
+                        }
+                    ],
+                    selector: 'kendo-lineargauge',
+                    template: `
+    <div #surface class='k-chart-surface'></div>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: ThemeService }, { type: i2.IntlService }, { type: i3.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { pointer: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }] } });
+
+/**
+ * The configuration options for the LinearGauge area.
+ * Represents the entire visible area of the LinearGauge.
+ */
+class LinearGaugeAreaComponent extends GaugeAreaComponent {
+    constructor(configurationService) {
+        super('gaugeArea', configurationService);
+        this.configurationService = configurationService;
+    }
+}
+LinearGaugeAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+LinearGaugeAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinearGaugeAreaComponent, selector: "kendo-lineargauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearGaugeAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-lineargauge-area',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
+
+/**
+ * The configuration options for the scale of the LinearGauge
+ * ([see example]({% slug scaleoptions_lineargauge %})).
+ */
+class LinearScaleComponent extends ScaleComponent {
+    constructor(configurationService) {
+        super('scale', configurationService);
+        this.configurationService = configurationService;
+    }
+}
+LinearScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+LinearScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinearScaleComponent, selector: "kendo-lineargauge-scale", inputs: { line: "line", ranges: "ranges", mirror: "mirror", vertical: "vertical" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearScaleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-lineargauge-scale',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; }, propDecorators: { line: [{
+                type: Input
+            }], ranges: [{
+                type: Input
+            }], mirror: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }] } });
+
+/**
+ * The configuration options for the scale labels of the LinearGauge.
+ */
+class LinearLabelsComponent extends LabelsComponent {
+    constructor(configurationService) {
+        super('scale.labels', configurationService);
+        this.configurationService = configurationService;
+    }
+}
+LinearLabelsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearLabelsComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+LinearLabelsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinearLabelsComponent, selector: "kendo-lineargauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearLabelsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-lineargauge-scale-labels',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
+
+/**
+ * The configuration options for a pointer item of a LinearGauge.
+ */
+class LinearPointerComponent extends CollectionItemComponent {
+    constructor(configurationService, collectionChangesService) {
+        super(configurationService, collectionChangesService);
+    }
+}
+LinearPointerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearPointerComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+LinearPointerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinearPointerComponent, selector: "kendo-lineargauge-pointer", inputs: { border: "border", color: "color", margin: "margin", opacity: "opacity", shape: "shape", size: "size", value: "value" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearPointerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [ConfigurationService],
+                    selector: 'kendo-lineargauge-pointer',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { border: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+/**
+ * A collection of one or more LinearGauge pointers
+ * ([more information]({% slug multiplepointers_lineargauge %})).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-lineargauge>
+ *             <kendo-lineargauge-pointers>
+ *                 <kendo-lineargauge-pointer *ngFor="let pointer of pointers"
+ *                     [value]="pointer.value" [color]="pointer.color" shape="barIndicator">
+ *                 </kendo-lineargauge-pointer>
+ *             </kendo-lineargauge-pointers>
+ *         </kendo-lineargauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public pointers: any[] = [{
+ *         value: 10,
+ *         color: '#ff4500'
+ *     }, {
+ *         value: 12,
+ *         color: '#28b4c8'
+ *     }, {
+ *         value: 20,
+ *         color: '#8b0000'
+ *     }];
+ * }
+ *
+ * ```
+ */
+class LinearPointersComponent extends CollectionComponent {
+    constructor(configurationService, collectionChangesService) {
+        super('pointer', configurationService, collectionChangesService);
+    }
+}
+LinearPointersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearPointersComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+LinearPointersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinearPointersComponent, selector: "kendo-lineargauge-pointers", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: LinearPointerComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearPointersComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [CollectionChangesService],
+                    selector: 'kendo-lineargauge-pointers',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
+                type: ContentChildren,
+                args: [LinearPointerComponent]
+            }] } });
+
+/**
+ * The configuration options for a scale range item of a LinearGauge.
+ */
+class LinearRangeComponent extends RangeComponent {
+    constructor(configurationService, collectionChangesService) {
+        super(configurationService, collectionChangesService);
+    }
+}
+LinearRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearRangeComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+LinearRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinearRangeComponent, selector: "kendo-lineargauge-scale-range", providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [ConfigurationService],
+                    selector: 'kendo-lineargauge-scale-range',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; } });
+
+/**
+ * A collection of one or more LinearGauge scale ranges
+ * ([more information and example]({% slug scaleranghes_lineargauge %})).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-lineargauge>
+ *             <kendo-lineargauge-scale>
+ *                 <kendo-lineargauge-scale-ranges>
+ *                     <kendo-lineargauge-scale-range *ngFor="let range of ranges"
+ *                         [from]="range.from" [to]="range.to" [color]="range.color">
+ *                     </kendo-lineargauge-scale-range>
+ *                 </kendo-lineargauge-scale-ranges>
+ *             </kendo-lineargauge-scale>
+ *         </kendo-lineargauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public ranges: any[] = [{
+ *         from: 0,
+ *         to: 15,
+ *         color: '#ffd246'
+ *     }, {
+ *         from: 15,
+ *         to: 30,
+ *         color: '#28b4c8'
+ *     }, {
+ *         from: 30,
+ *         to: 50,
+ *         color: '#78d237'
+ *     }];
+ * }
+ *
+ * ```
+ */
+class LinearRangesComponent extends CollectionComponent {
+    constructor(configurationService, collectionChangesService) {
+        super('scale.ranges', configurationService, collectionChangesService);
+    }
+}
+LinearRangesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearRangesComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+LinearRangesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinearRangesComponent, selector: "kendo-lineargauge-scale-ranges", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: LinearRangeComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearRangesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [CollectionChangesService],
+                    selector: 'kendo-lineargauge-scale-ranges',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
+                type: ContentChildren,
+                args: [LinearRangeComponent]
+            }] } });
+
+const DIRECTIVES$2 = [LinearGaugeComponent, LinearGaugeAreaComponent, LinearScaleComponent, LinearLabelsComponent,
+    LinearPointersComponent, LinearPointerComponent, LinearRangeComponent, LinearRangesComponent];
+/**
+ * A [module]({{ site.data.urls.angular['ngmodules'] }}) that includes the LinearGauge component and its directives.
+ * Imports the `LinearGaugeModule` into your application
+ * [root module]({{ site.data.urls.angular['ngmodules'] }}#angular-modularity) or any other sub-module
+ * that will use the LinearGauge component.
+ *
+ * @example
+ * ```ts-no-run
+ * 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 {
+}
+LinearGaugeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LinearGaugeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearGaugeModule, declarations: [LinearGaugeComponent, LinearGaugeAreaComponent, LinearScaleComponent, LinearLabelsComponent,
+        LinearPointersComponent, LinearPointerComponent, LinearRangeComponent, LinearRangesComponent], imports: [SharedModule], exports: [LinearGaugeComponent, LinearGaugeAreaComponent, LinearScaleComponent, LinearLabelsComponent,
+        LinearPointersComponent, LinearPointerComponent, LinearRangeComponent, LinearRangesComponent] });
+LinearGaugeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearGaugeModule, imports: [[SharedModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinearGaugeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DIRECTIVES$2],
+                    exports: [DIRECTIVES$2],
+                    imports: [SharedModule]
+                }]
+        }] });
+
+/**
+ * Represents the [Kendo UI RadialGauge component for Angular]({% slug overview_radialgauge_gauges %}).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *      <kendo-radialgauge [pointer]="{ value: value }">
+ *      </kendo-radialgauge>
+ *   `
+ * })
+ * class AppComponent {
+ *   public value: number = 10;
+ * }
+ *
+ * ```
+ */
+class RadialGaugeComponent extends GaugeComponent {
+    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);
+    }
+}
+RadialGaugeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+RadialGaugeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadialGaugeComponent, selector: "kendo-radialgauge", inputs: { pointer: "pointer", scale: "scale" }, providers: [
+        ConfigurationService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.radialgauge'
+        }
+    ], exportAs: ["kendoRadialGauge"], usesInheritance: true, ngImport: i0, template: `
+    <div #surface class='k-chart-surface'></div>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+  `, isInline: true, components: [{ type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialGaugeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoRadialGauge',
+                    providers: [
+                        ConfigurationService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.radialgauge'
+                        }
+                    ],
+                    selector: 'kendo-radialgauge',
+                    template: `
+    <div #surface class='k-chart-surface'></div>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: ThemeService }, { type: i2.IntlService }, { type: i3.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { pointer: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }] } });
+
+/**
+ * The configuration options for the RadialGauge area.
+ * Represents the entire visible area of the RadialGauge.
+ */
+class RadialGaugeAreaComponent extends GaugeAreaComponent {
+    constructor(configurationService) {
+        super('gaugeArea', configurationService);
+        this.configurationService = configurationService;
+    }
+}
+RadialGaugeAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialGaugeAreaComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+RadialGaugeAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadialGaugeAreaComponent, selector: "kendo-radialgauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialGaugeAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-radialgauge-area',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
+
+/**
+ * The configuration options for the scale of the RadialGauge
+ * ([more information and example]({% slug scaleoptions_radialgauge %})).
+ */
+class RadialScaleComponent extends ScaleComponent {
+    constructor(configurationService) {
+        super('scale', configurationService);
+        this.configurationService = configurationService;
+    }
+}
+RadialScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialScaleComponent, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
+RadialScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadialScaleComponent, selector: "kendo-radialgauge-scale", inputs: { labels: "labels", rangeDistance: "rangeDistance", ranges: "ranges", startAngle: "startAngle", endAngle: "endAngle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialScaleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-radialgauge-scale',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }]; }, propDecorators: { labels: [{
+                type: Input
+            }], rangeDistance: [{
+                type: Input
+            }], ranges: [{
+                type: Input
+            }], startAngle: [{
+                type: Input
+            }], endAngle: [{
+                type: Input
+            }] } });
+
+/**
+ * The configuration options for a pointer item of a RadialGauge.
+ */
+class RadialPointerComponent extends CollectionItemComponent {
+    constructor(configurationService, collectionChangesService) {
+        super(configurationService, collectionChangesService);
+    }
+}
+RadialPointerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialPointerComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+RadialPointerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadialPointerComponent, selector: "kendo-radialgauge-pointer", inputs: { cap: "cap", color: "color", length: "length", value: "value" }, providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialPointerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [ConfigurationService],
+                    selector: 'kendo-radialgauge-pointer',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { cap: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], length: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+/**
+ * A collection of one or more RadialGauge pointers
+ * ([more information and example]({% slug multiplepointers_radialgauge %})).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-radialgauge>
+ *             <kendo-radialgauge-pointers>
+ *                 <kendo-radialgauge-pointer *ngFor="let pointer of pointers"
+ *                     [value]="pointer.value" [color]="pointer.color">
+ *                 </kendo-radialgauge-pointer>
+ *             </kendo-radialgauge-pointers>
+ *         </kendo-radialgauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public pointers: any[] = [{
+ *         value: 10,
+ *         color: '#ffd246'
+ *     }, {
+ *         value: 20,
+ *         color: '#28b4c8'
+ *     }, {
+ *         value: 30,
+ *         color: '#78d237'
+ *     }];
+ * }
+ *
+ * ```
+ */
+class RadialPointersComponent extends CollectionComponent {
+    constructor(configurationService, collectionChangesService) {
+        super('pointer', configurationService, collectionChangesService);
+    }
+}
+RadialPointersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialPointersComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+RadialPointersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadialPointersComponent, selector: "kendo-radialgauge-pointers", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: RadialPointerComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialPointersComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [CollectionChangesService],
+                    selector: 'kendo-radialgauge-pointers',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
+                type: ContentChildren,
+                args: [RadialPointerComponent]
+            }] } });
+
+/**
+ * The configuration options for a scale range item of a RadialGauge.
+ */
+class RadialRangeComponent extends RangeComponent {
+    constructor(configurationService, collectionChangesService) {
+        super(configurationService, collectionChangesService);
+    }
+}
+RadialRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialRangeComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+RadialRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadialRangeComponent, selector: "kendo-radialgauge-scale-range", providers: [ConfigurationService], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [ConfigurationService],
+                    selector: 'kendo-radialgauge-scale-range',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; } });
+
+/**
+ * A collection of one or more RadialGauge scale ranges
+ * ([more information and example]({% slug scaleranghes_radialgauge %})).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-radialgauge>
+ *             <kendo-radialgauge-scale>
+ *                 <kendo-radialgauge-scale-ranges>
+ *                     <kendo-radialgauge-scale-range *ngFor="let range of ranges"
+ *                         [from]="range.from" [to]="range.to" [color]="range.color">
+ *                     </kendo-radialgauge-scale-range>
+ *                 </kendo-radialgauge-scale-ranges>
+ *             </kendo-radialgauge-scale>
+ *         </kendo-radialgauge>
+ *     `
+ * })
+ * export class AppComponent {
+ *     public ranges: any[] = [{
+ *         from: 0,
+ *         to: 15,
+ *         color: '#ffd246'
+ *     }, {
+ *         from: 15,
+ *         to: 30,
+ *         color: '#28b4c8'
+ *     }, {
+ *         from: 30,
+ *         to: 50,
+ *         color: '#78d237'
+ *     }];
+ * }
+ *
+ * ```
+ */
+class RadialRangesComponent extends CollectionComponent {
+    constructor(configurationService, collectionChangesService) {
+        super('scale.ranges', configurationService, collectionChangesService);
+    }
+}
+RadialRangesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialRangesComponent, deps: [{ token: ConfigurationService }, { token: CollectionChangesService }], target: i0.ɵɵFactoryTarget.Component });
+RadialRangesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadialRangesComponent, selector: "kendo-radialgauge-scale-ranges", providers: [CollectionChangesService], queries: [{ propertyName: "children", predicate: RadialRangeComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialRangesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [CollectionChangesService],
+                    selector: 'kendo-radialgauge-scale-ranges',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionChangesService }]; }, propDecorators: { children: [{
+                type: ContentChildren,
+                args: [RadialRangeComponent]
+            }] } });
+
+const DIRECTIVES$1 = [RadialGaugeComponent, RadialGaugeAreaComponent, RadialScaleComponent, RadialLabelsComponent,
+    RadialPointersComponent, RadialPointerComponent, RadialRangeComponent, RadialRangesComponent];
+/**
+ * A [module]({{ site.data.urls.angular['ngmodules'] }}) that includes the RadialGauge component and its directives.
+ * Imports the `RadialGaugeModule` into your application
+ * [root module]({{ site.data.urls.angular['ngmodules'] }}#angular-modularity) or any other sub-module
+ * that will use the RadialGauge component.
+ *
+ * @example
+ * ```ts-no-run
+ * 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 {
+}
+RadialGaugeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadialGaugeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialGaugeModule, declarations: [RadialGaugeComponent, RadialGaugeAreaComponent, RadialScaleComponent, RadialLabelsComponent,
+        RadialPointersComponent, RadialPointerComponent, RadialRangeComponent, RadialRangesComponent], imports: [SharedModule], exports: [RadialGaugeComponent, RadialGaugeAreaComponent, RadialScaleComponent, RadialLabelsComponent,
+        RadialPointersComponent, RadialPointerComponent, RadialRangeComponent, RadialRangesComponent] });
+RadialGaugeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialGaugeModule, imports: [[SharedModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadialGaugeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DIRECTIVES$1],
+                    exports: [DIRECTIVES$1],
+                    imports: [SharedModule]
+                }]
+        }] });
+
+/**
+ * A directive that selects a [template]({{ site.data.urls.angular['templatesyntax'] }})
+ * within the `<kendo-circulargauge>` component which will be used for the center template
+ * ([more information and example]({% slug centertemplate_circulargauge %})).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-circulargauge [value]="value">
+ *             <ng-template kendoCircularGaugeCenterTemplate let-value="value">
+ *                 {{ value }}%
+ *             </ng-template>
+ *         </kendo-circulargauge>
+ *
+ *     `
+ * })
+ * export class AppComponent {
+ *   public value: number = 10;
+ * }
+ *
+ * ```
+ */
+class CircularGaugeCenterTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+CircularGaugeCenterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeCenterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CircularGaugeCenterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CircularGaugeCenterTemplateDirective, selector: "[kendoCircularGaugeCenterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeCenterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoCircularGaugeCenterTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the [Kendo UI CircularGauge component for Angular]({% slug overview_circulargauge_gauges %}).
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *      <kendo-circulargauge [value]="value" [scale]="{ max: 100 }">
+ *          <ng-template kendoCircularGaugeCenterTemplate let-value="value">
+ *              {{ value }}%
+ *          </ng-template>
+ *      </kendo-circulargauge>
+ *   `
+ * })
+ * class AppComponent {
+ *   public value: number = 10;
+ * }
+ *
+ * ```
+ */
+class CircularGaugeComponent extends ArcGaugeComponent {
+    createInstance(element, options, theme, context) {
+        this.instance = new CircularGauge(element, options, theme, context);
+        this.updateElements();
+    }
+}
+CircularGaugeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CircularGaugeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularGaugeComponent, selector: "kendo-circulargauge", inputs: { scale: "scale" }, providers: [
+        ConfigurationService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.circulargauge'
+        }
+    ], queries: [{ propertyName: "centerTemplate", first: true, predicate: CircularGaugeCenterTemplateDirective, descendants: true }], exportAs: ["kendoCircularGauge"], usesInheritance: true, ngImport: i0, template: `
+    <div #surface class='k-chart-surface'></div>
+    <div class="k-arcgauge-label" *ngIf="centerTemplate" #label>
+        <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
+    </div>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+  `, isInline: true, components: [{ type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoCircularGauge',
+                    providers: [
+                        ConfigurationService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.circulargauge'
+                        }
+                    ],
+                    selector: 'kendo-circulargauge',
+                    template: `
+    <div #surface class='k-chart-surface'></div>
+    <div class="k-arcgauge-label" *ngIf="centerTemplate" #label>
+        <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
+    </div>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+  `
+                }]
+        }], propDecorators: { scale: [{
+                type: Input
+            }], centerTemplate: [{
+                type: ContentChild,
+                args: [CircularGaugeCenterTemplateDirective, { static: false }]
+            }] } });
+
+/**
+ * The configuration options of the Circular Gauge area.
+ * Represents the entire visible area of the Circular Gauge.
+ */
+class CircularGaugeAreaComponent extends ArcGaugeAreaComponent {
+}
+CircularGaugeAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CircularGaugeAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularGaugeAreaComponent, selector: "kendo-circulargauge-area", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-circulargauge-area',
+                    template: ''
+                }]
+        }] });
+
+/**
+ * The configuration options for the scale of the Circular Gauge
+ * ([see example]({% slug scaleoptions_circulargauge %})).
+ */
+class CircularGaugeScaleComponent extends ArcScaleComponent {
+}
+CircularGaugeScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeScaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CircularGaugeScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularGaugeScaleComponent, selector: "kendo-circulargauge-scale", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeScaleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-circulargauge-scale',
+                    template: ''
+                }]
+        }] });
+
+/**
+ * The configuration options for the scale labels of the Circular Gauge.
+ */
+class CircularGaugeLabelsComponent extends ArcLabelsComponent {
+}
+CircularGaugeLabelsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeLabelsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CircularGaugeLabelsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularGaugeLabelsComponent, selector: "kendo-circulargauge-scale-labels", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeLabelsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-circulargauge-scale-labels',
+                    template: ''
+                }]
+        }] });
+
+const DIRECTIVES = [
+    CircularGaugeComponent,
+    CircularGaugeCenterTemplateDirective,
+    CircularGaugeAreaComponent,
+    CircularGaugeScaleComponent,
+    CircularGaugeLabelsComponent
+];
+/**
+ * A [module]({{ site.data.urls.angular['ngmodules'] }}) that includes the CircularGauge component and its directives.
+ * Imports the `CircularGaugeModule` into your application
+ * [root module]({{ site.data.urls.angular['ngmodules'] }}#angular-modularity) or any other sub-module
+ * that will use the CircularGauge component.
+ *
+ * @example
+ * ```ts-no-run
+ * 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 {
+}
+CircularGaugeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CircularGaugeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeModule, declarations: [CircularGaugeComponent,
+        CircularGaugeCenterTemplateDirective,
+        CircularGaugeAreaComponent,
+        CircularGaugeScaleComponent,
+        CircularGaugeLabelsComponent], imports: [SharedModule, CommonModule], exports: [CircularGaugeComponent,
+        CircularGaugeCenterTemplateDirective,
+        CircularGaugeAreaComponent,
+        CircularGaugeScaleComponent,
+        CircularGaugeLabelsComponent] });
+CircularGaugeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeModule, imports: [[SharedModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularGaugeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DIRECTIVES],
+                    exports: [DIRECTIVES],
+                    imports: [SharedModule, CommonModule]
+                }]
+        }] });
+
+/**
+ * A [module]({{ site.data.urls.angular['ngmodules'] }}) that includes all Gauge components and directives.
+ *
+ * Imports the `GaugesModule` into your application
+ * [root module]({{ 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-charts';
+ * import { AppComponent } from './app.component';
+ *
+ * _@NgModule({
+ *     bootstrap:    [AppComponent],
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, GaugesModule]
+ * })
+ * export class AppModule {
+ * }
+ * ```
+ */
+class GaugesModule {
+}
+GaugesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GaugesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GaugesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GaugesModule, exports: [ArcGaugeModule, CircularGaugeModule, LinearGaugeModule, RadialGaugeModule] });
+GaugesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GaugesModule, imports: [ArcGaugeModule, CircularGaugeModule, LinearGaugeModule, RadialGaugeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GaugesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [ArcGaugeModule, CircularGaugeModule, LinearGaugeModule, RadialGaugeModule]
+                }]
+        }] });
+
+/**
+ * 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, LabelsComponent, LinearGaugeAreaComponent, LinearGaugeComponent, LinearGaugeModule, LinearLabelsComponent, LinearPointerComponent, LinearPointersComponent, LinearRangeComponent, LinearRangesComponent, LinearScaleComponent, RadialGaugeAreaComponent, RadialGaugeComponent, RadialGaugeModule, RadialLabelsComponent, RadialPointerComponent, RadialPointersComponent, RadialRangeComponent, RadialRangesComponent, RadialScaleComponent, RangeComponent, ScaleComponent, SettingsComponent, ThemeService };
+