diff --git a/projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.html b/projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.html
index 55812e37..14475e21 100644
--- a/projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.html
@@ -4,9 +4,9 @@
+ [class.progress-indeterminate]="isIndeterminate">
-
+
diff --git a/projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.ts b/projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.ts
index 09cf3b38..8cf349d1 100644
--- a/projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.ts
@@ -1,11 +1,12 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ProgressBarColor } from '../../../interfaces/core';
-import { BooleanInput } from '../../../utils/boolean-input';
+import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input';
@Component({
selector: 'it-progress-bar[value]',
templateUrl: './progress-bar.component.html',
- styleUrls: ['./progress-bar.component.scss']
+ styleUrls: ['./progress-bar.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProgressBarComponent {
@@ -39,4 +40,8 @@ export class ProgressBarComponent {
return ` bg-${this.color}`;
}
+
+ get isIndeterminate(): boolean {
+ return isTrueBooleanInput(this.indeterminate);
+ }
}
diff --git a/projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.html b/projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.html
index bf139b26..79fca330 100644
--- a/projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.html
@@ -1,6 +1,6 @@
diff --git a/projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.ts b/projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.ts
index 471f40a1..716b64a8 100644
--- a/projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.ts
@@ -1,24 +1,23 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input';
import { ProgressBarColor } from '../../../interfaces/core';
@Component({
selector: 'button[itButton][progress]',
templateUrl: './progress-button.component.html',
- styleUrls: ['./progress-button.component.scss']
+ styleUrls: ['./progress-button.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProgressButtonComponent {
/**
- * The progress bar value [0, 100]
- * @default null
+ * Behavior of the progress bar
+ * - true: Show indeterminate progress bar
+ * - false or undefined: Hide progress bar
+ * - number [0, 100]: Assign a specific value to the progress bar
+ * @default undefined
*/
- @Input() progress?: number | null = null;
-
- /**
- * Show the progress as indeterminate
- */
- @Input() indeterminate?: BooleanInput;
+ @Input() progress?: number | BooleanInput;
/**
* The progress bar color
@@ -26,11 +25,15 @@ export class ProgressButtonComponent {
@Input() progressColor?: ProgressBarColor;
get isProgress(): boolean {
- return (this.progress !== null && this.progress !== undefined) || this.isIndeterminate;
+ return typeof this.progress === 'number' || isTrueBooleanInput(this.progress);
+ }
+
+ get progressValue(): number {
+ return typeof this.progress === 'number' ? this.progress : 0;
}
get isIndeterminate(): boolean {
- return isTrueBooleanInput(this.indeterminate);
+ return typeof this.progress !== 'number' && isTrueBooleanInput(this.progress);
}
}
diff --git a/projects/design-angular-kit/src/lib/interfaces/core.ts b/projects/design-angular-kit/src/lib/interfaces/core.ts
index 232f4946..25f5c3cb 100644
--- a/projects/design-angular-kit/src/lib/interfaces/core.ts
+++ b/projects/design-angular-kit/src/lib/interfaces/core.ts
@@ -27,7 +27,7 @@ export type CalloutAppearance = 'default' | 'highlight' | 'more';
export type ElementPlacement = 'top' | 'bottom' | 'left' | 'right';
-export type ProgressBarColor = 'success' | 'warning' | 'danger' | 'info';
+export type ProgressBarColor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
export type BadgeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
diff --git a/src/app/progress-bar/progress-bar-button/progress-bar-button.component.html b/src/app/progress-bar/progress-bar-button/progress-bar-button.component.html
index ba3c4983..7e4625e7 100644
--- a/src/app/progress-bar/progress-bar-button/progress-bar-button.component.html
+++ b/src/app/progress-bar/progress-bar-button/progress-bar-button.component.html
@@ -4,7 +4,7 @@ Pulsante con Progress Bar
Pulsante primario
-