feat(step): 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-step/po-step.component.ts

@@ -129,6 +129,17 @@ export class PoStepComponent implements AfterContentInit {
    */
   @Input('p-icon-default') iconDefault?: string | TemplateRef<void>;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Desabilita o clique no step.
+   *
+   * @default `false`
+   */
+  @Input('p-disable-click') disabledClick: boolean = false;
+
   constructor(private elementRef: ElementRef) {}
 
   ngAfterContentInit() {

projects/ui/src/lib/components/po-stepper/po-stepper-item.interface.ts

@@ -23,4 +23,7 @@ export interface PoStepperItem {
 
   /** Define o estado de exibição do *step*. */
   status?: PoStepperStatus;
+
+  /** Desabilita o clique no step.*/
+  disabledClick?: boolean;
 }

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]="step.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

@@ -8,7 +8,12 @@
     [p-step-icon-done]="properties.iconDone"
     (p-change-step)="changeStep('change')"
   >
-    <po-step *ngFor="let step of steps" [p-label]="step.label" [p-icon-default]="step.iconDefault">
+    <po-step
+      *ngFor="let step of steps"
+      [p-label]="step.label"
+      [p-icon-default]="step.iconDefault"
+      [p-disable-click]="step.disabledClick"
+    >
       <h2>Step Content {{ step.label }}</h2>
     </po-step>
   </po-stepper>

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

@@ -70,6 +70,11 @@ export class SamplePoStepperLabsComponent implements OnInit {
       help: 'Ex.: ph ph-question',
       gridMdColumns: 6,
       gridXlColumns: 6
+    },
+    {
+      property: 'disabledClick',
+      label: 'Disabled click',
+      type: 'boolean'
     }
   ];