@progress/kendo-angular-gauges 21.4.1-develop.1 → 22.0.0-develop.1

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

@@ -1,84 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Input, Component } from '@angular/core';
-import { ScaleComponent } from '../base-components';
-import { ConfigurationService } from '../services';
-import * as i0 from "@angular/core";
-import * as i1 from "../services";
-/**
- * Represents the configuration options for the scale of the ArcGauge
- * ([see example]({% slug scaleoptions_arcgauge %})).
- *
- * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * @Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-arcgauge [value]="value">
- *             <kendo-arcgauge-scale
- *                 [startAngle]="-90"
- *                 [endAngle]="90"
- *                 [rangeDistance]="10">
- *             </kendo-arcgauge-scale>
- *         </kendo-arcgauge>
- *     `
- * })
- * export class AppComponent {
- *     public value: number = 30;
- * }
- * ```
- *
- * @remarks
- * Supported children components are: {@link ArcLabelsComponent}
- */
-export class ArcScaleComponent extends ScaleComponent {
-    configurationService;
-    /**
-     * Sets the scale labels configuration.
-     */
-    labels;
-    /**
-     * Sets the distance between the scale ranges in pixels.
-     */
-    rangeDistance;
-    /**
-     * Sets the line cap style for the scale ranges.
-     */
-    rangeLineCap;
-    /**
-     * Sets the start angle of the Gauge in degrees.
-     */
-    startAngle;
-    /**
-     * Sets the end angle of the Gauge in degrees.
-     */
-    endAngle;
-    constructor(configurationService) {
-        super('scale', configurationService);
-        this.configurationService = configurationService;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArcScaleComponent, deps: [{ token: i1.ConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ArcScaleComponent, isStandalone: true, selector: "kendo-arcgauge-scale", inputs: { labels: "labels", rangeDistance: "rangeDistance", rangeLineCap: "rangeLineCap", startAngle: "startAngle", endAngle: "endAngle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArcScaleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-arcgauge-scale',
-                    template: '',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1.ConfigurationService }], propDecorators: { labels: [{
-                type: Input
-            }], rangeDistance: [{
-                type: Input
-            }], rangeLineCap: [{
-                type: Input
-            }], startAngle: [{
-                type: Input
-            }], endAngle: [{
-                type: Input
-            }] } });

package/esm2022/base-components/collection-item.component.mjs

@@ -1,28 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive } from '@angular/core';
-import { CollectionChangesService, ConfigurationService } from '../services';
-import * as i0 from "@angular/core";
-import * as i1 from "../services";
-/**
- * @hidden
- */
-export class CollectionItemComponent {
-    configurationService;
-    collectionChangesService;
-    constructor(configurationService, collectionChangesService) {
-        this.configurationService = configurationService;
-        this.collectionChangesService = collectionChangesService;
-    }
-    ngOnChanges(changes) {
-        this.configurationService.copyChanges('', changes);
-        this.collectionChangesService.hasChanges = true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollectionItemComponent, deps: [{ token: i1.ConfigurationService }, { token: i1.CollectionChangesService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CollectionItemComponent, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollectionItemComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i1.ConfigurationService }, { type: i1.CollectionChangesService }] });

package/esm2022/base-components/collection.component.mjs

@@ -1,44 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive } from '@angular/core';
-import { ConfigurationService, CollectionChangesService } from "../services";
-import * as i0 from "@angular/core";
-import * as i1 from "../services";
-/**
- * @hidden
- */
-export class CollectionComponent {
-    key;
-    configurationService;
-    collectionChangesService;
-    children;
-    subscription;
-    constructor(key, configurationService, collectionChangesService) {
-        this.key = key;
-        this.configurationService = configurationService;
-        this.collectionChangesService = collectionChangesService;
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.configurationService.set(this.key, []);
-    }
-    ngAfterContentInit() {
-        this.subscription = this.children.changes.subscribe(() => this.collectionChangesService.hasChanges = true);
-    }
-    ngAfterContentChecked() {
-        if (this.collectionChangesService.hasChanges) {
-            this.configurationService.set(this.key, this.readItems());
-            this.collectionChangesService.hasChanges = false;
-        }
-    }
-    readItems() {
-        return this.children.map(child => Object.assign({}, child.configurationService.read()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollectionComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CollectionComponent, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollectionComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }, { type: i1.ConfigurationService }, { type: i1.CollectionChangesService }] });

package/esm2022/base-components/gauge-area.component.mjs

@@ -1,59 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
-import { SettingsComponent } from './settings.component';
-import { ConfigurationService } from '../services';
-import * as i0 from "@angular/core";
-import * as i1 from "../services";
-/**
- * @hidden
- */
-export class GaugeAreaComponent extends SettingsComponent {
-    key;
-    configurationService;
-    /**
-     * The background of the Gauge area. Accepts valid CSS color strings, including hex and rgb.
-     */
-    background;
-    /**
-     * The border of the Gauge area.
-     */
-    border;
-    /**
-     * The height of the Gauge area.
-     */
-    height;
-    /**
-     * The margin of the Gauge area.
-     */
-    margin;
-    /**
-     * The width of the Gauge area.
-     */
-    width;
-    // due to NG error: The directive GaugeAreaComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter 
-    // that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor 
-    // to use parameters that are valid for DI.(-992016)
-    constructor(key, configurationService) {
-        super('gaugeArea', configurationService);
-        this.key = key;
-        this.configurationService = configurationService;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GaugeAreaComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: GaugeAreaComponent, inputs: { background: "background", border: "border", height: "height", margin: "margin", width: "width" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GaugeAreaComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }, { type: i1.ConfigurationService }], propDecorators: { background: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }] } });

package/esm2022/base-components/gauge.component.mjs

@@ -1,253 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { HostBinding, NgZone, Input, ViewChild, ElementRef, Renderer2, Directive } from '@angular/core';
-import { ConfigurationService, ThemeService } from '../services';
-import { IntlService } from '@progress/kendo-angular-intl';
-import { exportSVG, exportImage } from '@progress/kendo-drawing';
-import { ResizeSensorComponent } from '@progress/kendo-angular-common';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import { packageMetadata } from '../package-metadata';
-import * as i0 from "@angular/core";
-import * as i1 from "../services";
-import * as i2 from "@progress/kendo-angular-intl";
-import * as i3 from "@progress/kendo-angular-l10n";
-const inDocument = (element) => {
-    let node = element;
-    while (node && node !== document.body) {
-        node = node.parentNode;
-    }
-    return Boolean(node);
-};
-/**
- * @hidden
- */
-export class GaugeComponent {
-    configurationService;
-    themeService;
-    intlService;
-    localizationService;
-    element;
-    renderer;
-    ngZone;
-    /**
-     * Specifies options for the Gauge area.
-     */
-    gaugeArea;
-    /**
-     * Specifies the output type.
-     */
-    renderAs;
-    /**
-     * The maximum number of times the Gauge resizes per second.
-     * Defaults to `10`. To disable the automatic resizing, set `resizeRateLimit` to `0`.
-     */
-    resizeRateLimit = 10;
-    /**
-     * Specifies the scale options.
-     */
-    scale;
-    /**
-     * Specifies if the changes will be animated.
-     */
-    transitions;
-    surfaceElement;
-    resizeSensor;
-    className = true;
-    options;
-    theme = null;
-    instance;
-    subscriptions;
-    redrawTimeout;
-    rtl = false;
-    constructor(configurationService, themeService, intlService, localizationService, element, renderer, ngZone) {
-        this.configurationService = configurationService;
-        this.themeService = themeService;
-        this.intlService = intlService;
-        this.localizationService = localizationService;
-        this.element = element;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        validatePackage(packageMetadata);
-    }
-    ngOnInit() {
-        this.setDirection();
-        this.subscriptions = this.intlService.changes.subscribe(this.intlChange.bind(this));
-        this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
-    }
-    ngAfterViewChecked() {
-        if (typeof document === 'undefined') {
-            return;
-        }
-        let updateMethod;
-        if (!this.instance) {
-            updateMethod = this.init;
-        }
-        else if (this.configurationService.hasChanges) {
-            updateMethod = this.updateOptions;
-        }
-        else if (this.configurationService.valueChange) {
-            updateMethod = this.setValues;
-        }
-        if (updateMethod) {
-            clearTimeout(this.redrawTimeout);
-            if (!this.instance && !inDocument(this.element.nativeElement)) { // required in case the gauge is initialized by ng-content outside of the DOM
-                this.defer(() => {
-                    this.updateCall(updateMethod);
-                });
-            }
-            else {
-                this.updateCall(updateMethod);
-            }
-        }
-    }
-    updateCall(updateMethod) {
-        this.updateDirection();
-        updateMethod.call(this);
-        this.updateSize();
-    }
-    updateOptions() {
-        this.instance.setOptions(this.configurationService.read());
-    }
-    setValues() {
-        this.instance.allValues(this.configurationService.readValues());
-    }
-    ngOnChanges(changes) {
-        this.configurationService.copyChanges('', changes);
-    }
-    ngOnDestroy() {
-        if (this.instance) {
-            this.instance.destroy();
-        }
-        this.subscriptions?.unsubscribe();
-        clearTimeout(this.redrawTimeout);
-    }
-    /**
-     * Exports the Gauge as an image. The export operation is asynchronous and returns a promise.
-     *
-     * @param {ImageExportOptions} options - The parameters for the exported image.
-     * @returns {Promise<string>} - A promise that will be resolved with a PNG image that is encoded as a Data URI.
-     */
-    exportImage(options = {}) {
-        return this.exportVisual().then((visual) => {
-            return exportImage(visual, options);
-        });
-    }
-    /**
-     * Exports the Gauge as an SVG document. The export operation is asynchronous and returns a promise.
-     *
-     * @param {SVGExportOptions} options - The parameters for the exported file.
-     * @returns {Promise<string>} - A promise that will be resolved with an SVG document that is encoded as a Data URI.
-     */
-    exportSVG(options = {}) {
-        return this.exportVisual().then((visual) => {
-            return exportSVG(visual, options);
-        });
-    }
-    /**
-     * Exports the Gauge as a Drawing `Scene`.
-     *
-     * @returns {Promise<Group>} - A promise that will be resolved with the export visual.
-     */
-    exportVisual() {
-        return Promise.resolve(this.instance.exportVisual());
-    }
-    /**
-     * @hidden
-     */
-    onResize() {
-        if (this.autoResize) {
-            this.resize();
-        }
-    }
-    /**
-     * Detects the size of the container and redraws the Gauge.
-     * Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
-     */
-    resize() {
-        if (this.instance) {
-            this.instance.resize();
-        }
-    }
-    init() {
-        if (!this.surfaceElement) {
-            return;
-        }
-        this.createInstance(this.surfaceElement.nativeElement, this.configurationService.read(), this.themeService.read(), {
-            intlService: this.intlService,
-            rtl: this.rtl
-        });
-    }
-    get autoResize() {
-        return this.resizeRateLimit > 0;
-    }
-    updateSize() {
-        this.resizeSensor.acceptSize();
-    }
-    intlChange() {
-        if (this.instance) {
-            this.deferredRedraw();
-        }
-    }
-    rtlChange() {
-        if (this.instance && this.rtl !== this.isRTL) {
-            this.deferredRedraw();
-        }
-    }
-    deferredRedraw() {
-        this.defer(() => {
-            this.updateDirection();
-            this.instance.noTransitionsRedraw();
-        });
-    }
-    defer(callback) {
-        this.ngZone.runOutsideAngular(() => {
-            clearTimeout(this.redrawTimeout);
-            this.redrawTimeout = setTimeout(callback, 0);
-        });
-    }
-    updateDirection() {
-        const current = this.isRTL;
-        if (this.rtl !== current) {
-            this.setDirection();
-            if (this.instance) {
-                this.instance.setDirection(current);
-            }
-        }
-    }
-    setDirection() {
-        this.rtl = this.isRTL;
-        if (this.element) {
-            this.renderer.setAttribute(this.element.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
-        }
-    }
-    get isRTL() {
-        return Boolean(this.localizationService.rtl);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GaugeComponent, deps: [{ token: i1.ConfigurationService }, { token: i1.ThemeService }, { token: i2.IntlService }, { token: i3.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: GaugeComponent, inputs: { gaugeArea: "gaugeArea", renderAs: "renderAs", resizeRateLimit: "resizeRateLimit", scale: "scale", transitions: "transitions" }, host: { properties: { "class.k-gauge": "this.className" } }, viewQueries: [{ propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GaugeComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i1.ConfigurationService }, { type: i1.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']
-            }] } });

package/esm2022/base-components/labels.component.mjs

@@ -1,90 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
-import { SettingsComponent } from './settings.component';
-import { ConfigurationService } from '../services';
-import * as i0 from "@angular/core";
-import * as i1 from "../services";
-/**
- * @hidden
- */
-export class LabelsComponent extends SettingsComponent {
-    key;
-    configurationService;
-    /**
-     * The background of the labels.
-     * Accepts valid CSS color strings, including hex and rgb.
-     */
-    background;
-    /**
-     * The border of the labels.
-     */
-    border;
-    /**
-     * The color of the labels.
-     * Accepts valid CSS color strings, including hex and rgb.
-     */
-    color;
-    /**
-     * The font of the labels.
-     */
-    font;
-    /**
-     * The format that is used to display the labels.
-     * Uses the IntlService [`format`]({% slug api_intl_intlservice %}#toc-format) method.
-     */
-    format;
-    /**
-     * The margin of the labels.
-     */
-    margin;
-    /**
-     * The padding of the labels.
-     */
-    padding;
-    /**
-     * The function which returns the label content.
-     *
-     * The available fields in the function argument are:
-     *
-     * - `value`—The value of the label.
-     */
-    content;
-    /**
-     * The visibility of the labels.
-     */
-    visible;
-    // due to NG error: The directive LabelsComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter 
-    // that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor 
-    // to use parameters that are valid for DI.(-992016)
-    constructor(key, configurationService) {
-        super('label', configurationService);
-        this.key = key;
-        this.configurationService = configurationService;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LabelsComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LabelsComponent, inputs: { background: "background", border: "border", color: "color", font: "font", format: "format", margin: "margin", padding: "padding", content: "content", visible: "visible" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LabelsComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }, { type: i1.ConfigurationService }], propDecorators: { background: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], padding: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }] } });

package/esm2022/base-components/range.component.mjs

@@ -1,41 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
-import { CollectionItemComponent } from './collection-item.component';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class RangeComponent extends CollectionItemComponent {
-    /**
-     * The start position of the range.
-     */
-    from;
-    /**
-     * The end position of the range.
-     */
-    to;
-    /**
-     * The range opacity.
-     */
-    opacity;
-    /**
-     * The color of the range. Accepts valid CSS color strings, including hex and rgb.
-     */
-    color;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RangeComponent, inputs: { from: "from", to: "to", opacity: "opacity", color: "color" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { from: [{
-                type: Input
-            }], to: [{
-                type: Input
-            }], opacity: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });

package/esm2022/base-components/scale.component.mjs

@@ -1,59 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
-import { SettingsComponent } from './settings.component';
-import { ConfigurationService } from '../services';
-import * as i0 from "@angular/core";
-import * as i1 from "../services";
-/**
- * @hidden
- */
-export class ScaleComponent extends SettingsComponent {
-    key;
-    configurationService;
-    labels;
-    majorTicks;
-    minorTicks;
-    min;
-    max;
-    minorUnit;
-    majorUnit;
-    reverse;
-    rangeSize;
-    rangePlaceholderColor;
-    // due to NG error: The directive ScaleComponent inherits its constructor from SettingsComponent, but the latter has a constructor parameter 
-    // that is not compatible with dependency injection. Either add an explicit constructor to ScaleComponent or change SettingsComponent's constructor 
-    // to use parameters that are valid for DI.(-992016)
-    constructor(key, configurationService) {
-        super('scale', configurationService);
-        this.key = key;
-        this.configurationService = configurationService;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScaleComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ScaleComponent, inputs: { labels: "labels", majorTicks: "majorTicks", minorTicks: "minorTicks", min: "min", max: "max", minorUnit: "minorUnit", majorUnit: "majorUnit", reverse: "reverse", rangeSize: "rangeSize", rangePlaceholderColor: "rangePlaceholderColor" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScaleComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }, { type: i1.ConfigurationService }], propDecorators: { labels: [{
-                type: Input
-            }], majorTicks: [{
-                type: Input
-            }], minorTicks: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], minorUnit: [{
-                type: Input
-            }], majorUnit: [{
-                type: Input
-            }], reverse: [{
-                type: Input
-            }], rangeSize: [{
-                type: Input
-            }], rangePlaceholderColor: [{
-                type: Input
-            }] } });