@progress/kendo-angular-progressbar 3.0.0 → 3.1.0-dev.202208010920

package/fesm2015/kendo-angular-progressbar.js

@@ -3,13 +3,15 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { isDevMode, Component, HostBinding, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import { isDevMode, Component, HostBinding, Input, EventEmitter, Output, ViewChild, Directive, ContentChild, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { hasObservers } from '@progress/kendo-angular-common';
+import * as i2$1 from '@progress/kendo-angular-common';
+import { hasObservers, isChanged, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { Subscription, take } from 'rxjs';
 
 /**
  * @hidden
@@ -18,7 +20,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-progressbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1650441158,
+    publishDate: 1659345594,
     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'
 };
@@ -111,6 +113,22 @@ const stopCurrentAnimation = (changes) => {
     const hasAnimation = isAnimationChanged && changes.animation.currentValue;
     return isAnimationChanged && !hasAnimation;
 };
+/**
+ * @hidden
+ */
+const setProgressBarStyles = (props, renderer) => {
+    props.forEach(prop => {
+        renderer[prop.method](prop.el, prop.attr, `${prop.attrValue}`);
+    });
+};
+/**
+ * @hidden
+ */
+const removeProgressBarStyles = (props, renderer) => {
+    props.forEach(prop => {
+        renderer[prop.method](prop.el, prop.attr);
+    });
+};
 
 /**
  * @hidden
@@ -263,7 +281,7 @@ class ProgressBarBase {
     }
 }
 ProgressBarBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-widget": "this.widgetClasses", "class.k-progressbar": "this.widgetClasses", "class.k-progressbar-horizontal": "this.isHorizontal", "class.k-progressbar-vertical": "this.isVertical", "class.k-state-disabled": "this.disabledClass", "class.k-progressbar-reverse": "this.reverseClass", "class.k-progressbar-indeterminate": "this.indeterminateClass", "attr.dir": "this.dirAttribute", "attr.role": "this.roleAttribute", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-widget": "this.widgetClasses", "class.k-progressbar": "this.widgetClasses", "class.k-progressbar-horizontal": "this.isHorizontal", "class.k-progressbar-vertical": "this.isVertical", "class.k-disabled": "this.disabledClass", "class.k-progressbar-reverse": "this.reverseClass", "class.k-progressbar-indeterminate": "this.indeterminateClass", "attr.dir": "this.dirAttribute", "attr.role": "this.roleAttribute", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, decorators: [{
             type: Component,
             args: [{
@@ -283,7 +301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-progressbar-vertical']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], reverseClass: [{
                 type: HostBinding,
                 args: ['class.k-progressbar-reverse']
@@ -545,7 +563,7 @@ ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <div
             #progressStatus
-            class="k-state-selected"
+            class="k-selected"
             [class.k-complete]="isCompleted"
             [ngStyle]="progressCssStyle"
             [ngClass]="progressCssClass"
@@ -581,7 +599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </span>
         <div
             #progressStatus
-            class="k-state-selected"
+            class="k-selected"
             [class.k-complete]="isCompleted"
             [ngStyle]="progressCssStyle"
             [ngClass]="progressCssClass"
@@ -712,7 +730,7 @@ ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
                 [class.k-last]="i === chunkCount - 1"
-                [class.k-state-selected]="chunk"
+                [class.k-selected]="chunk"
                 [ngClass]="chunk ? progressCssClass : emptyCssClass"
                 [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
                 [style.width]="orientationStyles.width"
@@ -731,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
                 [class.k-last]="i === chunkCount - 1"
-                [class.k-state-selected]="chunk"
+                [class.k-selected]="chunk"
                 [ngClass]="chunk ? progressCssClass : emptyCssClass"
                 [ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
                 [style.width]="orientationStyles.width"
@@ -760,8 +778,443 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent];
-const MODULES = [CommonModule];
+/**
+ * A directive that selects a template within the <kendo-circularprogessbar> component which will be used for the center template. ([see example]({% slug  %})).
+ */
+class CircularProgressbarCenterTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+CircularProgressbarCenterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CircularProgressbarCenterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressbarCenterTemplateDirective, selector: "[kendoCircularProgressbarCenterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoCircularProgressbarCenterTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Represents the [Kendo UI Circular ProgressBar component for Angular]({% slug circular_progressbar %}).
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({don’t
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-circularprogressbar [value]="value"></kendo-circularprogressbar>
+ *    `
+ * })
+ * class AppComponent {
+ *     public value: number = 50;
+ * }
+ * ```
+ */
+class CircularProgressBarComponent {
+    constructor(renderer, cdr, localizationService, element, zone) {
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.localizationService = localizationService;
+        this.element = element;
+        this.zone = zone;
+        this.hostClasses = true;
+        this.WrapperSize = '200px';
+        /**
+         * Indicates whether an animation will be played on value changes.
+         *
+         * @default false
+         */
+        this.animation = false;
+        /**
+         * The opacity of the value arc.
+         * @default 1
+         */
+        this.opacity = 1;
+        /**
+         * Fires when the animation which indicates the latest value change is completed.
+         */
+        this.animationEnd = new EventEmitter();
+        this.centerTemplateContext = {};
+        this._indeterminate = false;
+        this._max = 100;
+        this._min = 0;
+        this._value = 0;
+        this.internalValue = 0;
+        this.subscriptions = new Subscription();
+        validatePackage(packageMetadata);
+        this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
+    }
+    /**
+     * Sets the default value of the Circular Progressbar between `min` and `max`.
+     *
+     * @default 0
+     */
+    set value(value) {
+        if (value > this.max) {
+            this.handleErrors('value > max');
+        }
+        if (value < this.min) {
+            this.handleErrors('value < min');
+        }
+        this.previousValue = this.value;
+        this._value = value;
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * The maximum value which the Circular Progressbar can accept.
+     *
+     * @default 100
+     */
+    set max(max) {
+        if (max < this.min) {
+            this.handleErrors('max < min');
+        }
+        this._max = max;
+    }
+    get max() {
+        return this._max;
+    }
+    /**
+     * The minimum value which the Circular Progressbar can accept.
+     *
+     * @default 0
+     */
+    set min(min) {
+        if (min > this.max) {
+            this.handleErrors('max < min');
+        }
+        this._min = min;
+    }
+    get min() {
+        return this._min;
+    }
+    /**
+     * Puts the Circular ProgressBar in indeterminate state.
+     * @default false
+     */
+    set indeterminate(indeterminate) {
+        this._indeterminate = indeterminate;
+    }
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    ngAfterViewInit() {
+        this.initProgressArc();
+    }
+    ngOnChanges(changes) {
+        const skipFirstChange = true;
+        if (isChanged('value', changes, skipFirstChange) && this.progress) {
+            if (this.animation) {
+                this.progressbarAnimation();
+            }
+            else {
+                const value = this.value - this.min;
+                this.internalValue = changes.value.currentValue;
+                this.calculateProgress(value);
+            }
+        }
+        if (changes.opacity && this.progress) {
+            setProgressBarStyles([{ method: 'setAttribute', el: this.progress.nativeElement, attr: 'opacity', attrValue: this.opacity }], this.renderer);
+        }
+        if (changes.indeterminate && !changes.indeterminate.firstChange) {
+            this.indeterminateState();
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    onResize(_event) {
+        this.setStyles();
+        const value = this.animation ? this.internalValue : this.value;
+        this.calculateProgress(value);
+        this.updateCenterTemplate(value);
+    }
+    initProgressArc() {
+        this.setStyles();
+        if (this.indeterminate) {
+            this.indeterminateState();
+        }
+        else {
+            if (!this.animation) {
+                const value = this.value - this.min;
+                this.calculateProgress(value);
+            }
+            else {
+                this.progressbarAnimation();
+            }
+        }
+    }
+    calculateProgress(value) {
+        if (this.progressColor) {
+            this.updateProgressColor(value);
+        }
+        // needed when we have *ngIf inside the template to render different content depending on some condition
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.updateCenterTemplate(value + this.min);
+        });
+        const progressArc = this.progress.nativeElement;
+        const radius = this.progress.nativeElement.r.baseVal.value;
+        const circumference = Math.PI * (radius * 2);
+        const dir = this.rtl ? circumference * -1 : circumference;
+        const strokeDashOffest = circumference - dir * (value / (this.max - this.min));
+        const progressCalculations = [
+            { method: 'setStyle', el: progressArc, attr: 'strokeDasharray', attrValue: circumference },
+            { method: 'setStyle', el: progressArc, attr: 'strokeDashoffset', attrValue: strokeDashOffest }
+        ];
+        setProgressBarStyles(progressCalculations, this.renderer);
+    }
+    progressbarAnimation() {
+        const forwardProgress = {
+            isOngoing: this.internalValue > this.value - this.min,
+            isPositive: this.value >= this.previousValue
+        };
+        const backwardProgress = {
+            isOngoing: this.internalValue < this.value - this.min,
+            isNegative: this.value <= this.previousValue
+        };
+        if (forwardProgress.isOngoing && forwardProgress.isPositive ||
+            backwardProgress.isOngoing && backwardProgress.isNegative) {
+            return;
+        }
+        this.calculateProgress(this.internalValue);
+        const from = this.internalValue;
+        if (hasObservers(this.animationEnd)) {
+            this.animationEnd.emit({
+                from: from,
+                to: this.internalValue
+            });
+        }
+        // eslint-disable-next-line no-unused-expressions
+        forwardProgress.isPositive ? this.internalValue += 1 : this.internalValue -= 1;
+        requestAnimationFrame(this.progressbarAnimation.bind(this));
+    }
+    setStyles() {
+        const progressArc = this.progress.nativeElement;
+        const scale = this.scale.nativeElement;
+        const element = this.element.nativeElement;
+        const elWidth = element.getBoundingClientRect().width;
+        const attributesArray = [
+            { method: 'setAttribute', el: progressArc, attr: 'r', attrValue: (elWidth / 2) - 10 },
+            { method: 'setAttribute', el: progressArc, attr: 'cx', attrValue: (elWidth / 2) },
+            { method: 'setAttribute', el: progressArc, attr: 'cy', attrValue: (elWidth / 2) },
+            { method: 'setAttribute', el: progressArc, attr: 'opacity', attrValue: this.opacity },
+            { method: 'setAttribute', el: scale, attr: 'r', attrValue: (elWidth / 2) - 10 },
+            { method: 'setAttribute', el: scale, attr: 'cx', attrValue: (elWidth / 2) },
+            { method: 'setAttribute', el: scale, attr: 'cy', attrValue: (elWidth / 2) }
+        ];
+        setProgressBarStyles(attributesArray, this.renderer);
+    }
+    indeterminateState() {
+        const progressArc = this.progress.nativeElement;
+        if (this.indeterminate) {
+            // the indeterminate state wont work as the `k-circular-progressbar-arc` has a transform: rotate(-90deg) which is 
+            // interfering with the svg animation as the animateTransform brings its own transform: rotate()
+            // This will be like this until the themes release a new version, bringing a new class `k-circular-progressbar-indeterminate-arc`
+            // containing only the necassery CSS styles and we will switch between them when the state of the progressbar is switched.
+            this.calculateProgress(this.value - this.min);
+            const rotate = this.rtl ? { from: 360, to: 0 } : { from: 0, to: 360 };
+            let color;
+            if (!this.progressColor) {
+                color = getComputedStyle(progressArc).stroke;
+            }
+            const indeterminateStyles = [
+                { method: 'setStyle', el: progressArc, attr: 'transform-origin', attrValue: 'center' },
+                { method: 'setStyle', el: progressArc, attr: 'fill', attrValue: 'none' },
+                { method: 'setStyle', el: progressArc, attr: 'stroke-linecap', attrValue: 'round' },
+                { method: 'setStyle', el: progressArc, attr: 'stroke', attrValue: color ? color : this.currentColor }
+            ];
+            setProgressBarStyles(indeterminateStyles, this.renderer);
+            this.renderer.removeClass(progressArc, 'k-circular-progressbar-arc');
+            progressArc.innerHTML = `<animateTransform attributeName="transform" type="rotate" from="${rotate.from} 0 0" to="${rotate.to} 0 0" dur="1s" repeatCount="indefinite" />`;
+        }
+        else {
+            this.renderer.addClass(progressArc, 'k-circular-progressbar-arc');
+            const removeIndeterminateStyles = [
+                { method: 'removeStyle', el: progressArc, attr: 'transform-origin' },
+                { method: 'removeStyle', el: progressArc, attr: 'fill' },
+                { method: 'removeStyle', el: progressArc, attr: 'stroke-linecap' }
+            ];
+            removeProgressBarStyles(removeIndeterminateStyles, this.renderer);
+            progressArc.innerHTML = '';
+            if (this.animation) {
+                this.progressbarAnimation();
+            }
+        }
+    }
+    updateCenterTemplate(value) {
+        if (!this.centerTemplate) {
+            return;
+        }
+        this.centerTemplateContext.value = value;
+        this.centerTemplateContext.color = this.currentColor;
+        this.cdr.detectChanges();
+        this.positionLabel();
+    }
+    positionLabel() {
+        const labelEl = this.labelElement.nativeElement;
+        const elementRect = this.element.nativeElement.getBoundingClientRect();
+        const elWidth = elementRect.width;
+        const elHeight = elementRect.height;
+        const left = (elWidth / 2) - (labelEl.offsetWidth / 2);
+        const top = (elHeight / 2) - (labelEl.offsetHeight / 2);
+        const labelCalculations = [
+            { method: 'setStyle', el: labelEl, attr: 'left', attrValue: `${left}px` },
+            { method: 'setStyle', el: labelEl, attr: 'top', attrValue: `${top}px` }
+        ];
+        setProgressBarStyles(labelCalculations, this.renderer);
+    }
+    get currentColor() {
+        const currentColor = this.progress.nativeElement.style.stroke;
+        return currentColor;
+    }
+    updateProgressColor(value) {
+        const progressArc = this.progress.nativeElement;
+        if (typeof this.progressColor === 'string') {
+            this.renderer.setStyle(progressArc, 'stroke', this.progressColor);
+        }
+        else {
+            for (let i = 0; i < this.progressColor.length; i++) {
+                let from = this.progressColor[i].from;
+                let to = this.progressColor[i].to;
+                if (value >= from && value <= to || (!from && value <= to)) {
+                    this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
+                    break;
+                }
+                if (!to && value >= from) {
+                    this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
+                }
+            }
+        }
+    }
+    handleErrors(type) {
+        if (isDevMode()) {
+            switch (type) {
+                case 'value > max':
+                    throw new Error('The value of the CircularProgressbar cannot exceed the max value');
+                case 'value < min':
+                    throw new Error('The value of the CircularProgressbar cannot be lower than the min value');
+                case 'max < min':
+                    throw new Error('The min value cannot be higher than the max value');
+                default:
+            }
+        }
+    }
+    setDirection() {
+        this.rtl = this.localizationService.rtl;
+        if (this.element) {
+            this.renderer.setAttribute(this.element.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
+        }
+        if (this.labelElement) {
+            this.renderer.setAttribute(this.labelElement.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
+        }
+    }
+    rtlChange() {
+        if (this.element && this.rtl !== this.localizationService.rtl) {
+            this.setDirection();
+        }
+    }
+}
+CircularProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+CircularProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressBarComponent, selector: "kendo-circularprogressbar", inputs: { value: "value", max: "max", min: "min", animation: "animation", opacity: "opacity", indeterminate: "indeterminate", progressColor: "progressColor" }, outputs: { animationEnd: "animationEnd" }, host: { properties: { "class.k-circular-progressbar": "this.hostClasses", "style.width": "this.WrapperSize", "style.height": "this.WrapperSize" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.circularprogressbar'
+        }
+    ], queries: [{ propertyName: "centerTemplate", first: true, predicate: CircularProgressbarCenterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "progress", first: true, predicate: ["progress"], descendants: true }, { propertyName: "scale", first: true, predicate: ["scale"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }, { propertyName: "svgWrapper", first: true, predicate: ["svgWrapper"], descendants: true }], exportAs: ["kendoCircularProgressBar"], usesOnChanges: true, ngImport: i0, template: `
+        <div class="k-circular-progressbar-surface">
+            <div #svgWrapper>
+                <svg #svg>
+                    <g>
+                        <circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>
+                        <circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>
+                    </g>
+                </svg>
+                <div class="k-circular-progressbar-label" *ngIf="centerTemplate" #label>
+                    <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
+                </div>
+            </div>
+        </div>
+        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: i2$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoCircularProgressBar',
+                    selector: 'kendo-circularprogressbar',
+                    template: `
+        <div class="k-circular-progressbar-surface">
+            <div #svgWrapper>
+                <svg #svg>
+                    <g>
+                        <circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>
+                        <circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>
+                    </g>
+                </svg>
+                <div class="k-circular-progressbar-label" *ngIf="centerTemplate" #label>
+                    <ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
+                </div>
+            </div>
+        </div>
+        <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
+    `, providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.circularprogressbar'
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-circular-progressbar']
+            }], WrapperSize: [{
+                type: HostBinding,
+                args: ['style.width']
+            }, {
+                type: HostBinding,
+                args: ['style.height']
+            }], value: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], progressColor: [{
+                type: Input
+            }], animationEnd: [{
+                type: Output
+            }], progress: [{
+                type: ViewChild,
+                args: ['progress']
+            }], scale: [{
+                type: ViewChild,
+                args: ['scale']
+            }], labelElement: [{
+                type: ViewChild,
+                args: ["label"]
+            }], svgWrapper: [{
+                type: ViewChild,
+                args: ["svgWrapper"]
+            }], centerTemplate: [{
+                type: ContentChild,
+                args: [CircularProgressbarCenterTemplateDirective]
+            }] } });
+
+const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective];
+const MODULES = [CommonModule, ResizeSensorModule];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
  * definition for the ProgressBar components.
@@ -796,7 +1249,7 @@ const MODULES = [CommonModule];
 class ProgressBarModule {
 }
 ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ChunkProgressBarComponent], imports: [CommonModule], exports: [ProgressBarComponent, ChunkProgressBarComponent] });
+ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective], imports: [CommonModule, ResizeSensorModule], exports: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective] });
 ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, imports: [MODULES] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,
@@ -811,5 +1264,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChunkProgressBarComponent, ProgressBarComponent, ProgressBarModule };
+export { ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective, ProgressBarComponent, ProgressBarModule };
 

package/main.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 export { ProgressBarComponent } from './progressbar.component';
 export { ChunkProgressBarComponent } from './chunk/chunk-progressbar.component';
+export { CircularProgressBarComponent } from './circularprogressbar/circular-progressbar.component';
 export { ProgressBarOrientation } from './types/progressbar-orientation';
 export { LabelSettings } from './types/label-settings.interface';
 export { LabelPosition } from './types/label-position';
@@ -11,3 +12,5 @@ export { LabelFn } from './types/label-fn-type';
 export { LabelType } from './types/label-type';
 export { ProgressBarAnimation } from './types/progressbar-animation.interface';
 export { ProgressBarModule } from './progressbar.module';
+export { CircularProgressbarCenterTemplateDirective } from './circularprogressbar/center-template.directive';
+export { ProgressColor } from './circularprogressbar/models/circular-progressbar-progress-color-interface';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-progressbar",
-  "version": "3.0.0",
+  "version": "3.1.0-dev.202208010920",
   "description": "Kendo UI Angular component starter template",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@progress/kendo-schematics": "^3.0.0",
+    "@progress/kendo-charts": "^1.18.0",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
@@ -65,11 +66,11 @@
     "fallbackTags": {
       "dev": "latest"
     },
-    "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits",
+    "analyzeCommits": "@progress/semantic-prerelease/analyzeCommits",
     "generateNotes": "@progress/kendo-angular-tasks/lib/generateNotes",
-    "getLastRelease": "@telerik/semantic-prerelease/getLastRelease",
-    "verifyConditions": "@telerik/semantic-prerelease/verifyConditions",
-    "verifyRelease": "@telerik/semantic-prerelease/verifyRelease"
+    "getLastRelease": "@progress/semantic-prerelease/getLastRelease",
+    "verifyConditions": "@progress/semantic-prerelease/verifyConditions",
+    "verifyRelease": "@progress/semantic-prerelease/verifyRelease"
   },
   "main": "bundles/kendo-angular-progressbar.umd.js",
   "module": "fesm2015/kendo-angular-progressbar.js",

package/progressbar.module.d.ts

@@ -5,7 +5,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./progressbar.component";
 import * as i2 from "./chunk/chunk-progressbar.component";
-import * as i3 from "@angular/common";
+import * as i3 from "./circularprogressbar/circular-progressbar.component";
+import * as i4 from "./circularprogressbar/center-template.directive";
+import * as i5 from "@angular/common";
+import * as i6 from "@progress/kendo-angular-common";
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
  * definition for the ProgressBar components.
@@ -39,6 +42,6 @@ import * as i3 from "@angular/common";
  */
 export declare class ProgressBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent], [typeof i3.CommonModule], [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBarComponent, typeof i4.CircularProgressbarCenterTemplateDirective], [typeof i5.CommonModule, typeof i6.ResizeSensorModule], [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBarComponent, typeof i4.CircularProgressbarCenterTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarModule>;
 }