@progress/kendo-angular-progressbar 3.0.0 → 3.1.0-dev.202207260903
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/kendo-angular-progressbar.umd.js +1 -1
- package/circularprogressbar/center-template.directive.d.ts +15 -0
- package/circularprogressbar/circular-progressbar.component.d.ts +113 -0
- package/circularprogressbar/models/center-template-context.interface.d.ts +17 -0
- package/circularprogressbar/models/circular-progressbar-progress-color-interface.d.ts +21 -0
- package/common/util.d.ts +9 -1
- package/esm2015/circularprogressbar/center-template.directive.js +22 -0
- package/esm2015/circularprogressbar/circular-progressbar.component.js +414 -0
- package/esm2015/circularprogressbar/models/center-template-context.interface.js +5 -0
- package/esm2015/circularprogressbar/models/circular-progressbar-progress-color-interface.js +8 -0
- package/esm2015/common/util.js +16 -0
- package/esm2015/main.js +2 -0
- package/esm2015/package-metadata.js +1 -1
- package/esm2015/progressbar.module.js +6 -3
- package/fesm2015/kendo-angular-progressbar.js +441 -7
- package/main.d.ts +3 -0
- package/package.json +6 -5
- package/progressbar.module.d.ts +5 -2
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { isDevMode, Component, HostBinding, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
|
|
6
|
+
import { isDevMode, Component, HostBinding, Input, EventEmitter, Output, ViewChild, Directive, ContentChild, NgModule } from '@angular/core';
|
|
7
7
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
8
8
|
import * as i1 from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
10
|
-
import { hasObservers } from '@progress/kendo-angular-common';
|
|
10
|
+
import { hasObservers, ResizeSensorModule } from '@progress/kendo-angular-common';
|
|
11
11
|
import * as i2 from '@angular/common';
|
|
12
12
|
import { CommonModule } from '@angular/common';
|
|
13
|
+
import { Subscription } from 'rxjs';
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* @hidden
|
|
@@ -18,7 +19,7 @@ const packageMetadata = {
|
|
|
18
19
|
name: '@progress/kendo-angular-progressbar',
|
|
19
20
|
productName: 'Kendo UI for Angular',
|
|
20
21
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
21
|
-
publishDate:
|
|
22
|
+
publishDate: 1658826162,
|
|
22
23
|
version: '',
|
|
23
24
|
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'
|
|
24
25
|
};
|
|
@@ -111,6 +112,22 @@ const stopCurrentAnimation = (changes) => {
|
|
|
111
112
|
const hasAnimation = isAnimationChanged && changes.animation.currentValue;
|
|
112
113
|
return isAnimationChanged && !hasAnimation;
|
|
113
114
|
};
|
|
115
|
+
/**
|
|
116
|
+
* @hidden
|
|
117
|
+
*/
|
|
118
|
+
const setProgressBarStyles = (props, renderer) => {
|
|
119
|
+
props.forEach(prop => {
|
|
120
|
+
renderer[prop.method](prop.el, prop.attr, `${prop.attrValue}`);
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* @hidden
|
|
125
|
+
*/
|
|
126
|
+
const removeProgressBarStyles = (props, renderer) => {
|
|
127
|
+
props.forEach(prop => {
|
|
128
|
+
renderer[prop.method](prop.el, prop.attr);
|
|
129
|
+
});
|
|
130
|
+
};
|
|
114
131
|
|
|
115
132
|
/**
|
|
116
133
|
* @hidden
|
|
@@ -760,8 +777,425 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
760
777
|
type: Input
|
|
761
778
|
}] } });
|
|
762
779
|
|
|
763
|
-
|
|
764
|
-
|
|
780
|
+
/**
|
|
781
|
+
* A directive that selects a template within the <kendo-circularprogessbar> component which will be used for the center template. ([see example]({% slug %})).
|
|
782
|
+
*/
|
|
783
|
+
class CircularProgressbarCenterTemplateDirective {
|
|
784
|
+
constructor(templateRef) {
|
|
785
|
+
this.templateRef = templateRef;
|
|
786
|
+
}
|
|
787
|
+
}
|
|
788
|
+
CircularProgressbarCenterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
789
|
+
CircularProgressbarCenterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressbarCenterTemplateDirective, selector: "[kendoCircularProgressbarCenterTemplate]", ngImport: i0 });
|
|
790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, decorators: [{
|
|
791
|
+
type: Directive,
|
|
792
|
+
args: [{
|
|
793
|
+
selector: '[kendoCircularProgressbarCenterTemplate]'
|
|
794
|
+
}]
|
|
795
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
796
|
+
|
|
797
|
+
/**
|
|
798
|
+
* Represents the [Kendo UI Circular ProgressBar component for Angular]({% slug circular_progressbar %}).
|
|
799
|
+
*
|
|
800
|
+
* @example
|
|
801
|
+
* ```ts-preview
|
|
802
|
+
* _@Component({don’t
|
|
803
|
+
* selector: 'my-app',
|
|
804
|
+
* template: `
|
|
805
|
+
* <kendo-circularprogressbar [value]="value"></kendo-circularprogressbar>
|
|
806
|
+
* `
|
|
807
|
+
* })
|
|
808
|
+
* class AppComponent {
|
|
809
|
+
* public value: number = 50;
|
|
810
|
+
* }
|
|
811
|
+
* ```
|
|
812
|
+
*/
|
|
813
|
+
class CircularProgressBar {
|
|
814
|
+
constructor(renderer, cdr, localizationService, element) {
|
|
815
|
+
this.renderer = renderer;
|
|
816
|
+
this.cdr = cdr;
|
|
817
|
+
this.localizationService = localizationService;
|
|
818
|
+
this.element = element;
|
|
819
|
+
this.hostClasses = true;
|
|
820
|
+
this.WrapperSize = '200px';
|
|
821
|
+
/**
|
|
822
|
+
* Indicates whether an animation will be played on value changes.
|
|
823
|
+
*
|
|
824
|
+
* @default true
|
|
825
|
+
*/
|
|
826
|
+
this.animation = true;
|
|
827
|
+
/**
|
|
828
|
+
* The opacity of the value arc.
|
|
829
|
+
* @default 1
|
|
830
|
+
*/
|
|
831
|
+
this.opacity = 1;
|
|
832
|
+
/**
|
|
833
|
+
* Fires when the animation which indicates the latest value change is completed.
|
|
834
|
+
*/
|
|
835
|
+
this.animationEnd = new EventEmitter();
|
|
836
|
+
this.centerTemplateContext = {};
|
|
837
|
+
this._indeterminate = false;
|
|
838
|
+
this._max = 100;
|
|
839
|
+
this._min = 0;
|
|
840
|
+
this._value = 0;
|
|
841
|
+
this.internalValue = 0;
|
|
842
|
+
this.subscriptions = new Subscription();
|
|
843
|
+
validatePackage(packageMetadata);
|
|
844
|
+
this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
|
|
845
|
+
}
|
|
846
|
+
/**
|
|
847
|
+
* Sets the default value of the Circular Progressbar between `min` and `max`.
|
|
848
|
+
*
|
|
849
|
+
* @default 0
|
|
850
|
+
*/
|
|
851
|
+
set value(value) {
|
|
852
|
+
if (value > this.max) {
|
|
853
|
+
this.handleErrors('value > max');
|
|
854
|
+
}
|
|
855
|
+
if (value < this.min) {
|
|
856
|
+
this.handleErrors('value < min');
|
|
857
|
+
}
|
|
858
|
+
this.previousValue = this.value;
|
|
859
|
+
this._value = value;
|
|
860
|
+
}
|
|
861
|
+
get value() {
|
|
862
|
+
return this._value;
|
|
863
|
+
}
|
|
864
|
+
/**
|
|
865
|
+
* The maximum value which the Circular Progressbar can accept.
|
|
866
|
+
*
|
|
867
|
+
* @default 100
|
|
868
|
+
*/
|
|
869
|
+
set max(max) {
|
|
870
|
+
if (max < this.min) {
|
|
871
|
+
this.handleErrors('max < min');
|
|
872
|
+
}
|
|
873
|
+
this._max = max;
|
|
874
|
+
}
|
|
875
|
+
get max() {
|
|
876
|
+
return this._max;
|
|
877
|
+
}
|
|
878
|
+
/**
|
|
879
|
+
* The minimum value which the Circular Progressbar can accept.
|
|
880
|
+
*
|
|
881
|
+
* @default 0
|
|
882
|
+
*/
|
|
883
|
+
set min(min) {
|
|
884
|
+
if (min > this.max) {
|
|
885
|
+
this.handleErrors('max < min');
|
|
886
|
+
}
|
|
887
|
+
this._min = min;
|
|
888
|
+
}
|
|
889
|
+
get min() {
|
|
890
|
+
return this._min;
|
|
891
|
+
}
|
|
892
|
+
/**
|
|
893
|
+
* Puts the Circular ProgressBar in indeterminate state.
|
|
894
|
+
* @default false
|
|
895
|
+
*/
|
|
896
|
+
set indeterminate(indeterminate) {
|
|
897
|
+
this._indeterminate = indeterminate;
|
|
898
|
+
}
|
|
899
|
+
get indeterminate() {
|
|
900
|
+
return this._indeterminate;
|
|
901
|
+
}
|
|
902
|
+
ngAfterViewInit() {
|
|
903
|
+
this.initProgressArc();
|
|
904
|
+
}
|
|
905
|
+
ngOnChanges(changes) {
|
|
906
|
+
const isValueChanged = changes.value;
|
|
907
|
+
const isProgressArcCreated = this.progress;
|
|
908
|
+
const isValueSecondChange = !changes.value.firstChange;
|
|
909
|
+
if (isValueChanged && isProgressArcCreated && isValueSecondChange) {
|
|
910
|
+
if (this.animation) {
|
|
911
|
+
this.progressbarAnimation();
|
|
912
|
+
}
|
|
913
|
+
else {
|
|
914
|
+
const value = this.value - this.min;
|
|
915
|
+
this.internalValue = changes.value.currentValue;
|
|
916
|
+
this.calculateProgress(value);
|
|
917
|
+
}
|
|
918
|
+
}
|
|
919
|
+
if (changes.opacity && this.progress) {
|
|
920
|
+
setProgressBarStyles([{ method: 'setAttribute', el: this.progress.nativeElement, attr: 'opacity', attrValue: this.opacity }], this.renderer);
|
|
921
|
+
}
|
|
922
|
+
if (changes.indeterminate && !changes.indeterminate.firstChange) {
|
|
923
|
+
this.indeterminateState();
|
|
924
|
+
}
|
|
925
|
+
}
|
|
926
|
+
ngOnDestroy() {
|
|
927
|
+
this.subscriptions.unsubscribe();
|
|
928
|
+
}
|
|
929
|
+
initProgressArc() {
|
|
930
|
+
this.setStyles();
|
|
931
|
+
if (this.indeterminate) {
|
|
932
|
+
this.indeterminateState();
|
|
933
|
+
}
|
|
934
|
+
else {
|
|
935
|
+
if (!this.animation) {
|
|
936
|
+
const value = this.value - this.min;
|
|
937
|
+
this.calculateProgress(value);
|
|
938
|
+
}
|
|
939
|
+
else {
|
|
940
|
+
this.progressbarAnimation();
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
}
|
|
944
|
+
calculateProgress(value) {
|
|
945
|
+
if (this.progressColor) {
|
|
946
|
+
this.updateProgressColor(value);
|
|
947
|
+
}
|
|
948
|
+
this.updateCenterTemplate(value + this.min);
|
|
949
|
+
const progressArc = this.progress.nativeElement;
|
|
950
|
+
const radius = this.progress.nativeElement.r.baseVal.value;
|
|
951
|
+
const circumference = Math.PI * (radius * 2);
|
|
952
|
+
const dir = this.rtl ? circumference * -1 : circumference;
|
|
953
|
+
const strokeDashOffest = circumference - dir * (value / (this.max - this.min));
|
|
954
|
+
const progressCalculations = [
|
|
955
|
+
{ method: 'setStyle', el: progressArc, attr: 'strokeDasharray', attrValue: circumference },
|
|
956
|
+
{ method: 'setStyle', el: progressArc, attr: 'strokeDashoffset', attrValue: strokeDashOffest }
|
|
957
|
+
];
|
|
958
|
+
setProgressBarStyles(progressCalculations, this.renderer);
|
|
959
|
+
}
|
|
960
|
+
progressbarAnimation() {
|
|
961
|
+
const forwardProgress = {
|
|
962
|
+
isOngoing: this.internalValue > this.value - this.min,
|
|
963
|
+
isPositive: this.value > this.previousValue
|
|
964
|
+
};
|
|
965
|
+
const backwardProgress = {
|
|
966
|
+
isOngoing: this.internalValue < this.value - this.min,
|
|
967
|
+
isNegative: this.value < this.previousValue
|
|
968
|
+
};
|
|
969
|
+
if (forwardProgress.isOngoing && forwardProgress.isPositive ||
|
|
970
|
+
backwardProgress.isOngoing && backwardProgress.isNegative) {
|
|
971
|
+
return;
|
|
972
|
+
}
|
|
973
|
+
this.calculateProgress(this.internalValue);
|
|
974
|
+
const from = this.internalValue;
|
|
975
|
+
if (hasObservers(this.animationEnd)) {
|
|
976
|
+
this.animationEnd.emit({
|
|
977
|
+
from: from,
|
|
978
|
+
to: this.internalValue
|
|
979
|
+
});
|
|
980
|
+
}
|
|
981
|
+
// eslint-disable-next-line no-unused-expressions
|
|
982
|
+
forwardProgress.isPositive ? this.internalValue += 1 : this.internalValue -= 1;
|
|
983
|
+
requestAnimationFrame(this.progressbarAnimation.bind(this));
|
|
984
|
+
}
|
|
985
|
+
setStyles() {
|
|
986
|
+
const progressArc = this.progress.nativeElement;
|
|
987
|
+
const scale = this.scale.nativeElement;
|
|
988
|
+
const element = this.element.nativeElement;
|
|
989
|
+
const elWidth = element.getBoundingClientRect().width;
|
|
990
|
+
const attributesArray = [
|
|
991
|
+
{ method: 'setAttribute', el: progressArc, attr: 'r', attrValue: (elWidth / 2) - 10 },
|
|
992
|
+
{ method: 'setAttribute', el: progressArc, attr: 'cx', attrValue: (elWidth / 2) },
|
|
993
|
+
{ method: 'setAttribute', el: progressArc, attr: 'cy', attrValue: (elWidth / 2) },
|
|
994
|
+
{ method: 'setAttribute', el: progressArc, attr: 'opacity', attrValue: this.opacity },
|
|
995
|
+
{ method: 'setAttribute', el: scale, attr: 'r', attrValue: (elWidth / 2) - 10 },
|
|
996
|
+
{ method: 'setAttribute', el: scale, attr: 'cx', attrValue: (elWidth / 2) },
|
|
997
|
+
{ method: 'setAttribute', el: scale, attr: 'cy', attrValue: (elWidth / 2) }
|
|
998
|
+
];
|
|
999
|
+
setProgressBarStyles(attributesArray, this.renderer);
|
|
1000
|
+
}
|
|
1001
|
+
indeterminateState() {
|
|
1002
|
+
const progressArc = this.progress.nativeElement;
|
|
1003
|
+
if (this.indeterminate) {
|
|
1004
|
+
// the indeterminate state wont work as the `k-circular-progressbar-arc` has a transform: rotate(-90deg) which is
|
|
1005
|
+
// interfering with the svg animation as the animateTransform brings its own transform: rotate()
|
|
1006
|
+
// This will be like this until the themes release a new version, bringing a new class `k-circular-progressbar-indeterminate-arc`
|
|
1007
|
+
// containing only the necassery CSS styles and we will switch between them when the state of the progressbar is switched.
|
|
1008
|
+
this.calculateProgress(this.value - this.min);
|
|
1009
|
+
const rotate = this.rtl ? { from: 360, to: 0 } : { from: 0, to: 360 };
|
|
1010
|
+
this.renderer.removeClass(progressArc, 'k-circular-progressbar-arc');
|
|
1011
|
+
const indeterminateStyles = [
|
|
1012
|
+
{ method: 'setStyle', el: progressArc, attr: 'transform-origin', attrValue: 'center' },
|
|
1013
|
+
{ method: 'setStyle', el: progressArc, attr: 'fill', attrValue: 'none' },
|
|
1014
|
+
{ method: 'setStyle', el: progressArc, attr: 'stroke-linecap', attrValue: 'round' }
|
|
1015
|
+
];
|
|
1016
|
+
setProgressBarStyles(indeterminateStyles, this.renderer);
|
|
1017
|
+
progressArc.innerHTML = `<animateTransform attributeName="transform" type="rotate" from="${rotate.from} 0 0" to="${rotate.to} 0 0" dur="1s" repeatCount="indefinite" />`;
|
|
1018
|
+
}
|
|
1019
|
+
else {
|
|
1020
|
+
this.renderer.addClass(progressArc, 'k-circular-progressbar-arc');
|
|
1021
|
+
const removeIndeterminateStyles = [
|
|
1022
|
+
{ method: 'removeStyle', el: progressArc, attr: 'transform-origin' },
|
|
1023
|
+
{ method: 'removeStyle', el: progressArc, attr: 'fill' },
|
|
1024
|
+
{ method: 'removeStyle', el: progressArc, attr: 'stroke-linecap' }
|
|
1025
|
+
];
|
|
1026
|
+
removeProgressBarStyles(removeIndeterminateStyles, this.renderer);
|
|
1027
|
+
progressArc.innerHTML = '';
|
|
1028
|
+
if (this.animation) {
|
|
1029
|
+
this.progressbarAnimation();
|
|
1030
|
+
}
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
updateCenterTemplate(value) {
|
|
1034
|
+
if (!this.centerTemplate) {
|
|
1035
|
+
return;
|
|
1036
|
+
}
|
|
1037
|
+
this.centerTemplateContext.value = value;
|
|
1038
|
+
this.centerTemplateContext.color = this.currentColor;
|
|
1039
|
+
this.cdr.detectChanges();
|
|
1040
|
+
this.positionLabel();
|
|
1041
|
+
}
|
|
1042
|
+
positionLabel() {
|
|
1043
|
+
const labelEl = this.labelElement.nativeElement;
|
|
1044
|
+
const svgWrapper = this.svgWrapper.nativeElement.getBoundingClientRect();
|
|
1045
|
+
const svgWrapperWidth = svgWrapper.width;
|
|
1046
|
+
const svgWrapperHeight = svgWrapper.height;
|
|
1047
|
+
const left = (svgWrapperWidth / 2) - (labelEl.offsetWidth / 2);
|
|
1048
|
+
const top = (svgWrapperHeight / 2) - (labelEl.offsetHeight / 2);
|
|
1049
|
+
const labelCalculations = [
|
|
1050
|
+
{ method: 'setStyle', el: labelEl, attr: 'left', attrValue: `${left}px` },
|
|
1051
|
+
{ method: 'setStyle', el: labelEl, attr: 'top', attrValue: `${top}px` }
|
|
1052
|
+
];
|
|
1053
|
+
setProgressBarStyles(labelCalculations, this.renderer);
|
|
1054
|
+
}
|
|
1055
|
+
get currentColor() {
|
|
1056
|
+
const currentColor = this.progress.nativeElement.style.stroke;
|
|
1057
|
+
return currentColor;
|
|
1058
|
+
}
|
|
1059
|
+
updateProgressColor(value) {
|
|
1060
|
+
const progressArc = this.progress.nativeElement;
|
|
1061
|
+
if (typeof this.progressColor === 'string') {
|
|
1062
|
+
this.renderer.setStyle(progressArc, 'stroke', this.progressColor);
|
|
1063
|
+
}
|
|
1064
|
+
else {
|
|
1065
|
+
for (let i = 0; i < this.progressColor.length; i++) {
|
|
1066
|
+
let from = this.progressColor[i].from;
|
|
1067
|
+
let to = this.progressColor[i].to;
|
|
1068
|
+
if (value >= from && value < to || (!from && value < to)) {
|
|
1069
|
+
this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
|
|
1070
|
+
break;
|
|
1071
|
+
}
|
|
1072
|
+
if (!to && value >= from) {
|
|
1073
|
+
this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
}
|
|
1077
|
+
}
|
|
1078
|
+
handleErrors(type) {
|
|
1079
|
+
if (isDevMode()) {
|
|
1080
|
+
switch (type) {
|
|
1081
|
+
case 'value > max':
|
|
1082
|
+
throw new Error('The value of the Circular Progressbar cannot exceed the max value');
|
|
1083
|
+
case 'value < min':
|
|
1084
|
+
throw new Error('The value of the Circular Progressbar cannot be lower than the min value');
|
|
1085
|
+
case 'max < min':
|
|
1086
|
+
throw new Error('The min value cannot be higher than the max value');
|
|
1087
|
+
default:
|
|
1088
|
+
}
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
setDirection() {
|
|
1092
|
+
this.rtl = this.localizationService.rtl;
|
|
1093
|
+
if (this.element) {
|
|
1094
|
+
this.renderer.setAttribute(this.element.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
|
|
1095
|
+
}
|
|
1096
|
+
if (this.labelElement) {
|
|
1097
|
+
this.renderer.setAttribute(this.labelElement.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
|
|
1098
|
+
}
|
|
1099
|
+
}
|
|
1100
|
+
rtlChange() {
|
|
1101
|
+
if (this.element && this.rtl !== this.localizationService.rtl) {
|
|
1102
|
+
this.setDirection();
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1105
|
+
}
|
|
1106
|
+
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 });
|
|
1107
|
+
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: [
|
|
1108
|
+
LocalizationService,
|
|
1109
|
+
{
|
|
1110
|
+
provide: L10N_PREFIX,
|
|
1111
|
+
useValue: 'kendo.circularprogressbar'
|
|
1112
|
+
}
|
|
1113
|
+
], 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: `
|
|
1114
|
+
<div class="k-circular-progressbar-surface">
|
|
1115
|
+
<div #svgWrapper>
|
|
1116
|
+
<svg #svg>
|
|
1117
|
+
<g>
|
|
1118
|
+
<circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>
|
|
1119
|
+
<circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>
|
|
1120
|
+
</g>
|
|
1121
|
+
</svg>
|
|
1122
|
+
<div class="k-circular-progressbar-label" *ngIf="centerTemplate" #label>
|
|
1123
|
+
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
|
|
1124
|
+
</div>
|
|
1125
|
+
</div>
|
|
1126
|
+
</div>
|
|
1127
|
+
`, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
1128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBar, decorators: [{
|
|
1129
|
+
type: Component,
|
|
1130
|
+
args: [{
|
|
1131
|
+
exportAs: 'kendoCircularProgressBar',
|
|
1132
|
+
selector: 'kendo-circularprogressbar',
|
|
1133
|
+
template: `
|
|
1134
|
+
<div class="k-circular-progressbar-surface">
|
|
1135
|
+
<div #svgWrapper>
|
|
1136
|
+
<svg #svg>
|
|
1137
|
+
<g>
|
|
1138
|
+
<circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>
|
|
1139
|
+
<circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>
|
|
1140
|
+
</g>
|
|
1141
|
+
</svg>
|
|
1142
|
+
<div class="k-circular-progressbar-label" *ngIf="centerTemplate" #label>
|
|
1143
|
+
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
|
|
1144
|
+
</div>
|
|
1145
|
+
</div>
|
|
1146
|
+
</div>
|
|
1147
|
+
`, providers: [
|
|
1148
|
+
LocalizationService,
|
|
1149
|
+
{
|
|
1150
|
+
provide: L10N_PREFIX,
|
|
1151
|
+
useValue: 'kendo.circularprogressbar'
|
|
1152
|
+
}
|
|
1153
|
+
]
|
|
1154
|
+
}]
|
|
1155
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { hostClasses: [{
|
|
1156
|
+
type: HostBinding,
|
|
1157
|
+
args: ['class.k-circular-progressbar']
|
|
1158
|
+
}], WrapperSize: [{
|
|
1159
|
+
type: HostBinding,
|
|
1160
|
+
args: ['style.width']
|
|
1161
|
+
}, {
|
|
1162
|
+
type: HostBinding,
|
|
1163
|
+
args: ['style.height']
|
|
1164
|
+
}], value: [{
|
|
1165
|
+
type: Input
|
|
1166
|
+
}], max: [{
|
|
1167
|
+
type: Input
|
|
1168
|
+
}], min: [{
|
|
1169
|
+
type: Input
|
|
1170
|
+
}], animation: [{
|
|
1171
|
+
type: Input
|
|
1172
|
+
}], opacity: [{
|
|
1173
|
+
type: Input
|
|
1174
|
+
}], indeterminate: [{
|
|
1175
|
+
type: Input
|
|
1176
|
+
}], progressColor: [{
|
|
1177
|
+
type: Input
|
|
1178
|
+
}], animationEnd: [{
|
|
1179
|
+
type: Output
|
|
1180
|
+
}], progress: [{
|
|
1181
|
+
type: ViewChild,
|
|
1182
|
+
args: ['progress']
|
|
1183
|
+
}], scale: [{
|
|
1184
|
+
type: ViewChild,
|
|
1185
|
+
args: ['scale']
|
|
1186
|
+
}], labelElement: [{
|
|
1187
|
+
type: ViewChild,
|
|
1188
|
+
args: ["label"]
|
|
1189
|
+
}], svgWrapper: [{
|
|
1190
|
+
type: ViewChild,
|
|
1191
|
+
args: ["svgWrapper"]
|
|
1192
|
+
}], centerTemplate: [{
|
|
1193
|
+
type: ContentChild,
|
|
1194
|
+
args: [CircularProgressbarCenterTemplateDirective]
|
|
1195
|
+
}] } });
|
|
1196
|
+
|
|
1197
|
+
const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective];
|
|
1198
|
+
const MODULES = [CommonModule, ResizeSensorModule];
|
|
765
1199
|
/**
|
|
766
1200
|
* Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
|
|
767
1201
|
* definition for the ProgressBar components.
|
|
@@ -796,7 +1230,7 @@ const MODULES = [CommonModule];
|
|
|
796
1230
|
class ProgressBarModule {
|
|
797
1231
|
}
|
|
798
1232
|
ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
799
|
-
ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ChunkProgressBarComponent], imports: [CommonModule], exports: [ProgressBarComponent, ChunkProgressBarComponent] });
|
|
1233
|
+
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] });
|
|
800
1234
|
ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, imports: [MODULES] });
|
|
801
1235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, decorators: [{
|
|
802
1236
|
type: NgModule,
|
|
@@ -811,5 +1245,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
811
1245
|
* Generated bundle index. Do not edit.
|
|
812
1246
|
*/
|
|
813
1247
|
|
|
814
|
-
export { ChunkProgressBarComponent, ProgressBarComponent, ProgressBarModule };
|
|
1248
|
+
export { ChunkProgressBarComponent, CircularProgressBar, CircularProgressbarCenterTemplateDirective, ProgressBarComponent, ProgressBarModule };
|
|
815
1249
|
|
package/main.d.ts
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
export { ProgressBarComponent } from './progressbar.component';
|
|
6
6
|
export { ChunkProgressBarComponent } from './chunk/chunk-progressbar.component';
|
|
7
|
+
export { CircularProgressBar } from './circularprogressbar/circular-progressbar.component';
|
|
8
|
+
export { CircularProgressbarCenterTemplateDirective } from './circularprogressbar/center-template.directive';
|
|
7
9
|
export { ProgressBarOrientation } from './types/progressbar-orientation';
|
|
8
10
|
export { LabelSettings } from './types/label-settings.interface';
|
|
9
11
|
export { LabelPosition } from './types/label-position';
|
|
@@ -11,3 +13,4 @@ export { LabelFn } from './types/label-fn-type';
|
|
|
11
13
|
export { LabelType } from './types/label-type';
|
|
12
14
|
export { ProgressBarAnimation } from './types/progressbar-animation.interface';
|
|
13
15
|
export { ProgressBarModule } from './progressbar.module';
|
|
16
|
+
export { ProgressColor } from './circularprogressbar/models/circular-progressbar-progress-color-interface';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-progressbar",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.1.0-dev.202207260903",
|
|
4
4
|
"description": "Kendo UI Angular component starter template",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@progress/kendo-schematics": "^3.0.0",
|
|
26
|
+
"@progress/kendo-charts": "^1.18.0",
|
|
26
27
|
"tslib": "^2.3.1"
|
|
27
28
|
},
|
|
28
29
|
"peerDependencies": {
|
|
@@ -65,11 +66,11 @@
|
|
|
65
66
|
"fallbackTags": {
|
|
66
67
|
"dev": "latest"
|
|
67
68
|
},
|
|
68
|
-
"analyzeCommits": "@
|
|
69
|
+
"analyzeCommits": "@progress/semantic-prerelease/analyzeCommits",
|
|
69
70
|
"generateNotes": "@progress/kendo-angular-tasks/lib/generateNotes",
|
|
70
|
-
"getLastRelease": "@
|
|
71
|
-
"verifyConditions": "@
|
|
72
|
-
"verifyRelease": "@
|
|
71
|
+
"getLastRelease": "@progress/semantic-prerelease/getLastRelease",
|
|
72
|
+
"verifyConditions": "@progress/semantic-prerelease/verifyConditions",
|
|
73
|
+
"verifyRelease": "@progress/semantic-prerelease/verifyRelease"
|
|
73
74
|
},
|
|
74
75
|
"main": "bundles/kendo-angular-progressbar.umd.js",
|
|
75
76
|
"module": "fesm2015/kendo-angular-progressbar.js",
|
package/progressbar.module.d.ts
CHANGED
|
@@ -5,7 +5,10 @@
|
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "./progressbar.component";
|
|
7
7
|
import * as i2 from "./chunk/chunk-progressbar.component";
|
|
8
|
-
import * as i3 from "
|
|
8
|
+
import * as i3 from "./circularprogressbar/circular-progressbar.component";
|
|
9
|
+
import * as i4 from "./circularprogressbar/center-template.directive";
|
|
10
|
+
import * as i5 from "@angular/common";
|
|
11
|
+
import * as i6 from "@progress/kendo-angular-common";
|
|
9
12
|
/**
|
|
10
13
|
* Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
|
|
11
14
|
* definition for the ProgressBar components.
|
|
@@ -39,6 +42,6 @@ import * as i3 from "@angular/common";
|
|
|
39
42
|
*/
|
|
40
43
|
export declare class ProgressBarModule {
|
|
41
44
|
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarModule, never>;
|
|
42
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent], [typeof
|
|
45
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBar, typeof i4.CircularProgressbarCenterTemplateDirective], [typeof i5.CommonModule, typeof i6.ResizeSensorModule], [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBar, typeof i4.CircularProgressbarCenterTemplateDirective]>;
|
|
43
46
|
static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarModule>;
|
|
44
47
|
}
|