primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
314 lines (299 loc) • 15.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, numberAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { BaseStyle } from 'primeng/base';
const style = `
.p-progressspinner {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
}
.p-progressspinner-circle {
width: 100%;
height: 100%;
}
.p-progressspinner-circle-track {
stroke: dt('content.border.color');
}
.p-progressspinner-circle-range {
stroke: dt('progressspinner.color.one');
stroke-linecap: round;
transition: stroke-dashoffset 0.3s;
}
[data-state="determinate"] .p-progressspinner-circle-range {
transform: rotate(-90deg);
transform-origin: center;
}
[data-state="indeterminate"] .p-progressspinner-circle {
animation: p-progressspinner-rotate 2s linear infinite;
transform-origin: center;
}
[data-state="indeterminate"] .p-progressspinner-circle-range {
stroke-dasharray: 1, 302;
stroke-dashoffset: 0;
animation:
p-progressspinner-dash 1.5s ease-in-out infinite,
p-progressspinner-color 6s ease-in-out infinite;
}
.p-progressspinner-value {
fill: dt('text.muted.color');
}
p-progressspinner-rotate {
100% {
transform: rotate(360deg);
}
}
p-progressspinner-dash {
0% {
stroke-dasharray: 1, 302;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 136, 302;
stroke-dashoffset: -54px;
}
100% {
stroke-dasharray: 1, 302;
stroke-dashoffset: -302px;
}
}
p-progressspinner-color {
100%,
0% {
stroke: dt('progressspinner.color.one');
}
40% {
stroke: dt('progressspinner.color.two');
}
66% {
stroke: dt('progressspinner.color.three');
}
80%,
90% {
stroke: dt('progressspinner.color.four');
}
}
`;
const classes = {
root: 'p-progressspinner',
circle: 'p-progressspinner-circle',
circleTrack: 'p-progressspinner-circle-track',
circleRange: 'p-progressspinner-circle-range',
value: 'p-progressspinner-value'
};
class ProgressSpinnerStyle extends BaseStyle {
name = 'progressspinner';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinnerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinnerStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinnerStyle, decorators: [{
type: Injectable
}] });
/**
*
* ProgressSpinner is a process status indicator.
*
* [Live Demo](https://www.primeng.org/progressspinner)
*
* @module progressspinnerstyle
*
*/
var ProgressSpinnerClasses;
(function (ProgressSpinnerClasses) {
/**
* Class name of the root element
*/
ProgressSpinnerClasses["root"] = "p-progressspinner";
/**
* Class name of the circle element
*/
ProgressSpinnerClasses["circle"] = "p-progressspinner-circle";
/**
* Class name of the circle track element
*/
ProgressSpinnerClasses["circleTrack"] = "p-progressspinner-circle-track";
/**
* Class name of the circle range element
*/
ProgressSpinnerClasses["circleRange"] = "p-progressspinner-circle-range";
/**
* Class name of the value element
*/
ProgressSpinnerClasses["value"] = "p-progressspinner-value";
})(ProgressSpinnerClasses || (ProgressSpinnerClasses = {}));
const PROGRESSSPINNER_INSTANCE = new InjectionToken('PROGRESSSPINNER_INSTANCE');
/**
* ProgressSpinner is a process status indicator.
* @group Components
*/
class ProgressSpinner extends BaseComponent {
componentName = 'ProgressSpinner';
$pcProgressSpinner = inject(PROGRESSSPINNER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
/**
* Current value of the progress. When null or undefined, the spinner is in indeterminate mode.
* @defaultValue null
* @group Props
*/
value = input(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
/**
* Width of the circle stroke.
* @defaultValue 4
* @group Props
*/
strokeWidth = input(4, { ...(ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Duration of the rotate animation.
* @group Props
*/
animationDuration = input('2s', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
/**
* Minimum value.
* @defaultValue 0
* @group Props
*/
min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Maximum value.
* @defaultValue 100
* @group Props
*/
max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Used to define a aria label attribute the current element.
* @group Props
*/
ariaLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
/**
* Color for the background of the circle.
* @group Props
*/
fill = input('none', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
_componentStyle = inject(ProgressSpinnerStyle);
indeterminate = computed(() => this.value() == null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
_radius = computed(() => (100 - this.strokeWidth()) / 2, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_radius" }] : /* istanbul ignore next */ []));
_circumference = computed(() => 2 * Math.PI * this._radius(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_circumference" }] : /* istanbul ignore next */ []));
_clampedValue = computed(() => {
if (this.indeterminate())
return 0;
return Math.min(Math.max(this.value(), this.min()), this.max());
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_clampedValue" }] : /* istanbul ignore next */ []));
_percent = computed(() => {
if (this.indeterminate())
return 0;
return ((this._clampedValue() - this.min()) / (this.max() - this.min())) * 100;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_percent" }] : /* istanbul ignore next */ []));
_dashOffset = computed(() => this._circumference() - (this._percent() / 100) * this._circumference(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_dashOffset" }] : /* istanbul ignore next */ []));
_displayPercent = computed(() => Math.round(this._percent()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_displayPercent" }] : /* istanbul ignore next */ []));
_dataState = computed(() => (this.indeterminate() ? 'indeterminate' : 'determinate'), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_dataState" }] : /* istanbul ignore next */ []));
_dataValue = computed(() => (this.indeterminate() ? undefined : this._clampedValue()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_dataValue" }] : /* istanbul ignore next */ []));
_ariaValueMin = computed(() => (this.indeterminate() ? undefined : this.min()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_ariaValueMin" }] : /* istanbul ignore next */ []));
_ariaValueMax = computed(() => (this.indeterminate() ? undefined : this.max()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_ariaValueMax" }] : /* istanbul ignore next */ []));
_ariaValueNow = computed(() => (this.indeterminate() ? undefined : this._clampedValue()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_ariaValueNow" }] : /* istanbul ignore next */ []));
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinner, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ProgressSpinner, isStandalone: true, selector: "p-progress-spinner, p-progressspinner", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "ariaLabel()", "attr.role": "'progressbar'", "attr.aria-busy": "true", "attr.data-state": "_dataState()", "attr.aria-valuemin": "_ariaValueMin()", "attr.aria-valuemax": "_ariaValueMax()", "attr.aria-valuenow": "_ariaValueNow()", "attr.data-value": "_dataValue()", "class": "cx('root')" } }, providers: [ProgressSpinnerStyle, { provide: PROGRESSSPINNER_INSTANCE, useExisting: ProgressSpinner }, { provide: PARENT_INSTANCE, useExisting: ProgressSpinner }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<svg [class]="cx('circle')" [pBind]="ptm('circle')" viewBox="0 0 100 100" [style.animation-duration]="animationDuration()">
<circle [class]="cx('circleTrack')" [pBind]="ptm('circleTrack')" cx="50" cy="50" [attr.r]="_radius()" [attr.fill]="fill()" [attr.stroke-width]="strokeWidth()" />
<circle
[class]="cx('circleRange')"
[pBind]="ptm('circleRange')"
cx="50"
cy="50"
[attr.r]="_radius()"
[attr.fill]="fill()"
[attr.stroke-width]="strokeWidth()"
[attr.stroke-dasharray]="indeterminate() ? null : _circumference()"
[attr.stroke-dashoffset]="indeterminate() ? null : _dashOffset()"
/>
(!indeterminate()) {
<text [class]="cx('value')" [pBind]="ptm('value')" x="50" y="50" text-anchor="middle" dominant-baseline="central">{{ _displayPercent() }}%</text>
}
</svg>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinner, decorators: [{
type: Component,
args: [{
selector: 'p-progress-spinner, p-progressspinner',
standalone: true,
imports: [SharedModule, Bind],
template: `
<svg [class]="cx('circle')" [pBind]="ptm('circle')" viewBox="0 0 100 100" [style.animation-duration]="animationDuration()">
<circle [class]="cx('circleTrack')" [pBind]="ptm('circleTrack')" cx="50" cy="50" [attr.r]="_radius()" [attr.fill]="fill()" [attr.stroke-width]="strokeWidth()" />
<circle
[class]="cx('circleRange')"
[pBind]="ptm('circleRange')"
cx="50"
cy="50"
[attr.r]="_radius()"
[attr.fill]="fill()"
[attr.stroke-width]="strokeWidth()"
[attr.stroke-dasharray]="indeterminate() ? null : _circumference()"
[attr.stroke-dashoffset]="indeterminate() ? null : _dashOffset()"
/>
(!indeterminate()) {
<text [class]="cx('value')" [pBind]="ptm('value')" x="50" y="50" text-anchor="middle" dominant-baseline="central">{{ _displayPercent() }}%</text>
}
</svg>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [ProgressSpinnerStyle, { provide: PROGRESSSPINNER_INSTANCE, useExisting: ProgressSpinner }, { provide: PARENT_INSTANCE, useExisting: ProgressSpinner }],
host: {
'[attr.aria-label]': 'ariaLabel()',
'[attr.role]': "'progressbar'",
'[attr.aria-busy]': 'true',
'[attr.data-state]': '_dataState()',
'[attr.aria-valuemin]': '_ariaValueMin()',
'[attr.aria-valuemax]': '_ariaValueMax()',
'[attr.aria-valuenow]': '_ariaValueNow()',
'[attr.data-value]': '_dataValue()',
'[class]': "cx('root')"
},
hostDirectives: [Bind]
}]
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }] } });
class ProgressSpinnerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinnerModule, imports: [ProgressSpinner, SharedModule], exports: [ProgressSpinner, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinnerModule, imports: [ProgressSpinner, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressSpinnerModule, decorators: [{
type: NgModule,
args: [{
imports: [ProgressSpinner, SharedModule],
exports: [ProgressSpinner, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ProgressSpinner, ProgressSpinnerClasses, ProgressSpinnerModule, ProgressSpinnerStyle };
//# sourceMappingURL=primeng-progressspinner.mjs.map