feat: add disabled prop to datepicker ✨ (#1363)

* feat: add disabled prop to datepicker ✨

* fix: broken test 🔨

(cherry picked from commit 6d90a21)

Author: iurynogueira

projects/ion-test-app/src/app/app.component.ts

@@ -1188,6 +1188,13 @@ export class AppComponent implements OnInit {
       disabled: true,
       multiple: true,
     },
+    {
+      key: 'data_abertura',
+      className: 'col-6',
+      type: 'datepicker',
+      label: 'Data de Abertura',
+      disabled: true,
+    },
     {
       key: 'bio',
       className: 'col-12',

projects/ion/src/lib/core/bn-form/bn-form.component.ts

@@ -95,6 +95,7 @@ import { BnMaskDirective } from '../../mask/mask.directive';
                 [rangePicker]="field.rangePicker ?? false"
                 [direction]="field.direction"
                 [disabledDate]="field.disabledDate"
+                [disabled]="isDisabled(field)"
                 [predefinedRanges]="field.predefinedRanges ?? []"
                 [value]="formGroup().get(field.key)?.value"
                 (event)="onValueChange(field.key, $event)"

projects/ion/src/lib/picker/date-picker/date-picker-input/date-picker-input.component.html

@@ -4,13 +4,15 @@
   data-testid="container-input"
 >
   <ion-input
+    data-testid="date-picker-input-element"
     [value]="date() || ''"
     [placeholder]="placeholder()"
     [iconInput]="date() ? '' : 'calendar'"
     iconDirection="right"
     [inputButton]="!!date()"
     [inputButtonConfig]="clearButtonConfig"
     [readonly]="true"
+    [disabled]="disabled()"
     (clickButton)="clearDateValue()"
   ></ion-input>
 </div>

projects/ion/src/lib/picker/date-picker/date-picker-input/date-picker-input.component.spec.ts

@@ -33,4 +33,30 @@ describe('IonDatePickerInputComponent', () => {
 
     expect(clearSpy).toHaveBeenCalled();
   });
+
+  it('should be disabled when disabled input is true', () => {
+    const fixture = TestBed.createComponent(IonDatePickerInputComponent);
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+
+    const inputElement = screen.getByTestId('input-div');
+    expect(inputElement).toHaveClass('disabled');
+  });
+
+  it('should not emit clearDate when disabled', () => {
+    const fixture = TestBed.createComponent(IonDatePickerInputComponent);
+    fixture.componentRef.setInput('date', '2023-01-28');
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+
+    const clearSpy = jest.fn();
+    fixture.componentRef.instance.clearDate.subscribe(clearSpy);
+
+    const clearButton = screen.queryByTestId('input-button');
+    if (clearButton) {
+      fireEvent.click(within(clearButton).getByRole('button'));
+    }
+
+    expect(clearSpy).not.toHaveBeenCalled();
+  });
 });

projects/ion/src/lib/picker/date-picker/date-picker-input/date-picker-input.component.ts

@@ -26,6 +26,7 @@ export class IonDatePickerInputComponent {
   rangePicker = input<boolean>(false);
   placeholder = input<string>('Selecione a data');
   clearDate = output<void>();
+  disabled = input<boolean>(false);
 
   public clearButtonConfig: IonButtonProps = {
     iconType: 'close-solid',
@@ -34,6 +35,7 @@ export class IonDatePickerInputComponent {
   };
 
   clearDateValue(): void {
+    if(this.disabled()) return;
     this.clearDate.emit();
   }
 }

projects/ion/src/lib/picker/date-picker/date-picker.component.html

@@ -3,6 +3,7 @@
   #trigger="cdkOverlayOrigin"
   [date]="inputDate()"
   [rangePicker]="rangePicker()"
+  [disabled]="disabled()"
   (click)="setVisibleCalendar(!showDatepicker())"
   (clearDate)="clearDate()"
 ></date-picker-input>

projects/ion/src/lib/picker/date-picker/date-picker.component.spec.ts

@@ -64,4 +64,31 @@ describe('IonDatepickerComponent with CDK Overlay', () => {
       overlayContainerElement.querySelector('.container-calendar'),
     ).toBeFalsy();
   });
+
+  it('should not open overlay when disabled and clicked', () => {
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+
+    const inputDebug = fixture.debugElement.query(By.css('date-picker-input'));
+    inputDebug.triggerEventHandler('click', null);
+    fixture.detectChanges();
+
+    const calendarContainer = overlayContainerElement.querySelector(
+      '.container-calendar',
+    );
+    expect(calendarContainer).toBeFalsy();
+  });
+
+  it('should not open overlay via setVisibleCalendar when disabled', () => {
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+
+    component.setVisibleCalendar(true);
+    fixture.detectChanges();
+
+    const calendarContainer = overlayContainerElement.querySelector(
+      '.container-calendar',
+    );
+    expect(calendarContainer).toBeFalsy();
+  });
 });

projects/ion/src/lib/picker/date-picker/date-picker.component.ts

@@ -73,6 +73,7 @@ export class IonDatepickerComponent {
   >(undefined);
   goToMonth = signal<string | undefined>(undefined);
   goToYear = signal<string | undefined>(undefined);
+  disabled = input<boolean>(false);
 
   overlayPositions = computed<ConnectedPosition[]>(() => {
     const direction = String(
@@ -160,6 +161,9 @@ export class IonDatepickerComponent {
   }
 
   setVisibleCalendar(visible: boolean): void {
+    if (this.disabled()) {
+      return;
+    }
     this.showDatepicker.set(visible);
   }