UNPKG

3.66 kBJavaScriptView Raw
1import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3
4class ProgressBar {
5 constructor() {
6 this.showValue = true;
7 this.unit = '%';
8 this.mode = 'determinate';
9 }
10}
11ProgressBar.decorators = [
12 { type: Component, args: [{
13 selector: 'p-progressBar',
14 template: `
15 <div [class]="styleClass" [ngStyle]="style" role="progressbar" aria-valuemin="0" [attr.aria-valuenow]="value" aria-valuemax="100"
16 [ngClass]="{'p-progressbar p-component': true, 'p-progressbar-determinate': (mode === 'determinate'), 'p-progressbar-indeterminate': (mode === 'indeterminate')}">
17 <div *ngIf="mode === 'determinate'" class="p-progressbar-value p-progressbar-value-animate" [style.width]="value + '%'" style="display:block"></div>
18 <div *ngIf="mode === 'determinate' && showValue" class="p-progressbar-label" [style.display]="value != null ? 'block' : 'none'">{{value}}{{unit}}</div>
19 <div *ngIf="mode === 'indeterminate'" class="p-progressbar-indeterminate-container">
20 <div class="p-progressbar-value p-progressbar-value-animate"></div>
21 </div>
22 </div>
23 `,
24 changeDetection: ChangeDetectionStrategy.OnPush,
25 encapsulation: ViewEncapsulation.None,
26 styles: [".p-progressbar{overflow:hidden;position:relative}.p-progressbar-determinate .p-progressbar-value{border:0;display:none;height:100%;position:absolute;width:0}.p-progressbar-determinate .p-progressbar-value-animate{transition:width 1s ease-in-out}.p-progressbar-determinate .p-progressbar-label{font-weight:700;height:100%;position:absolute;text-align:center;width:100%}.p-progressbar-indeterminate .p-progressbar-value:before{-webkit-animation:p-progressbar-indeterminate-anim 2.1s cubic-bezier(.65,.815,.735,.395) infinite;animation:p-progressbar-indeterminate-anim 2.1s cubic-bezier(.65,.815,.735,.395) infinite;background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}.p-progressbar-indeterminate .p-progressbar-value:after{-webkit-animation:p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;-webkit-animation-delay:1.15s;animation:p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s;background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}@-webkit-keyframes p-progressbar-indeterminate-anim{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes p-progressbar-indeterminate-anim{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@-webkit-keyframes p-progressbar-indeterminate-anim-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}@keyframes p-progressbar-indeterminate-anim-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}"]
27 },] }
28];
29ProgressBar.propDecorators = {
30 value: [{ type: Input }],
31 showValue: [{ type: Input }],
32 style: [{ type: Input }],
33 styleClass: [{ type: Input }],
34 unit: [{ type: Input }],
35 mode: [{ type: Input }]
36};
37class ProgressBarModule {
38}
39ProgressBarModule.decorators = [
40 { type: NgModule, args: [{
41 imports: [CommonModule],
42 exports: [ProgressBar],
43 declarations: [ProgressBar]
44 },] }
45];
46
47/**
48 * Generated bundle index. Do not edit.
49 */
50
51export { ProgressBar, ProgressBarModule };
52//# sourceMappingURL=primeng-progressbar.js.map