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

package/esm2015/circularprogressbar/circular-progressbar.component.js

@@ -0,0 +1,414 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ContentChild, EventEmitter, HostBinding, Input, isDevMode, Output, ViewChild } from '@angular/core';
+import { hasObservers } from '@progress/kendo-angular-common';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Subscription } from 'rxjs';
+import { removeProgressBarStyles, setProgressBarStyles } from '../common/util';
+import { packageMetadata } from '../package-metadata';
+import { CircularProgressbarCenterTemplateDirective } from './center-template.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+/**
+ * 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;
+ * }
+ * ```
+ */
+export class CircularProgressBar {
+    constructor(renderer, cdr, localizationService, element) {
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.localizationService = localizationService;
+        this.element = element;
+        this.hostClasses = true;
+        this.WrapperSize = '200px';
+        /**
+         * Indicates whether an animation will be played on value changes.
+         *
+         * @default true
+         */
+        this.animation = true;
+        /**
+         * 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 isValueChanged = changes.value;
+        const isProgressArcCreated = this.progress;
+        const isValueSecondChange = !changes.value.firstChange;
+        if (isValueChanged && isProgressArcCreated && isValueSecondChange) {
+            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();
+    }
+    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);
+        }
+        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 };
+            this.renderer.removeClass(progressArc, 'k-circular-progressbar-arc');
+            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' }
+            ];
+            setProgressBarStyles(indeterminateStyles, this.renderer);
+            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 svgWrapper = this.svgWrapper.nativeElement.getBoundingClientRect();
+        const svgWrapperWidth = svgWrapper.width;
+        const svgWrapperHeight = svgWrapper.height;
+        const left = (svgWrapperWidth / 2) - (labelEl.offsetWidth / 2);
+        const top = (svgWrapperHeight / 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 Circular Progressbar cannot exceed the max value');
+                case 'value < min':
+                    throw new Error('The value of the Circular Progressbar 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();
+        }
+    }
+}
+CircularProgressBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBar, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+CircularProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressBar, 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>
+    `, isInline: true, 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: CircularProgressBar, 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>
+    `, providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.circularprogressbar'
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, 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]
+            }] } });

package/esm2015/circularprogressbar/models/center-template-context.interface.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/circularprogressbar/models/circular-progressbar-progress-color-interface.js

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * The color range configuration of the pointer.
+ */
+export {};

package/esm2015/common/util.js

@@ -79,3 +79,19 @@ export const stopCurrentAnimation = (changes) => {
     const hasAnimation = isAnimationChanged && changes.animation.currentValue;
     return isAnimationChanged && !hasAnimation;
 };
+/**
+ * @hidden
+ */
+export const setProgressBarStyles = (props, renderer) => {
+    props.forEach(prop => {
+        renderer[prop.method](prop.el, prop.attr, `${prop.attrValue}`);
+    });
+};
+/**
+ * @hidden
+ */
+export const removeProgressBarStyles = (props, renderer) => {
+    props.forEach(prop => {
+        renderer[prop.method](prop.el, prop.attr);
+    });
+};

package/esm2015/main.js

@@ -4,4 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 export { ProgressBarComponent } from './progressbar.component';
 export { ChunkProgressBarComponent } from './chunk/chunk-progressbar.component';
+export { CircularProgressBar } from './circularprogressbar/circular-progressbar.component';
+export { CircularProgressbarCenterTemplateDirective } from './circularprogressbar/center-template.directive';
 export { ProgressBarModule } from './progressbar.module';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-progressbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1650441158,
+    publishDate: 1658826162,
     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'
 };

package/esm2015/progressbar.module.js

@@ -6,9 +6,12 @@ import { ChunkProgressBarComponent } from './chunk/chunk-progressbar.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ProgressBarComponent } from './progressbar.component';
+import { CircularProgressBar } from './circularprogressbar/circular-progressbar.component';
+import { ResizeSensorModule } from '@progress/kendo-angular-common';
+import { CircularProgressbarCenterTemplateDirective } from './circularprogressbar/center-template.directive';
 import * as i0 from "@angular/core";
-const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent];
-const MODULES = [CommonModule];
+const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective];
+const MODULES = [CommonModule, ResizeSensorModule];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
  * definition for the ProgressBar components.
@@ -43,7 +46,7 @@ const MODULES = [CommonModule];
 export 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, CircularProgressBar, CircularProgressbarCenterTemplateDirective], imports: [CommonModule, ResizeSensorModule], exports: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, 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,