fix: optimized progress button and bar components

projects/design-angular-kit/src/lib/components/core/progress-bar/progress-bar.component.html

@@ -4,9 +4,9 @@
   </div>
   <div class="progress"
        [class.progress-color]="!!color"
-       [class.progress-indeterminate]="indeterminate === true || indeterminate === 'true'">
+       [class.progress-indeterminate]="isIndeterminate">
 
-    <div *ngIf="indeterminate === true || indeterminate === 'true'; else determinate" class="progress-bar{{bgColor}}" role="progressbar"></div>
+    <div *ngIf="isIndeterminate; else determinate" class="progress-bar{{bgColor}}" role="progressbar"></div>
     <ng-template #determinate>
       <div class="progress-bar{{bgColor}}" role="progressbar" [style.width.%]="value"
            [attr.aria-valuenow]="value" aria-valuemin="0" aria-valuemax="100"></div>

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);
+  }
 }

projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.html

@@ -1,6 +1,6 @@
 <ng-content></ng-content>
 
 <it-progress-bar *ngIf="isProgress"
-                 [value]="progress||0"
-                 [indeterminate]="indeterminate"
+                 [value]="progressValue"
+                 [indeterminate]="isIndeterminate"
                  [color]="progressColor"></it-progress-bar>

projects/design-angular-kit/src/lib/components/core/progress-button/progress-button.component.ts

@@ -1,36 +1,39 @@
-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
+   * - <b>true</b>: Show indeterminate progress bar
+   * - <b>false</b> or <b>undefined</b>: Hide progress bar
+   * - <b>number</b> [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
    */
   @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);
   }
 
 }

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';
 

src/app/progress-bar/progress-bar-button/progress-bar-button.component.html

@@ -4,7 +4,7 @@ <h3>Pulsante con Progress Bar</h3>
   <div class="row">
     <div class="col-12 col-sm-6">
       <p><strong>Pulsante primario</strong></p>
-      <button itButton="primary" [progress]="null" indeterminate="true" disabled="true">
+      <button itButton="primary" progress="true" disabled="true">
         Label pulsante
         <it-icon name="github" color="white" class="ms-2"></it-icon>
       </button>