1 | import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 |
|
4 | class ProgressBar {
|
5 | constructor() {
|
6 | this.showValue = true;
|
7 | this.unit = '%';
|
8 | this.mode = 'determinate';
|
9 | }
|
10 | }
|
11 | ProgressBar.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 | ];
|
29 | ProgressBar.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 | };
|
37 | class ProgressBarModule {
|
38 | }
|
39 | ProgressBarModule.decorators = [
|
40 | { type: NgModule, args: [{
|
41 | imports: [CommonModule],
|
42 | exports: [ProgressBar],
|
43 | declarations: [ProgressBar]
|
44 | },] }
|
45 | ];
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 | export { ProgressBar, ProgressBarModule };
|
52 |
|