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

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"

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;
 

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>

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'
+    },
+    {
+      property: 'disabledClick',
+      label: 'Disabled click',
+      type: 'boolean'
     }
   ];