From 7a9b770ffbe6f7b7f1baa4e7774baf87cbec3275 Mon Sep 17 00:00:00 2001
From: jcorrea97 <jroberto.cr1@gmail.com>
Date: Fri, 22 Nov 2024 13:57:03 -0300
Subject: [PATCH] feat(step): cria a propriedade p-disable-click

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

DTHFUI-9924
---
 .../po-stepper/po-stepper-base.component.ts    | 11 +++++++++++
 .../po-stepper-label.component.html            |  3 ++-
 .../po-stepper-label.component.ts              |  2 ++
 .../po-stepper-step.component.html             |  4 +++-
 .../po-stepper-step.component.spec.ts          | 18 ++++++++++++++++++
 .../po-stepper-step.component.ts               |  6 ++++--
 .../po-stepper/po-stepper.component.html       |  1 +
 .../sample-po-stepper-labs.component.html      |  1 +
 .../sample-po-stepper-labs.component.ts        |  5 +++++
 9 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts b/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts
index 648c7208bb..2ee93a062f 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts
+++ b/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 o clique no step.
+   *
+   * @default `false`
+   */
+  @Input('p-disable-click') disabledClick: boolean = false;
+
   private initializeSteps(): void {
     const hasStatus = this._steps.some(step => step.status !== PoStepperStatus.Default);
 
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.html b/projects/ui/src/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.html
index 23f9533d79..48f23a81ac 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.html
+++ b/projects/ui/src/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.html
@@ -1,7 +1,8 @@
 <div
   #labelElement
   class="po-stepper-label"
-  [class.po-link]="status !== 'disabled'"
+  [class.po-link]="status !== 'disabled' && !this.disabledClick"
+  [class.po-stepper-disabled-click]="this.disabledClick"
   [class.po-stepper-label-active]="status === 'active' || status === 'error'"
   [class.po-stepper-label-done]="status === 'done'"
   [class.po-stepper-label-vertical]="isVerticalOrientation"
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.ts b/projects/ui/src/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.ts
index e70288ff72..19f5c5071d 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.ts
+++ b/projects/ui/src/lib/components/po-stepper/po-stepper-label/po-stepper-label.component.ts
@@ -37,6 +37,8 @@ export class PoStepperLabelComponent implements AfterViewInit, OnChanges {
 
   @ViewChild('labelElement') labelElement: ElementRef;
 
+  @Input('p-disable-click') disabledClick: boolean = false;
+
   displayedContent: string;
   tooltipContent: string;
 
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.html b/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.html
index 8bcb822a11..7acd7107d4 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.html
+++ b/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.html
@@ -2,10 +2,11 @@
   class="po-stepper-step"
   [ngClass]="getStatusClass(status)"
   role="tab"
-  [tabindex]="status === 'disabled' ? -1 : 0"
+  [tabindex]="status === 'disabled' || disabledClick ? -1 : 0"
   [attr.aria-selected]="status === 'active'"
   [attr.aria-disabled]="status === 'disabled'"
   [attr.aria-required]="status === 'error'"
+  [class.po-stepper-disabled-click]="disabledClick"
   (click)="onClick()"
   (keydown.enter)="onEnter()"
 >
@@ -35,6 +36,7 @@
       [p-status]="status"
       [p-vertical-orientation]="isVerticalOrientation"
       [attr.aria-label]="label"
+      [p-disable-click]="disabledClick"
     >
     </po-stepper-label>
   </div>
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.spec.ts b/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.spec.ts
index e60701c8de..74091f4556 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.spec.ts
+++ b/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;
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.ts b/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.ts
index 316b1c2146..f850e87955 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper-step/po-stepper-step.component.ts
+++ b/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();
     }
   }
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper.component.html b/projects/ui/src/lib/components/po-stepper/po-stepper.component.html
index 8297f971fa..4b7c84f327 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper.component.html
+++ b/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)"
diff --git a/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.html b/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.html
index c967f3a90d..c62ae35e9a 100644
--- a/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.html
+++ b/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">
diff --git a/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.ts b/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.ts
index 448baf6081..647c5741c4 100644
--- a/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.ts
+++ b/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'
+    },
+    {
+      property: 'disabledClick',
+      label: 'Disabled click',
+      type: 'boolean'
     }
   ];