feat(stepper): cria a propriedade p-disable-click

Cria propriedade `p-disable-click` para desabilitar o clique no step

DTHFUI-9924

projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts

@@ -284,6 +284,17 @@ export class PoStepperBaseComponent {
    */
   @Input('p-step-icon-active') iconActive?: string | TemplateRef<void>;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Desabilita a possibilidade de ir para outra etapa clicando diretamente no step.
+   *
+   * @default `false`
+   */
+  @Input('p-disable-click') disabledClick: boolean = false;
+
   private initializeSteps(): void {
     const hasStatus = this._steps.some(step => step.status !== PoStepperStatus.Default);
 

projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.spec.ts

@@ -194,6 +194,15 @@ describe('PoStepperStepComponent:', () => {
       expect(component.click.emit).not.toHaveBeenCalled();
     });
 
+    it('onClick: shouldn´t call `click.emit` if `disabledClick` is `true`.', () => {
+      component.status = PoStepperStatus.Active;
+      component.disabledClick = true;
+      spyOn(component.click, 'emit');
+      component.onClick();
+
+      expect(component.click.emit).not.toHaveBeenCalled();
+    });
+
     it('onEnter: should call `click.emit` if `status` is different of `disabled`.', () => {
       component.status = PoStepperStatus.Active;
 
@@ -212,6 +221,15 @@ describe('PoStepperStepComponent:', () => {
       expect(component.enter.emit).not.toHaveBeenCalled();
     });
 
+    it('onEnter: shouldn´t call `click.emit` if `disabledClick` is `true`.', () => {
+      component.status = PoStepperStatus.Active;
+      component.disabledClick = true;
+      spyOn(component.enter, 'emit');
+      component.onEnter();
+
+      expect(component.enter.emit).not.toHaveBeenCalled();
+    });
+
     it('setDefaultStepSize: should increase step size by 8px if status is `Active` and step size is default.', () => {
       (component as any)._stepSize = 24;
       component.status = PoStepperStatus.Active;

projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.ts

@@ -114,6 +114,8 @@ export class PoStepperStepComponent implements OnChanges {
   // Evento que será emitido ao focar no *step* e pressionar a tecla *enter*.
   @Output('p-enter') enter = new EventEmitter<any>();
 
+  @Input('p-disable-click') disabledClick: boolean = false;
+
   readonly literals = {
     ...poStepLiteralsDefault[poLocaleDefault],
     ...poStepLiteralsDefault[getShortBrowserLanguage()]
@@ -169,13 +171,13 @@ export class PoStepperStepComponent implements OnChanges {
   }
 
   onClick(): void {
-    if (this.status !== PoStepperStatus.Disabled) {
+    if (this.status !== PoStepperStatus.Disabled && !this.disabledClick) {
       this.click.emit();
     }
   }
 
   onEnter(): void {
-    if (this.status !== PoStepperStatus.Disabled) {
+    if (this.status !== PoStepperStatus.Disabled && !this.disabledClick) {
       this.enter.emit();
     }
   }

projects/ui/src/lib/components/po-stepper/po-stepper.component.html

@@ -27,6 +27,7 @@
           [p-step-icon-active]="iconActive"
           [p-step-icon-done]="iconDone"
           [p-vertical-orientation]="isVerticalOrientation"
+          [p-disable-click]="disabledClick"
           (p-activated)="onStepActive(step)"
           (p-click)="changeStep(index, step)"
           (p-enter)="changeStep(index, step)"

projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.html

@@ -6,6 +6,7 @@
     [p-step-size]="properties.stepSize"
     [p-step-icon-active]="properties.iconActive"
     [p-step-icon-done]="properties.iconDone"
+    [p-disable-click]="properties.disabledClick"
     (p-change-step)="changeStep('change')"
   >
     <po-step *ngFor="let step of steps" [p-label]="step.label" [p-icon-default]="step.iconDefault">

projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.ts

@@ -53,6 +53,11 @@ export class SamplePoStepperLabsComponent implements OnInit {
       help: 'Ex.: ph ph-check-fat',
       gridLgColumns: 4,
       property: 'iconDone'
+    },
+    {
+      label: 'Disabled click',
+      property: 'disabledClick',
+      type: 'boolean'
     }
   ];