feat(datepicker): adiciona modos de seleção monthYear e year

Adiciona suporte a novos modos no po-datepicker:
- Seleção de mês e ano (monthYear)
- Seleção apenas de ano (year)

Fixes: DTHFUI-12615

Author: arthur-polidorio

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

@@ -243,6 +243,22 @@ export class PoCalendarBaseComponent {
     return this.mode === PoCalendarMode.Range;
   }
 
+  get isMonthYear() {
+    return this.mode === PoCalendarMode.MonthYear;
+  }
+
+  get isYear() {
+    return this.mode === PoCalendarMode.Year;
+  }
+
+  //  Propriedade interna utilizada pelo po-datepicker.
+  //  Define o limite de anos exibidos nas variações `month-year` e `year`,
+  //  considerando a data atual como referência.
+  //
+  //  O valor informado determina o intervalo de anos anterior e posterior
+  //  à data corrente que será disponibilizado para seleção.
+  @Input('p-year-range-limit') yearRangeLimit?: number = 150;
+
   // Propriedade que permite integrar o po-combo no componente de calendar. Implementa o template de header com `PoCombo`.
   @Input('p-header-template') headerTemplate?: TemplateRef<any>;
 

projects/ui/src/lib/components/po-calendar/po-calendar-mode.enum.ts

@@ -7,5 +7,11 @@
  */
 export enum PoCalendarMode {
   /** Modo de seleção de intervalo (data inicial e final). */
-  Range = 'range'
+  Range = 'range',
+
+  // Modo de seleção de mês e ano.
+  MonthYear = 'month-year',
+
+  // Modo de seleção de ano.
+  Year = 'year'
 }

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

@@ -1,4 +1,13 @@
-@if (isRange) {
+@if (isMonthYear) {
+  <div class="po-calendar po-calendar-month-year">
+    <ng-container *ngTemplateOutlet="calendarMonth"></ng-container>
+    <ng-container *ngTemplateOutlet="calendarYear"></ng-container>
+  </div>
+} @else if (isYear) {
+  <div class="po-calendar po-calendar-year">
+    <ng-container *ngTemplateOutlet="calendarYear"></ng-container>
+  </div>
+} @else if (isRange) {
   <div
     class="po-calendar"
     [class.po-calendar-with-presets]="effectivePresets().length > 0"
@@ -66,3 +75,48 @@
   >
   </po-calendar-wrapper>
 </ng-template>
+
+<ng-template #calendarMonth>
+  <ul class="po-calendar-months">
+    @for (month of displayMonths; track month; let i = $index) {
+      <li class="po-calendar-month-item">
+        <po-button
+          #monthOption
+          [class.po-button-selected]="i === selectedIndexMonth"
+          role="option"
+          p-kind="tertiary"
+          p-label="{{ month }}"
+          [attr.aria-selected]="i === selectedIndexMonth"
+          [p-tabindex]="i === focusedIndex ? 0 : -1"
+          [p-size]="size"
+          [p-disabled]="isMonthDisabled(i)"
+          (p-click)="selectMonth(i, $event, true)"
+          (keydown)="onKeydownMonth($event, i)"
+        ></po-button>
+      </li>
+    }
+  </ul>
+</ng-template>
+
+<ng-template #calendarYear>
+  <ul class="po-calendar-years">
+    @for (year of displayYears; track year; let i = $index) {
+      <li class="po-calendar-year-item">
+        <po-button
+          #yearOption
+          [class.po-button-selected]="i === selectedIndexYear"
+          role="option"
+          p-kind="tertiary"
+          p-label="{{ year }}"
+          [attr.aria-selected]="i === selectedIndexYear"
+          [p-tabindex]="i === focusedIndex ? 0 : -1"
+          [p-size]="size"
+          [p-disabled]="isYearDisabled(year)"
+          (p-click)="selectYear(i, $event, true, year)"
+          (keydown)="onKeydownYear($event, i)"
+        >
+        </po-button>
+      </li>
+    }
+  </ul>
+</ng-template>