@coreui/angular-pro 5.0.0-alpha.8 → 5.0.0-alpha.9
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/esm2022/lib/progress/progress-bar.component.mjs +54 -47
- package/esm2022/lib/progress/progress.component.mjs +27 -9
- package/esm2022/lib/progress/progress.type.mjs +2 -0
- package/esm2022/lib/progress/public_api.mjs +1 -1
- package/fesm2022/coreui-angular-pro.mjs +120 -97
- package/fesm2022/coreui-angular-pro.mjs.map +1 -1
- package/lib/progress/progress-bar.component.d.ts +24 -19
- package/lib/progress/progress.component.d.ts +21 -5
- package/lib/progress/progress.type.d.ts +19 -0
- package/lib/progress/public_api.d.ts +1 -1
- package/lib/smart-table/smart-table.utils.d.ts +1 -1
- package/package.json +3 -3
- package/esm2022/lib/progress/progress-bar.mjs +0 -2
- package/lib/progress/progress-bar.d.ts +0 -10
|
@@ -1,9 +1,22 @@
|
|
|
1
|
-
import { booleanAttribute, Component, HostBinding, Input, numberAttribute } from '@angular/core';
|
|
1
|
+
import { booleanAttribute, Component, computed, effect, ElementRef, HostBinding, inject, Input, numberAttribute, Renderer2, signal } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class ProgressBarComponent {
|
|
4
|
-
constructor(
|
|
5
|
-
this
|
|
6
|
-
this
|
|
4
|
+
constructor() {
|
|
5
|
+
this.#renderer = inject(Renderer2);
|
|
6
|
+
this.#hostElement = inject(ElementRef);
|
|
7
|
+
this.#max = signal(100);
|
|
8
|
+
this.#min = signal(0);
|
|
9
|
+
this.#value = signal(0);
|
|
10
|
+
this.#percent = computed(() => {
|
|
11
|
+
return +((this.#value() / (this.#max() - this.#min())) * 100).toFixed(this.precision);
|
|
12
|
+
});
|
|
13
|
+
this.#valuesEffect = effect(() => {
|
|
14
|
+
const host = this.#hostElement.nativeElement;
|
|
15
|
+
this.#renderer.setStyle(host, 'width', `${this.#percent()}%`);
|
|
16
|
+
this.#renderer.setAttribute(host, 'aria-valuenow', String(this.#value()));
|
|
17
|
+
this.#renderer.setAttribute(host, 'aria-valuemin', String(this.#min()));
|
|
18
|
+
this.#renderer.setAttribute(host, 'aria-valuemax', String(this.#max()));
|
|
19
|
+
});
|
|
7
20
|
/**
|
|
8
21
|
* Use to animate the stripes right to left via CSS3 animations.
|
|
9
22
|
* @type boolean
|
|
@@ -11,33 +24,42 @@ export class ProgressBarComponent {
|
|
|
11
24
|
this.animated = false;
|
|
12
25
|
// TODO: check if this is necessary.
|
|
13
26
|
this.precision = 0;
|
|
14
|
-
/**
|
|
15
|
-
* The percent to progress the ProgressBar.
|
|
16
|
-
* @type number
|
|
17
|
-
*/
|
|
18
|
-
this.value = 0;
|
|
19
27
|
/**
|
|
20
28
|
* Set default html role attribute.
|
|
21
29
|
* @type string
|
|
22
30
|
*/
|
|
23
31
|
this.role = 'progressbar';
|
|
24
|
-
this.state = {
|
|
25
|
-
percent: 0,
|
|
26
|
-
min: 0,
|
|
27
|
-
max: 100
|
|
28
|
-
};
|
|
29
32
|
}
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
#renderer;
|
|
34
|
+
#hostElement;
|
|
35
|
+
#max;
|
|
36
|
+
#min;
|
|
37
|
+
#value;
|
|
38
|
+
#percent;
|
|
39
|
+
#valuesEffect;
|
|
40
|
+
/**
|
|
41
|
+
* The percent value the ProgressBar.
|
|
42
|
+
* @type number
|
|
43
|
+
* @default 0
|
|
44
|
+
*/
|
|
45
|
+
set value(value) {
|
|
46
|
+
this.#value.set(value);
|
|
32
47
|
}
|
|
48
|
+
/**
|
|
49
|
+
* The min value of the ProgressBar.
|
|
50
|
+
* @type number
|
|
51
|
+
* @default 0
|
|
52
|
+
*/
|
|
33
53
|
set min(value) {
|
|
34
|
-
this.
|
|
35
|
-
}
|
|
36
|
-
get max() {
|
|
37
|
-
return this.state.max;
|
|
54
|
+
this.#min.set(isNaN(value) || value >= this.#max() ? 0 : value);
|
|
38
55
|
}
|
|
56
|
+
/**
|
|
57
|
+
* The max value of the ProgressBar.
|
|
58
|
+
* @type number
|
|
59
|
+
* @default 100
|
|
60
|
+
*/
|
|
39
61
|
set max(value) {
|
|
40
|
-
this.
|
|
62
|
+
this.#max.set(isNaN(value) || value <= 0 || value <= this.#min() ? 100 : value);
|
|
41
63
|
}
|
|
42
64
|
get hostClasses() {
|
|
43
65
|
return {
|
|
@@ -47,34 +69,17 @@ export class ProgressBarComponent {
|
|
|
47
69
|
[`bg-${this.color}`]: !!this.color
|
|
48
70
|
};
|
|
49
71
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
setPercent() {
|
|
54
|
-
this.state.percent = +((this.value / (this.max - this.min)) * 100).toFixed(this.precision);
|
|
55
|
-
}
|
|
56
|
-
setValues() {
|
|
57
|
-
this.setPercent();
|
|
58
|
-
const host = this.hostElement.nativeElement;
|
|
59
|
-
this.renderer.setStyle(host, 'width', `${this.state.percent}%`);
|
|
60
|
-
this.renderer.setAttribute(host, 'aria-valuenow', String(this.value));
|
|
61
|
-
this.renderer.setAttribute(host, 'aria-valuemin', String(this.min));
|
|
62
|
-
this.renderer.setAttribute(host, 'aria-valuemax', String(this.max));
|
|
63
|
-
}
|
|
64
|
-
ngOnChanges(changes) {
|
|
65
|
-
this.setValues();
|
|
66
|
-
}
|
|
67
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.8", type: ProgressBarComponent, isStandalone: true, selector: "c-progress-bar", inputs: { animated: ["animated", "animated", booleanAttribute], color: "color", precision: ["precision", "precision", numberAttribute], value: ["value", "value", numberAttribute], variant: "variant", role: "role", min: "min", max: "max" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
|
|
72
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
73
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.8", type: ProgressBarComponent, isStandalone: true, selector: "c-progress-bar", inputs: { animated: ["animated", "animated", booleanAttribute], color: "color", precision: ["precision", "precision", numberAttribute], value: ["value", "value", numberAttribute], variant: "variant", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
|
|
69
74
|
}
|
|
70
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
71
76
|
type: Component,
|
|
72
77
|
args: [{
|
|
73
78
|
selector: 'c-progress-bar',
|
|
74
|
-
template: '<ng-content
|
|
79
|
+
template: '<ng-content />',
|
|
75
80
|
standalone: true
|
|
76
81
|
}]
|
|
77
|
-
}],
|
|
82
|
+
}], propDecorators: { animated: [{
|
|
78
83
|
type: Input,
|
|
79
84
|
args: [{ transform: booleanAttribute }]
|
|
80
85
|
}], color: [{
|
|
@@ -87,17 +92,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
87
92
|
args: [{ transform: numberAttribute }]
|
|
88
93
|
}], variant: [{
|
|
89
94
|
type: Input
|
|
95
|
+
}], min: [{
|
|
96
|
+
type: Input,
|
|
97
|
+
args: [{ transform: numberAttribute }]
|
|
98
|
+
}], max: [{
|
|
99
|
+
type: Input,
|
|
100
|
+
args: [{ transform: numberAttribute }]
|
|
90
101
|
}], role: [{
|
|
91
102
|
type: Input
|
|
92
103
|
}, {
|
|
93
104
|
type: HostBinding,
|
|
94
105
|
args: ['attr.role']
|
|
95
|
-
}], min: [{
|
|
96
|
-
type: Input
|
|
97
|
-
}], max: [{
|
|
98
|
-
type: Input
|
|
99
106
|
}], hostClasses: [{
|
|
100
107
|
type: HostBinding,
|
|
101
108
|
args: ['class']
|
|
102
109
|
}] } });
|
|
103
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
110
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmV1aS1hbmd1bGFyL3NyYy9saWIvcHJvZ3Jlc3MvcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2hCLFNBQVMsRUFDVCxRQUFRLEVBQ1IsTUFBTSxFQUVOLFVBQVUsRUFDVixXQUFXLEVBQ1gsTUFBTSxFQUNOLEtBQUssRUFDTCxlQUFlLEVBQ2YsU0FBUyxFQUNULE1BQU0sRUFDUCxNQUFNLGVBQWUsQ0FBQzs7QUFTdkIsTUFBTSxPQUFPLG9CQUFvQjtJQUxqQztRQU9XLGNBQVMsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDOUIsaUJBQVksR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFFbEMsU0FBSSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNuQixTQUFJLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2pCLFdBQU0sR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFbkIsYUFBUSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDaEMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEdBQUcsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxPQUFPLENBQVMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ2hHLENBQUMsQ0FBQyxDQUFDO1FBRU0sa0JBQWEsR0FBYyxNQUFNLENBQUMsR0FBRyxFQUFFO1lBQzlDLE1BQU0sSUFBSSxHQUFnQixJQUFJLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQztZQUMxRCxJQUFJLENBQUMsU0FBUyxDQUFDLFFB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RixHQUFHO3NCQUROLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFO2dCQVdqQyxHQUFHO3NCQUROLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFO2dCQVVYLElBQUk7c0JBRDdCLEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsV0FBVztnQkFHcEIsV0FBVztzQkFEZCxXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBib29sZWFuQXR0cmlidXRlLFxuICBDb21wb25lbnQsXG4gIGNvbXB1dGVkLFxuICBlZmZlY3QsXG4gIEVmZmVjdFJlZixcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIGluamVjdCxcbiAgSW5wdXQsXG4gIG51bWJlckF0dHJpYnV0ZSxcbiAgUmVuZGVyZXIyLFxuICBzaWduYWxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb2xvcnMgfSBmcm9tICcuLi9jb3JldWkudHlwZXMnO1xuaW1wb3J0IHsgSVByb2dyZXNzQmFyIH0gZnJvbSAnLi9wcm9ncmVzcy50eXBlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYy1wcm9ncmVzcy1iYXInLFxuICB0ZW1wbGF0ZTogJzxuZy1jb250ZW50IC8+JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZVxufSlcbmV4cG9ydCBjbGFzcyBQcm9ncmVzc0JhckNvbXBvbmVudCBpbXBsZW1lbnRzIElQcm9ncmVzc0JhciB7XG5cbiAgcmVhZG9ubHkgI3JlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG4gIHJlYWRvbmx5ICNob3N0RWxlbWVudCA9IGluamVjdChFbGVtZW50UmVmKTtcblxuICByZWFkb25seSAjbWF4ID0gc2lnbmFsKDEwMCk7XG4gIHJlYWRvbmx5ICNtaW4gPSBzaWduYWwoMCk7XG4gIHJlYWRvbmx5ICN2YWx1ZSA9IHNpZ25hbCgwKTtcblxuICByZWFkb25seSAjcGVyY2VudCA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICByZXR1cm4gKygodGhpcy4jdmFsdWUoKSAvICh0aGlzLiNtYXgoKSAtIHRoaXMuI21pbigpKSkgKiAxMDApLnRvRml4ZWQoPG51bWJlcj50aGlzLnByZWNpc2lvbik7XG4gIH0pO1xuXG4gIHJlYWRvbmx5ICN2YWx1ZXNFZmZlY3Q6IEVmZmVjdFJlZiA9IGVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgaG9zdDogSFRNTEVsZW1lbnQgPSB0aGlzLiNob3N0RWxlbWVudC5uYXRpdmVFbGVtZW50O1xuICAgIHRoaXMuI3JlbmRlcmVyLnNldFN0eWxlKGhvc3QsICd3aWR0aCcsIGAke3RoaXMuI3BlcmNlbnQoKX0lYCk7XG4gICAgdGhpcy4jcmVuZGVyZXIuc2V0QXR0cmlidXRlKGhvc3QsICdhcmlhLXZhbHVlbm93JywgU3RyaW5nKHRoaXMuI3ZhbHVlKCkpKTtcbiAgICB0aGlzLiNyZW5kZXJlci5zZXRBdHRyaWJ1dGUoaG9zdCwgJ2FyaWEtdmFsdWVtaW4nLCBTdHJpbmcodGhpcy4jbWluKCkpKTtcbiAgICB0aGlzLiNyZW5kZXJlci5zZXRBdHRyaWJ1dGUoaG9zdCwgJ2FyaWEtdmFsdWVtYXgnLCBTdHJpbmcodGhpcy4jbWF4KCkpKTtcbiAgfSk7XG5cbiAgLyoqXG4gICAqIFVzZSB0byBhbmltYXRlIHRoZSBzdHJpcGVzIHJpZ2h0IHRvIGxlZnQgdmlhIENTUzMgYW5pbWF0aW9ucy5cbiAgICogQHR5cGUgYm9vbGVhblxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGFuaW1hdGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGNvbG9yIGNvbnRleHQgb2YgdGhlIGNvbXBvbmVudCB0byBvbmUgb2YgQ29yZVVJ4oCZcyB0aGVtZWQgY29sb3JzLlxuICAgKiBAdmFsdWVzICdwcmltYXJ5JywgJ3NlY29uZGFyeScsICdzdWNjZXNzJywgJ2RhbmdlcicsICd3YXJuaW5nJywgJ2luZm8nLCAnZGFyaycsICdsaWdodCdcbiAgICovXG4gIEBJbnB1dCgpIGNvbG9yPzogQ29sb3JzO1xuXG4gIC8vIFRPRE86IGNoZWNrIGlmIHRoaXMgaXMgbmVjZXNzYXJ5LlxuICBASW5wdXQoeyB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSB9KSBwcmVjaXNpb246IG51bWJlciA9IDA7XG5cbiAgLyoqXG4gICAqIFRoZSBwZXJjZW50IHZhbHVlIHRoZSBQcm9ncmVzc0Jhci5cbiAgICogQHR5cGUgbnVtYmVyXG4gICAqIEBkZWZhdWx0IDBcbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogbnVtYmVyQXR0cmlidXRlIH0pXG4gIHNldCB2YWx1ZSh2YWx1ZTogbnVtYmVyKSB7XG4gICAgdGhpcy4jdmFsdWUuc2V0KHZhbHVlKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBTZXQgdGhlIHByb2dyZXNzIGJhciB2YXJpYW50IHRvIG9wdGlvbmFsIHN0cmlwZWQuXG4gICAqIEB2YWx1ZXMgJ3N0cmlwZWQnXG4gICAqIEBkZWZhdWx0IHVuZGVmaW5lZFxuICAgKi9cbiAgQElucHV0KCkgdmFyaWFudD86ICdzdHJpcGVkJztcblxuICAvKipcbiAgICogVGhlIG1pbiB2YWx1ZSBvZiAgdGhlIFByb2dyZXNzQmFyLlxuICAgKiBAdHlwZSBudW1iZXJcbiAgICogQGRlZmF1bHQgMFxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBudW1iZXJBdHRyaWJ1dGUgfSlcbiAgc2V0IG1pbih2YWx1ZTogbnVtYmVyKSB7XG4gICAgdGhpcy4jbWluLnNldChpc05hTih2YWx1ZSkgfHwgdmFsdWUgPj0gdGhpcy4jbWF4KCkgPyAwIDogdmFsdWUpO1xuICB9XG5cbiAgLyoqXG4gICAqIFRoZSBtYXggdmFsdWUgb2YgdGhlIFByb2dyZXNzQmFyLlxuICAgKiBAdHlwZSBudW1iZXJcbiAgICogQGRlZmF1bHQgMTAwXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSB9KVxuICBzZXQgbWF4KHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLiNtYXguc2V0KGlzTmFOKHZhbHVlKSB8fCB2YWx1ZSA8PSAwIHx8IHZhbHVlIDw9IHRoaXMuI21pbigpID8gMTAwIDogdmFsdWUpO1xuICB9XG5cbiAgLyoqXG4gICAqIFNldCBkZWZhdWx0IGh0bWwgcm9sZSBhdHRyaWJ1dGUuXG4gICAqIEB0eXBlIHN0cmluZ1xuICAgKi9cbiAgQElucHV0KClcbiAgQEhvc3RCaW5kaW5nKCdhdHRyLnJvbGUnKSByb2xlOiBzdHJpbmcgPSAncHJvZ3Jlc3NiYXInO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgaG9zdENsYXNzZXMoKTogYW55IHtcbiAgICByZXR1cm4ge1xuICAgICAgJ3Byb2dyZXNzLWJhcic6IHRydWUsXG4gICAgICAncHJvZ3Jlc3MtYmFyLWFuaW1hdGVkJzogdGhpcy5hbmltYXRlZCxcbiAgICAgIFtgcHJvZ3Jlc3MtYmFyLSR7dGhpcy52YXJpYW50fWBdOiAhIXRoaXMudmFyaWFudCxcbiAgICAgIFtgYmctJHt0aGlzLmNvbG9yfWBdOiAhIXRoaXMuY29sb3JcbiAgICB9O1xuICB9XG59XG4iXX0=
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
2
|
+
import { booleanAttribute, Component, ElementRef, HostBinding, inject, Input, numberAttribute } from '@angular/core';
|
|
3
|
+
import { ProgressBarComponent } from './progress-bar.component';
|
|
2
4
|
import * as i0 from "@angular/core";
|
|
3
5
|
export class ProgressComponent {
|
|
4
6
|
constructor() {
|
|
7
|
+
this.#elementRef = inject(ElementRef);
|
|
5
8
|
/**
|
|
6
9
|
* Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
|
|
7
10
|
* @type number
|
|
@@ -17,7 +20,10 @@ export class ProgressComponent {
|
|
|
17
20
|
* @type boolean
|
|
18
21
|
*/
|
|
19
22
|
this.white = false;
|
|
23
|
+
this.max = 100;
|
|
24
|
+
this.min = 0;
|
|
20
25
|
}
|
|
26
|
+
#elementRef;
|
|
21
27
|
get hostClasses() {
|
|
22
28
|
return {
|
|
23
29
|
progress: true,
|
|
@@ -26,18 +32,14 @@ export class ProgressComponent {
|
|
|
26
32
|
};
|
|
27
33
|
}
|
|
28
34
|
get hostStyle() {
|
|
29
|
-
return !!this.height ? `${this.height}px` : '';
|
|
35
|
+
return !!this.height ? `${this.height}px` : this.#elementRef?.nativeElement?.style?.height ?? '';
|
|
30
36
|
}
|
|
31
37
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: ["height", "height", numberAttribute], thin: ["thin", "thin", booleanAttribute], white: ["white", "white", booleanAttribute], value: ["value", "value", numberAttribute], max: ["max", "max", numberAttribute], min: ["min", "min", numberAttribute], animated: ["animated", "animated", booleanAttribute], color: "color", variant: "variant" }, host: { properties: { "class": "this.hostClasses", "style.height": "this.hostStyle" } }, ngImport: i0, template: "@if (value !== undefined) {\n <c-progress-bar [value]=\"value\" [min]=\"min\" [max]=\"max\" [animated]=\"animated\" [variant]=\"variant\" [color]=\"color\">\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n </c-progress-bar>\n} @else {\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n}\n\n<ng-template #defaultContent>\n <ng-content />\n</ng-template>\n\n", dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "c-progress-bar", inputs: ["animated", "color", "precision", "value", "variant", "min", "max", "role"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
33
39
|
}
|
|
34
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressComponent, decorators: [{
|
|
35
41
|
type: Component,
|
|
36
|
-
args: [{
|
|
37
|
-
selector: 'c-progress',
|
|
38
|
-
template: '<ng-content></ng-content>',
|
|
39
|
-
standalone: true
|
|
40
|
-
}]
|
|
42
|
+
args: [{ selector: 'c-progress', imports: [ProgressBarComponent, NgTemplateOutlet], standalone: true, template: "@if (value !== undefined) {\n <c-progress-bar [value]=\"value\" [min]=\"min\" [max]=\"max\" [animated]=\"animated\" [variant]=\"variant\" [color]=\"color\">\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n </c-progress-bar>\n} @else {\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n}\n\n<ng-template #defaultContent>\n <ng-content />\n</ng-template>\n\n" }]
|
|
41
43
|
}], propDecorators: { height: [{
|
|
42
44
|
type: Input,
|
|
43
45
|
args: [{ transform: numberAttribute }]
|
|
@@ -47,6 +49,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
47
49
|
}], white: [{
|
|
48
50
|
type: Input,
|
|
49
51
|
args: [{ transform: booleanAttribute }]
|
|
52
|
+
}], value: [{
|
|
53
|
+
type: Input,
|
|
54
|
+
args: [{ transform: numberAttribute }]
|
|
55
|
+
}], max: [{
|
|
56
|
+
type: Input,
|
|
57
|
+
args: [{ transform: numberAttribute }]
|
|
58
|
+
}], min: [{
|
|
59
|
+
type: Input,
|
|
60
|
+
args: [{ transform: numberAttribute }]
|
|
61
|
+
}], animated: [{
|
|
62
|
+
type: Input,
|
|
63
|
+
args: [{ transform: booleanAttribute }]
|
|
64
|
+
}], color: [{
|
|
65
|
+
type: Input
|
|
66
|
+
}], variant: [{
|
|
67
|
+
type: Input
|
|
50
68
|
}], hostClasses: [{
|
|
51
69
|
type: HostBinding,
|
|
52
70
|
args: ['class']
|
|
@@ -54,4 +72,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
54
72
|
type: HostBinding,
|
|
55
73
|
args: ['style.height']
|
|
56
74
|
}] } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
75
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZXVpLWFuZ3VsYXIvc3JjL2xpYi9wcm9ncmVzcy9wcm9ncmVzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JldWktYW5ndWxhci9zcmMvbGliL3Byb2dyZXNzL3Byb2dyZXNzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLGVBQWUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUdySCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7QUFTaEUsTUFBTSxPQUFPLGlCQUFpQjtJQU45QjtRQVFXLGdCQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRTFDOzs7V0FHRztRQUNvQyxXQUFNLEdBQVcsQ0FBQyxDQUFDO1FBRTFEOzs7V0FHRztRQUNxQyxTQUFJLEdBQVksS0FBSyxDQUFDO1FBRTlEOzs7V0FHRztRQUNxQyxVQUFLLEdBQVksS0FBSyxDQUFDO1FBTXhCLFFBQUcsR0FBWSxHQUFHLENBQUM7UUFDbkIsUUFBRyxHQUFZLENBQUMsQ0FBQztLQWtCekQ7SUEzQ1UsV0FBVyxDQUFzQjtJQThCMUMsSUFDSSxXQUFXO1FBQ2IsT0FBTztZQUNMLFFBQVEsRUFBRSxJQUFJO1lBQ2QsZUFBZSxFQUFFLElBQUksQ0FBQyxJQUFJO1lBQzFCLGdCQUFnQixFQUFFLElBQUksQ0FBQyxLQUFLO1NBQzdCLENBQUM7SUFDSixDQUFDO0lBRUQsSUFDSSxTQUFTO1FBQ1gsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRSxNQUFNLElBQUksRUFBRSxDQUFDO0lBQ25HLENBQUM7OEdBNUNVLGlCQUFpQjtrR0FBakIsaUJBQWlCLHFGQVFSLGVBQWUsMEJBTWYsZ0JBQWdCLDZCQU1oQixnQkFBZ0IsNkJBS2hCLGVBQWUsdUJBQ2YsZUFBZSx1QkFDZixlQUFlLHNDQUNmLGdCQUFnQiwwSkN6Q3RDLDZYQVlBLDRDREZZLG9CQUFvQixpSkFBRSxnQkFBZ0I7OzJGQUdyQyxpQkFBaUI7a0JBTjdCLFNBQVM7K0JBQ0UsWUFBWSxXQUViLENBQUMsb0JBQW9CLEVBQUUsZ0JBQWdCLENBQUMsY0FDckMsSUFBSTs4QkFVdUIsTUFBTTtzQkFBNUMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUU7Z0JBTUcsSUFBSTtzQkFBM0MsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFNRSxLQUFLO3NCQUE1QyxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUtDLEtBQUs7c0JBQTNDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFO2dCQUNFLEdBQUc7c0JBQXpDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFO2dCQUNFLEdBQUc7c0JBQXpDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFO2dCQUNHLFFBQVE7c0JBQS9DLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBQzdCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBR0YsV0FBVztzQkFEZCxXQUFXO3VCQUFDLE9BQU87Z0JBVWhCLFNBQVM7c0JBRFosV0FBVzt1QkFBQyxjQUFjIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBib29sZWFuQXR0cmlidXRlLCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBpbmplY3QsIElucHV0LCBudW1iZXJBdHRyaWJ1dGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ29sb3JzIH0gZnJvbSAnLi4vY29yZXVpLnR5cGVzJztcbmltcG9ydCB7IFByb2dyZXNzQmFyQ29tcG9uZW50IH0gZnJvbSAnLi9wcm9ncmVzcy1iYXIuY29tcG9uZW50JztcbmltcG9ydCB7IElQcm9ncmVzcyB9IGZyb20gJy4vcHJvZ3Jlc3MudHlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2MtcHJvZ3Jlc3MnLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MuY29tcG9uZW50Lmh0bWwnLFxuICBpbXBvcnRzOiBbUHJvZ3Jlc3NCYXJDb21wb25lbnQsIE5nVGVtcGxhdGVPdXRsZXRdLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQ29tcG9uZW50IGltcGxlbWVudHMgSVByb2dyZXNzIHtcblxuICByZWFkb25seSAjZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcblxuICAvKipcbiAgICogU2V0cyB0aGUgaGVpZ2h0IG9mIHRoZSBjb21wb25lbnQuIElmIHlvdSBzZXQgdGhhdCB2YWx1ZSB0aGUgaW5uZXIgYDxDUHJvZ3Jlc3NCYXI+YCB3aWxsIGF1dG9tYXRpY2FsbHkgcmVzaXplIGFjY29yZGluZ2x5LlxuICAgKiBAdHlwZSBudW1iZXJcbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogbnVtYmVyQXR0cmlidXRlIH0pIGhlaWdodDogbnVtYmVyID0gMDtcblxuICAvKipcbiAgICogRGlzcGxheXMgdGhpbiBwcm9ncmVzcy5cbiAgICogQHR5cGUgYm9vbGVhblxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIHRoaW46IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogQ2hhbmdlIHRoZSBkZWZhdWx0IGNvbG9yIHRvIHdoaXRlLlxuICAgKiBAdHlwZSBib29sZWFuXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgd2hpdGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogcHJvcHMgZm9yIFByb2dyZXNzQmFyLlxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBudW1iZXJBdHRyaWJ1dGUgfSkgdmFsdWU/OiBudW1iZXI7XG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogbnVtYmVyQXR0cmlidXRlIH0pIG1heD86IG51bWJlciA9IDEwMDtcbiAgQElucHV0KHsgdHJhbnNmb3JtOiBudW1iZXJBdHRyaWJ1dGUgfSkgbWluPzogbnVtYmVyID0gMDtcbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGFuaW1hdGVkPzogYm9vbGVhbjtcbiAgQElucHV0KCkgY29sb3I/OiBDb2xvcnM7XG4gIEBJbnB1dCgpIHZhcmlhbnQ/OiAnc3RyaXBlZCc7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBob3N0Q2xhc3NlcygpOiBhbnkge1xuICAgIHJldHVybiB7XG4gICAgICBwcm9ncmVzczogdHJ1ZSxcbiAgICAgICdwcm9ncmVzcy10aGluJzogdGhpcy50aGluLFxuICAgICAgJ3Byb2dyZXNzLXdoaXRlJzogdGhpcy53aGl0ZVxuICAgIH07XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmhlaWdodCcpXG4gIGdldCBob3N0U3R5bGUoKTogYW55IHtcbiAgICByZXR1cm4gISF0aGlzLmhlaWdodCA/IGAke3RoaXMuaGVpZ2h0fXB4YCA6IHRoaXMuI2VsZW1lbnRSZWY/Lm5hdGl2ZUVsZW1lbnQ/LnN0eWxlPy5oZWlnaHQgPz8gJyc7XG4gIH1cbn1cbiIsIkBpZiAodmFsdWUgIT09IHVuZGVmaW5lZCkge1xuICA8Yy1wcm9ncmVzcy1iYXIgW3ZhbHVlXT1cInZhbHVlXCIgW21pbl09XCJtaW5cIiBbbWF4XT1cIm1heFwiIFthbmltYXRlZF09XCJhbmltYXRlZFwiIFt2YXJpYW50XT1cInZhcmlhbnRcIiBbY29sb3JdPVwiY29sb3JcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZGVmYXVsdENvbnRlbnRcIiAvPlxuICA8L2MtcHJvZ3Jlc3MtYmFyPlxufSBAZWxzZSB7XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJkZWZhdWx0Q29udGVudFwiIC8+XG59XG5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdENvbnRlbnQ+XG4gIDxuZy1jb250ZW50IC8+XG48L25nLXRlbXBsYXRlPlxuXG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MudHlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmV1aS1hbmd1bGFyL3NyYy9saWIvcHJvZ3Jlc3MvcHJvZ3Jlc3MudHlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JzIH0gZnJvbSAnLi4vY29yZXVpLnR5cGVzJztcblxuZXhwb3J0IGludGVyZmFjZSBJUHJvZ3Jlc3MgZXh0ZW5kcyBPbWl0PElQcm9ncmVzc0JhciwgJ2FuaW1hdGVkJyB8ICd2YWx1ZSc+IHtcbiAgdGhpbj86IGJvb2xlYW47XG4gIGhlaWdodD86IG51bWJlcjtcbiAgYW5pbWF0ZWQ/OiBib29sZWFuO1xuICB2YWx1ZT86IG51bWJlcjtcbiAgd2hpdGU/OiBib29sZWFuO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElQcm9ncmVzc0JhciB7XG4gIGFuaW1hdGVkOiBib29sZWFuO1xuICBjb2xvcj86IENvbG9ycztcbiAgdmFsdWU6IG51bWJlcjtcbiAgdmFyaWFudD86ICdzdHJpcGVkJztcbiAgbWluPzogbnVtYmVyO1xuICBtYXg/OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVN0YWNrZWRCYXIgZXh0ZW5kcyBJUHJvZ3Jlc3NCYXIge1xuICBsYWJlbD86IHN0cmluZztcbn1cbiJdfQ==
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { ProgressComponent } from './progress.component';
|
|
2
2
|
export { ProgressBarComponent } from './progress-bar.component';
|
|
3
3
|
export { ProgressModule } from './progress.module';
|
|
4
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
4
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmV1aS1hbmd1bGFyL3NyYy9saWIvcHJvZ3Jlc3MvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN6RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBJU3RhY2tlZEJhciwgSVByb2dyZXNzQmFyLCBJUHJvZ3Jlc3MgfSBmcm9tICcuL3Byb2dyZXNzLnR5cGUnO1xuZXhwb3J0IHsgUHJvZ3Jlc3NDb21wb25lbnQgfSBmcm9tICcuL3Byb2dyZXNzLmNvbXBvbmVudCc7XG5leHBvcnQgeyBQcm9ncmVzc0JhckNvbXBvbmVudCB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudCc7XG5leHBvcnQgeyBQcm9ncmVzc01vZHVsZSB9IGZyb20gJy4vcHJvZ3Jlc3MubW9kdWxlJztcbiJdfQ==
|
|
@@ -13159,65 +13159,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
13159
13159
|
}]
|
|
13160
13160
|
}] });
|
|
13161
13161
|
|
|
13162
|
-
class ProgressComponent {
|
|
13163
|
-
constructor() {
|
|
13164
|
-
/**
|
|
13165
|
-
* Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
|
|
13166
|
-
* @type number
|
|
13167
|
-
*/
|
|
13168
|
-
this.height = 0;
|
|
13169
|
-
/**
|
|
13170
|
-
* Displays thin progress.
|
|
13171
|
-
* @type boolean
|
|
13172
|
-
*/
|
|
13173
|
-
this.thin = false;
|
|
13174
|
-
/**
|
|
13175
|
-
* Change the default color to white.
|
|
13176
|
-
* @type boolean
|
|
13177
|
-
*/
|
|
13178
|
-
this.white = false;
|
|
13179
|
-
}
|
|
13180
|
-
get hostClasses() {
|
|
13181
|
-
return {
|
|
13182
|
-
progress: true,
|
|
13183
|
-
'progress-thin': this.thin,
|
|
13184
|
-
'progress-white': this.white
|
|
13185
|
-
};
|
|
13186
|
-
}
|
|
13187
|
-
get hostStyle() {
|
|
13188
|
-
return !!this.height ? `${this.height}px` : '';
|
|
13189
|
-
}
|
|
13190
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.8", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: ["height", "height", numberAttribute], thin: ["thin", "thin", booleanAttribute], white: ["white", "white", booleanAttribute] }, host: { properties: { "class": "this.hostClasses", "style.height": "this.hostStyle" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
|
|
13192
|
-
}
|
|
13193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressComponent, decorators: [{
|
|
13194
|
-
type: Component,
|
|
13195
|
-
args: [{
|
|
13196
|
-
selector: 'c-progress',
|
|
13197
|
-
template: '<ng-content></ng-content>',
|
|
13198
|
-
standalone: true
|
|
13199
|
-
}]
|
|
13200
|
-
}], propDecorators: { height: [{
|
|
13201
|
-
type: Input,
|
|
13202
|
-
args: [{ transform: numberAttribute }]
|
|
13203
|
-
}], thin: [{
|
|
13204
|
-
type: Input,
|
|
13205
|
-
args: [{ transform: booleanAttribute }]
|
|
13206
|
-
}], white: [{
|
|
13207
|
-
type: Input,
|
|
13208
|
-
args: [{ transform: booleanAttribute }]
|
|
13209
|
-
}], hostClasses: [{
|
|
13210
|
-
type: HostBinding,
|
|
13211
|
-
args: ['class']
|
|
13212
|
-
}], hostStyle: [{
|
|
13213
|
-
type: HostBinding,
|
|
13214
|
-
args: ['style.height']
|
|
13215
|
-
}] } });
|
|
13216
|
-
|
|
13217
13162
|
class ProgressBarComponent {
|
|
13218
|
-
constructor(
|
|
13219
|
-
this
|
|
13220
|
-
this
|
|
13163
|
+
constructor() {
|
|
13164
|
+
this.#renderer = inject(Renderer2);
|
|
13165
|
+
this.#hostElement = inject(ElementRef);
|
|
13166
|
+
this.#max = signal(100);
|
|
13167
|
+
this.#min = signal(0);
|
|
13168
|
+
this.#value = signal(0);
|
|
13169
|
+
this.#percent = computed(() => {
|
|
13170
|
+
return +((this.#value() / (this.#max() - this.#min())) * 100).toFixed(this.precision);
|
|
13171
|
+
});
|
|
13172
|
+
this.#valuesEffect = effect(() => {
|
|
13173
|
+
const host = this.#hostElement.nativeElement;
|
|
13174
|
+
this.#renderer.setStyle(host, 'width', `${this.#percent()}%`);
|
|
13175
|
+
this.#renderer.setAttribute(host, 'aria-valuenow', String(this.#value()));
|
|
13176
|
+
this.#renderer.setAttribute(host, 'aria-valuemin', String(this.#min()));
|
|
13177
|
+
this.#renderer.setAttribute(host, 'aria-valuemax', String(this.#max()));
|
|
13178
|
+
});
|
|
13221
13179
|
/**
|
|
13222
13180
|
* Use to animate the stripes right to left via CSS3 animations.
|
|
13223
13181
|
* @type boolean
|
|
@@ -13225,33 +13183,42 @@ class ProgressBarComponent {
|
|
|
13225
13183
|
this.animated = false;
|
|
13226
13184
|
// TODO: check if this is necessary.
|
|
13227
13185
|
this.precision = 0;
|
|
13228
|
-
/**
|
|
13229
|
-
* The percent to progress the ProgressBar.
|
|
13230
|
-
* @type number
|
|
13231
|
-
*/
|
|
13232
|
-
this.value = 0;
|
|
13233
13186
|
/**
|
|
13234
13187
|
* Set default html role attribute.
|
|
13235
13188
|
* @type string
|
|
13236
13189
|
*/
|
|
13237
13190
|
this.role = 'progressbar';
|
|
13238
|
-
this.state = {
|
|
13239
|
-
percent: 0,
|
|
13240
|
-
min: 0,
|
|
13241
|
-
max: 100
|
|
13242
|
-
};
|
|
13243
13191
|
}
|
|
13244
|
-
|
|
13245
|
-
|
|
13192
|
+
#renderer;
|
|
13193
|
+
#hostElement;
|
|
13194
|
+
#max;
|
|
13195
|
+
#min;
|
|
13196
|
+
#value;
|
|
13197
|
+
#percent;
|
|
13198
|
+
#valuesEffect;
|
|
13199
|
+
/**
|
|
13200
|
+
* The percent value the ProgressBar.
|
|
13201
|
+
* @type number
|
|
13202
|
+
* @default 0
|
|
13203
|
+
*/
|
|
13204
|
+
set value(value) {
|
|
13205
|
+
this.#value.set(value);
|
|
13246
13206
|
}
|
|
13207
|
+
/**
|
|
13208
|
+
* The min value of the ProgressBar.
|
|
13209
|
+
* @type number
|
|
13210
|
+
* @default 0
|
|
13211
|
+
*/
|
|
13247
13212
|
set min(value) {
|
|
13248
|
-
this.
|
|
13249
|
-
}
|
|
13250
|
-
get max() {
|
|
13251
|
-
return this.state.max;
|
|
13213
|
+
this.#min.set(isNaN(value) || value >= this.#max() ? 0 : value);
|
|
13252
13214
|
}
|
|
13215
|
+
/**
|
|
13216
|
+
* The max value of the ProgressBar.
|
|
13217
|
+
* @type number
|
|
13218
|
+
* @default 100
|
|
13219
|
+
*/
|
|
13253
13220
|
set max(value) {
|
|
13254
|
-
this.
|
|
13221
|
+
this.#max.set(isNaN(value) || value <= 0 || value <= this.#min() ? 100 : value);
|
|
13255
13222
|
}
|
|
13256
13223
|
get hostClasses() {
|
|
13257
13224
|
return {
|
|
@@ -13261,34 +13228,17 @@ class ProgressBarComponent {
|
|
|
13261
13228
|
[`bg-${this.color}`]: !!this.color
|
|
13262
13229
|
};
|
|
13263
13230
|
}
|
|
13264
|
-
|
|
13265
|
-
|
|
13266
|
-
}
|
|
13267
|
-
setPercent() {
|
|
13268
|
-
this.state.percent = +((this.value / (this.max - this.min)) * 100).toFixed(this.precision);
|
|
13269
|
-
}
|
|
13270
|
-
setValues() {
|
|
13271
|
-
this.setPercent();
|
|
13272
|
-
const host = this.hostElement.nativeElement;
|
|
13273
|
-
this.renderer.setStyle(host, 'width', `${this.state.percent}%`);
|
|
13274
|
-
this.renderer.setAttribute(host, 'aria-valuenow', String(this.value));
|
|
13275
|
-
this.renderer.setAttribute(host, 'aria-valuemin', String(this.min));
|
|
13276
|
-
this.renderer.setAttribute(host, 'aria-valuemax', String(this.max));
|
|
13277
|
-
}
|
|
13278
|
-
ngOnChanges(changes) {
|
|
13279
|
-
this.setValues();
|
|
13280
|
-
}
|
|
13281
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.8", type: ProgressBarComponent, isStandalone: true, selector: "c-progress-bar", inputs: { animated: ["animated", "animated", booleanAttribute], color: "color", precision: ["precision", "precision", numberAttribute], value: ["value", "value", numberAttribute], variant: "variant", role: "role", min: "min", max: "max" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
|
|
13231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.8", type: ProgressBarComponent, isStandalone: true, selector: "c-progress-bar", inputs: { animated: ["animated", "animated", booleanAttribute], color: "color", precision: ["precision", "precision", numberAttribute], value: ["value", "value", numberAttribute], variant: "variant", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
|
|
13283
13233
|
}
|
|
13284
13234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
13285
13235
|
type: Component,
|
|
13286
13236
|
args: [{
|
|
13287
13237
|
selector: 'c-progress-bar',
|
|
13288
|
-
template: '<ng-content
|
|
13238
|
+
template: '<ng-content />',
|
|
13289
13239
|
standalone: true
|
|
13290
13240
|
}]
|
|
13291
|
-
}],
|
|
13241
|
+
}], propDecorators: { animated: [{
|
|
13292
13242
|
type: Input,
|
|
13293
13243
|
args: [{ transform: booleanAttribute }]
|
|
13294
13244
|
}], color: [{
|
|
@@ -13301,18 +13251,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
|
|
|
13301
13251
|
args: [{ transform: numberAttribute }]
|
|
13302
13252
|
}], variant: [{
|
|
13303
13253
|
type: Input
|
|
13254
|
+
}], min: [{
|
|
13255
|
+
type: Input,
|
|
13256
|
+
args: [{ transform: numberAttribute }]
|
|
13257
|
+
}], max: [{
|
|
13258
|
+
type: Input,
|
|
13259
|
+
args: [{ transform: numberAttribute }]
|
|
13304
13260
|
}], role: [{
|
|
13305
13261
|
type: Input
|
|
13306
13262
|
}, {
|
|
13307
13263
|
type: HostBinding,
|
|
13308
13264
|
args: ['attr.role']
|
|
13265
|
+
}], hostClasses: [{
|
|
13266
|
+
type: HostBinding,
|
|
13267
|
+
args: ['class']
|
|
13268
|
+
}] } });
|
|
13269
|
+
|
|
13270
|
+
class ProgressComponent {
|
|
13271
|
+
constructor() {
|
|
13272
|
+
this.#elementRef = inject(ElementRef);
|
|
13273
|
+
/**
|
|
13274
|
+
* Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
|
|
13275
|
+
* @type number
|
|
13276
|
+
*/
|
|
13277
|
+
this.height = 0;
|
|
13278
|
+
/**
|
|
13279
|
+
* Displays thin progress.
|
|
13280
|
+
* @type boolean
|
|
13281
|
+
*/
|
|
13282
|
+
this.thin = false;
|
|
13283
|
+
/**
|
|
13284
|
+
* Change the default color to white.
|
|
13285
|
+
* @type boolean
|
|
13286
|
+
*/
|
|
13287
|
+
this.white = false;
|
|
13288
|
+
this.max = 100;
|
|
13289
|
+
this.min = 0;
|
|
13290
|
+
}
|
|
13291
|
+
#elementRef;
|
|
13292
|
+
get hostClasses() {
|
|
13293
|
+
return {
|
|
13294
|
+
progress: true,
|
|
13295
|
+
'progress-thin': this.thin,
|
|
13296
|
+
'progress-white': this.white
|
|
13297
|
+
};
|
|
13298
|
+
}
|
|
13299
|
+
get hostStyle() {
|
|
13300
|
+
return !!this.height ? `${this.height}px` : this.#elementRef?.nativeElement?.style?.height ?? '';
|
|
13301
|
+
}
|
|
13302
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13303
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: ["height", "height", numberAttribute], thin: ["thin", "thin", booleanAttribute], white: ["white", "white", booleanAttribute], value: ["value", "value", numberAttribute], max: ["max", "max", numberAttribute], min: ["min", "min", numberAttribute], animated: ["animated", "animated", booleanAttribute], color: "color", variant: "variant" }, host: { properties: { "class": "this.hostClasses", "style.height": "this.hostStyle" } }, ngImport: i0, template: "@if (value !== undefined) {\n <c-progress-bar [value]=\"value\" [min]=\"min\" [max]=\"max\" [animated]=\"animated\" [variant]=\"variant\" [color]=\"color\">\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n </c-progress-bar>\n} @else {\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n}\n\n<ng-template #defaultContent>\n <ng-content />\n</ng-template>\n\n", dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "c-progress-bar", inputs: ["animated", "color", "precision", "value", "variant", "min", "max", "role"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
13304
|
+
}
|
|
13305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProgressComponent, decorators: [{
|
|
13306
|
+
type: Component,
|
|
13307
|
+
args: [{ selector: 'c-progress', imports: [ProgressBarComponent, NgTemplateOutlet], standalone: true, template: "@if (value !== undefined) {\n <c-progress-bar [value]=\"value\" [min]=\"min\" [max]=\"max\" [animated]=\"animated\" [variant]=\"variant\" [color]=\"color\">\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n </c-progress-bar>\n} @else {\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n}\n\n<ng-template #defaultContent>\n <ng-content />\n</ng-template>\n\n" }]
|
|
13308
|
+
}], propDecorators: { height: [{
|
|
13309
|
+
type: Input,
|
|
13310
|
+
args: [{ transform: numberAttribute }]
|
|
13311
|
+
}], thin: [{
|
|
13312
|
+
type: Input,
|
|
13313
|
+
args: [{ transform: booleanAttribute }]
|
|
13314
|
+
}], white: [{
|
|
13315
|
+
type: Input,
|
|
13316
|
+
args: [{ transform: booleanAttribute }]
|
|
13317
|
+
}], value: [{
|
|
13318
|
+
type: Input,
|
|
13319
|
+
args: [{ transform: numberAttribute }]
|
|
13320
|
+
}], max: [{
|
|
13321
|
+
type: Input,
|
|
13322
|
+
args: [{ transform: numberAttribute }]
|
|
13309
13323
|
}], min: [{
|
|
13324
|
+
type: Input,
|
|
13325
|
+
args: [{ transform: numberAttribute }]
|
|
13326
|
+
}], animated: [{
|
|
13327
|
+
type: Input,
|
|
13328
|
+
args: [{ transform: booleanAttribute }]
|
|
13329
|
+
}], color: [{
|
|
13310
13330
|
type: Input
|
|
13311
|
-
}],
|
|
13331
|
+
}], variant: [{
|
|
13312
13332
|
type: Input
|
|
13313
13333
|
}], hostClasses: [{
|
|
13314
13334
|
type: HostBinding,
|
|
13315
13335
|
args: ['class']
|
|
13336
|
+
}], hostStyle: [{
|
|
13337
|
+
type: HostBinding,
|
|
13338
|
+
args: ['style.height']
|
|
13316
13339
|
}] } });
|
|
13317
13340
|
|
|
13318
13341
|
class ProgressModule {
|