ng-circle-progress
Version:
220 lines (219 loc) • 8.56 kB
TypeScript
import { EventEmitter, OnChanges, OnInit, OnDestroy, ElementRef, SimpleChanges, NgZone, Injector } from '@angular/core';
import { Subscription } from 'rxjs';
import * as i0 from "@angular/core";
export interface CircleProgressOptionsInterface {
class?: string;
backgroundGradient?: boolean;
backgroundColor?: string;
backgroundGradientStopColor?: string;
backgroundOpacity?: number;
backgroundStroke?: string;
backgroundStrokeWidth?: number;
backgroundPadding?: number;
percent?: number;
radius?: number;
space?: number;
toFixed?: number;
maxPercent?: number;
renderOnClick?: boolean;
units?: string;
unitsFontSize?: string;
unitsFontWeight?: string;
unitsColor?: string;
outerStrokeGradient?: boolean;
outerStrokeWidth?: number;
outerStrokeColor?: string;
outerStrokeGradientStopColor?: string;
outerStrokeLinecap?: string;
innerStrokeColor?: string;
innerStrokeWidth?: number;
titleFormat?: Function;
title?: string | Array<String>;
titleColor?: string;
titleFontSize?: string;
titleFontWeight?: string;
subtitleFormat?: Function;
subtitle?: string | Array<String>;
subtitleColor?: string;
subtitleFontSize?: string;
subtitleFontWeight?: string;
imageSrc?: string;
imageHeight?: number;
imageWidth?: number;
animation?: boolean;
animateTitle?: boolean;
animateSubtitle?: boolean;
animationDuration?: number;
showTitle?: boolean;
showSubtitle?: boolean;
showUnits?: boolean;
showImage?: boolean;
showBackground?: boolean;
showInnerStroke?: boolean;
clockwise?: boolean;
responsive?: boolean;
startFromZero?: boolean;
showZeroOuterStroke?: boolean;
lazy?: boolean;
}
export declare class CircleProgressOptions implements CircleProgressOptionsInterface {
class: string;
backgroundGradient: boolean;
backgroundColor: string;
backgroundGradientStopColor: string;
backgroundOpacity: number;
backgroundStroke: string;
backgroundStrokeWidth: number;
backgroundPadding: number;
percent: number;
radius: number;
space: number;
toFixed: number;
maxPercent: number;
renderOnClick: boolean;
units: string;
unitsFontSize: string;
unitsFontWeight: string;
unitsColor: string;
outerStrokeGradient: boolean;
outerStrokeWidth: number;
outerStrokeColor: string;
outerStrokeGradientStopColor: string;
outerStrokeLinecap: string;
innerStrokeColor: string;
innerStrokeWidth: number;
titleFormat: any;
title: string | Array<String>;
titleColor: string;
titleFontSize: string;
titleFontWeight: string;
subtitleFormat: any;
subtitle: string | Array<String>;
subtitleColor: string;
subtitleFontSize: string;
subtitleFontWeight: string;
imageSrc: any;
imageHeight: number;
imageWidth: number;
animation: boolean;
animateTitle: boolean;
animateSubtitle: boolean;
animationDuration: number;
showTitle: boolean;
showSubtitle: boolean;
showUnits: boolean;
showImage: boolean;
showBackground: boolean;
showInnerStroke: boolean;
clockwise: boolean;
responsive: boolean;
startFromZero: boolean;
showZeroOuterStroke: boolean;
lazy: boolean;
}
export declare class CircleProgressComponent implements OnChanges, OnInit, OnDestroy {
private ngZone;
private elRef;
onClick: EventEmitter<MouseEvent>;
name: string;
class: string;
backgroundGradient: boolean;
backgroundColor: string;
backgroundGradientStopColor: String;
backgroundOpacity: number;
backgroundStroke: string;
backgroundStrokeWidth: number;
backgroundPadding: number;
radius: number;
space: number;
percent: number;
toFixed: number;
maxPercent: number;
renderOnClick: boolean;
units: string;
unitsFontSize: string;
unitsFontWeight: string;
unitsColor: string;
outerStrokeGradient: boolean;
outerStrokeWidth: number;
outerStrokeColor: string;
outerStrokeGradientStopColor: String;
outerStrokeLinecap: string;
innerStrokeColor: string;
innerStrokeWidth: string | number;
titleFormat: Function;
title: string | Array<String>;
titleColor: string;
titleFontSize: string;
titleFontWeight: string;
subtitleFormat: Function;
subtitle: string | string[];
subtitleColor: string;
subtitleFontSize: string;
subtitleFontWeight: string;
imageSrc: string;
imageHeight: number;
imageWidth: number;
animation: boolean;
animateTitle: boolean;
animateSubtitle: boolean;
animationDuration: number;
showTitle: boolean;
showSubtitle: boolean;
showUnits: boolean;
showImage: boolean;
showBackground: boolean;
showInnerStroke: boolean;
clockwise: boolean;
responsive: boolean;
startFromZero: boolean;
showZeroOuterStroke: boolean;
lazy: boolean;
templateOptions: CircleProgressOptions;
svgElement: HTMLElement;
isInViewport: Boolean;
onViewportChanged: EventEmitter<{
oldValue: Boolean;
newValue: Boolean;
}>;
window: Window;
_viewportChangedSubscriber: Subscription;
svg: any;
options: CircleProgressOptions;
defaultOptions: CircleProgressOptions;
_lastPercent: number;
_gradientUUID: string;
render: () => void;
polarToCartesian: (centerX: number, centerY: number, radius: number, angleInDegrees: number) => {
x: number;
y: number;
};
draw: (percent: number) => void;
getAnimationParameters: (previousPercent: number, currentPercent: number) => {
times: number;
step: number;
interval: number;
};
animate: (previousPercent: number, currentPercent: number) => void;
emitClickEvent(event: MouseEvent): void;
private _timerSubscription;
private applyOptions;
private getRelativeY;
private min;
private max;
private uuid;
isDrawing(): boolean;
findSvgElement(): void;
private isElementInViewport;
checkViewport: () => void;
onScroll: (event: Event) => void;
loadEventsForLazyMode: () => void;
unloadEventsForLazyMode: () => void;
ngOnInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
private document;
constructor(defaultOptions: CircleProgressOptions, ngZone: NgZone, elRef: ElementRef, injector: Injector);
static ɵfac: i0.ɵɵFactoryDeclaration<CircleProgressComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CircleProgressComponent, "circle-progress", never, { "name": "name"; "class": "class"; "backgroundGradient": "backgroundGradient"; "backgroundColor": "backgroundColor"; "backgroundGradientStopColor": "backgroundGradientStopColor"; "backgroundOpacity": "backgroundOpacity"; "backgroundStroke": "backgroundStroke"; "backgroundStrokeWidth": "backgroundStrokeWidth"; "backgroundPadding": "backgroundPadding"; "radius": "radius"; "space": "space"; "percent": "percent"; "toFixed": "toFixed"; "maxPercent": "maxPercent"; "renderOnClick": "renderOnClick"; "units": "units"; "unitsFontSize": "unitsFontSize"; "unitsFontWeight": "unitsFontWeight"; "unitsColor": "unitsColor"; "outerStrokeGradient": "outerStrokeGradient"; "outerStrokeWidth": "outerStrokeWidth"; "outerStrokeColor": "outerStrokeColor"; "outerStrokeGradientStopColor": "outerStrokeGradientStopColor"; "outerStrokeLinecap": "outerStrokeLinecap"; "innerStrokeColor": "innerStrokeColor"; "innerStrokeWidth": "innerStrokeWidth"; "titleFormat": "titleFormat"; "title": "title"; "titleColor": "titleColor"; "titleFontSize": "titleFontSize"; "titleFontWeight": "titleFontWeight"; "subtitleFormat": "subtitleFormat"; "subtitle": "subtitle"; "subtitleColor": "subtitleColor"; "subtitleFontSize": "subtitleFontSize"; "subtitleFontWeight": "subtitleFontWeight"; "imageSrc": "imageSrc"; "imageHeight": "imageHeight"; "imageWidth": "imageWidth"; "animation": "animation"; "animateTitle": "animateTitle"; "animateSubtitle": "animateSubtitle"; "animationDuration": "animationDuration"; "showTitle": "showTitle"; "showSubtitle": "showSubtitle"; "showUnits": "showUnits"; "showImage": "showImage"; "showBackground": "showBackground"; "showInnerStroke": "showInnerStroke"; "clockwise": "clockwise"; "responsive": "responsive"; "startFromZero": "startFromZero"; "showZeroOuterStroke": "showZeroOuterStroke"; "lazy": "lazy"; "templateOptions": "options"; }, { "onClick": "onClick"; }, never, never, false>;
}