feat(progress-bar): add progress bar component (#16559)

resolves #16558

angular/src/directives/proxies-list.txt

@@ -47,6 +47,7 @@ export const DIRECTIVES = [
   d.IonNavPush,
   d.IonNavSetRoot,
   d.IonNote,
+  d.IonProgressBar,
   d.IonRadio,
   d.IonRadioGroup,
   d.IonRange,

angular/src/directives/proxies.ts

@@ -558,6 +558,17 @@ export class IonNote {
   }
 }
 
+export declare interface IonProgressBar extends StencilComponents<'IonProgressBar'> {}
+@Component({ selector: 'ion-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'type', 'reversed', 'value', 'buffer', 'color'] })
+export class IonProgressBar {
+
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
+    const el = r.nativeElement;
+    proxyInputs(this, el, ['mode', 'type', 'reversed', 'value', 'buffer', 'color']);
+  }
+}
+
 export declare interface IonRadio extends StencilComponents<'IonRadio'> {}
 @Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'name', 'disabled', 'checked', 'value'] })
 export class IonRadio {

angular/src/ionic-module.ts

@@ -56,6 +56,7 @@ const DECLARATIONS = [
   d.IonNavPush,
   d.IonNavSetRoot,
   d.IonNote,
+  d.IonProgressBar,
   d.IonRadio,
   d.IonRadioGroup,
   d.IonRange,

core/api.txt

@@ -742,6 +742,17 @@ ion-popover,event,ionPopoverDidUnload,void,true
 ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail,true
 ion-popover,event,ionPopoverWillPresent,void,true
 
+ion-progress-bar
+ion-progress-bar,prop,buffer,number,1,false
+ion-progress-bar,prop,color,string | undefined,undefined,false
+ion-progress-bar,prop,mode,"ios" | "md",undefined,false
+ion-progress-bar,prop,reversed,boolean,false,false
+ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false
+ion-progress-bar,prop,value,number,0,false
+ion-progress-bar,css-prop,--background
+ion-progress-bar,css-prop,--buffer-background
+ion-progress-bar,css-prop,--progress-background
+
 ion-radio-group
 ion-radio-group,prop,allowEmptySelection,boolean,false,false
 ion-radio-group,prop,name,string,this.inputId,false

core/src/components.d.ts

@@ -3181,6 +3181,59 @@ export namespace Components {
     'translucent'?: boolean;
   }
 
+  interface IonProgressBar {
+    /**
+    * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
+    */
+    'buffer': number;
+    /**
+    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+    */
+    'color'?: Color;
+    /**
+    * The mode determines which platform styles to use.
+    */
+    'mode': Mode;
+    /**
+    * If true, reverse the progress bar direction.
+    */
+    'reversed': boolean;
+    /**
+    * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+    */
+    'type': 'determinate' | 'indeterminate';
+    /**
+    * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
+    */
+    'value': number;
+  }
+  interface IonProgressBarAttributes extends StencilHTMLAttributes {
+    /**
+    * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
+    */
+    'buffer'?: number;
+    /**
+    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+    */
+    'color'?: Color;
+    /**
+    * The mode determines which platform styles to use.
+    */
+    'mode'?: Mode;
+    /**
+    * If true, reverse the progress bar direction.
+    */
+    'reversed'?: boolean;
+    /**
+    * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+    */
+    'type'?: 'determinate' | 'indeterminate';
+    /**
+    * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
+    */
+    'value'?: number;
+  }
+
   interface IonRadioGroup {
     /**
     * If `true`, the radios can be deselected.
@@ -5165,6 +5218,7 @@ declare global {
     'IonPicker': Components.IonPicker;
     'IonPopoverController': Components.IonPopoverController;
     'IonPopover': Components.IonPopover;
+    'IonProgressBar': Components.IonProgressBar;
     'IonRadioGroup': Components.IonRadioGroup;
     'IonRadio': Components.IonRadio;
     'IonRange': Components.IonRange;
@@ -5265,6 +5319,7 @@ declare global {
     'ion-picker': Components.IonPickerAttributes;
     'ion-popover-controller': Components.IonPopoverControllerAttributes;
     'ion-popover': Components.IonPopoverAttributes;
+    'ion-progress-bar': Components.IonProgressBarAttributes;
     'ion-radio-group': Components.IonRadioGroupAttributes;
     'ion-radio': Components.IonRadioAttributes;
     'ion-range': Components.IonRangeAttributes;
@@ -5665,6 +5720,12 @@ declare global {
     new (): HTMLIonPopoverElement;
   };
 
+  interface HTMLIonProgressBarElement extends Components.IonProgressBar, HTMLStencilElement {}
+  var HTMLIonProgressBarElement: {
+    prototype: HTMLIonProgressBarElement;
+    new (): HTMLIonProgressBarElement;
+  };
+
   interface HTMLIonRadioGroupElement extends Components.IonRadioGroup, HTMLStencilElement {}
   var HTMLIonRadioGroupElement: {
     prototype: HTMLIonRadioGroupElement;
@@ -5948,6 +6009,7 @@ declare global {
     'ion-picker': HTMLIonPickerElement
     'ion-popover-controller': HTMLIonPopoverControllerElement
     'ion-popover': HTMLIonPopoverElement
+    'ion-progress-bar': HTMLIonProgressBarElement
     'ion-radio-group': HTMLIonRadioGroupElement
     'ion-radio': HTMLIonRadioElement
     'ion-range': HTMLIonRangeElement
@@ -6048,6 +6110,7 @@ declare global {
     'ion-picker': HTMLIonPickerElement;
     'ion-popover-controller': HTMLIonPopoverControllerElement;
     'ion-popover': HTMLIonPopoverElement;
+    'ion-progress-bar': HTMLIonProgressBarElement;
     'ion-radio-group': HTMLIonRadioGroupElement;
     'ion-radio': HTMLIonRadioElement;
     'ion-range': HTMLIonRangeElement;