@gipisistemas/ngx-core 1.0.12 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components/date-picker/date-picker-calendar.scss +78 -60
  2. package/components/select/select.scss +20 -45
  3. package/fesm2022/gipisistemas-ngx-core.mjs +544 -350
  4. package/fesm2022/gipisistemas-ngx-core.mjs.map +1 -1
  5. package/index.d.ts +7 -5
  6. package/package.json +1 -1
package/fesm2022/gipisistemas-ngx-core.mjs CHANGED
@@ -4556,11 +4556,10 @@ class PageAdjustService {
4556
4556
  (page.totalPages > 0 && page.number < 0));
4557
4557
  }
4558
4558
  /** Corrige a página e busca os dados novamente */
4559
- _correctPage(correctPage, pageSize, currentFilter, config) {
4559
+ _correctPage(correctPage, currentFilter, config) {
4560
4560
  return new Observable((subscriber) => {
4561
4561
  const correctedFilter = { ...currentFilter };
4562
4562
  correctedFilter.pageNumber = correctPage;
4563
- correctedFilter.offset = correctPage * pageSize;
4564
4563
  config.updateFilter(correctedFilter);
4565
4564
  // Busca novamente com a página corrigida
4566
4565
  config.fetchData(correctedFilter).subscribe({
@@ -4599,7 +4598,7 @@ class PageAdjustService {
4599
4598
  if (this._shouldCorrectPage(page, filter)) {
4600
4599
  // Se precisa de correção, executa a correção
4601
4600
  const lastPage = Math.max(page.totalPages - 1, 0);
4602
- this._correctPage(lastPage, filter.pageSize, filter, config).subscribe({
4601
+ this._correctPage(lastPage, filter, config).subscribe({
4603
4602
  next: () => subscriber.next(true), // Correção executada
4604
4603
  error: (error) => subscriber.error(error),
4605
4604
  });
@@ -4629,7 +4628,6 @@ class PageAdjustService {
4629
4628
  const pageSize = pageEvent.pageSize;
4630
4629
  filter.pageNumber = currentPage;
4631
4630
  filter.pageSize = pageSize;
4632
- filter.offset = currentPage * pageSize;
4633
4631
  if (pageEvent.sort) {
4634
4632
  filter.sorts = [
4635
4633
  new BaseSortModel(pageEvent.sort.field, StringUtil.isEmpty(pageEvent.sort.direction)
@@ -4640,7 +4638,6 @@ class PageAdjustService {
4640
4638
  }
4641
4639
  else {
4642
4640
  filter.pageNumber = filter.pageNumber ?? 0;
4643
- filter.offset = filter.offset ?? 0;
4644
4641
  filter.pageSize = filter.pageSize ?? 10;
4645
4642
  }
4646
4643
  return filter;
@@ -5729,7 +5726,6 @@ class BaseReportComponent extends BaseComponent {
5729
5726
  const pageSize = pageEvent.pageSize;
5730
5727
  filter.pageNumber = currentPage;
5731
5728
  filter.pageSize = pageSize;
5732
- filter.offset = currentPage * pageSize;
5733
5729
  if (pageEvent.sort) {
5734
5730
  filter.sorts = [
5735
5731
  new BaseSortModel(pageEvent.sort.field, StringUtil.isEmpty(pageEvent.sort.direction)
@@ -5740,7 +5736,6 @@ class BaseReportComponent extends BaseComponent {
5740
5736
  }
5741
5737
  else {
5742
5738
  filter.pageNumber = filter.pageNumber ?? 0;
5743
- filter.offset = filter.offset ?? 0;
5744
5739
  filter.pageSize = filter.pageSize ?? 10;
5745
5740
  }
5746
5741
  this.currentReportType.filter.update((prev) => ({ ...prev, ...filter }));
@@ -5753,7 +5748,7 @@ class BaseReportComponent extends BaseComponent {
5753
5748
  if (this._shouldCorrectPage(page, filter)) {
5754
5749
  // Se a página não existe mais, busca a última página disponível
5755
5750
  const lastPage = Math.max(page.totalPages - 1, 0);
5756
- this._handlePageCorrection(lastPage, pageEvent?.pageSize || filter.pageSize);
5751
+ this._handlePageCorrection(lastPage);
5757
5752
  return;
5758
5753
  }
5759
5754
  this.currentReportType.page.set(page);
@@ -5781,10 +5776,9 @@ class BaseReportComponent extends BaseComponent {
5781
5776
  (page.totalPages > 0 && page.number < 0));
5782
5777
  }
5783
5778
  /** Método para corrigir a página */
5784
- _handlePageCorrection(correctPage, pageSize) {
5779
+ _handlePageCorrection(correctPage) {
5785
5780
  const correctedFilter = { ...this.currentReportType.filter() };
5786
5781
  correctedFilter.pageNumber = correctPage;
5787
- correctedFilter.offset = correctPage * pageSize;
5788
5782
  this.currentReportType.filter.set(correctedFilter);
5789
5783
  // Busca novamente com a página corrigida
5790
5784
  this.currentReportType
@@ -5867,7 +5861,6 @@ class BaseFilterModel {
5867
5861
  this.sorts = init.sorts || [];
5868
5862
  this.pageNumber = init.pageNumber || 0;
5869
5863
  this.pageSize = init.pageSize || 10;
5870
- this.offset = init.offset || 0;
5871
5864
  this.originScreen = init.originScreen || '';
5872
5865
  this.researchField = init.researchField || '';
5873
5866
  }
@@ -10419,6 +10412,7 @@ const DEFAULT_PRESET_DATE_OPTIONS = [
10419
10412
  getValue: () => ({ start: null, end: null }),
10420
10413
  },
10421
10414
  ];
10415
+ const YEARS_DISPLAYED = 24;
10422
10416
  class DatePickerCalendar {
10423
10417
  constructor() {
10424
10418
  this._rangeSelectionState = signal('start', ...(ngDevMode ? [{ debugName: "_rangeSelectionState" }] : []));
@@ -10427,8 +10421,9 @@ class DatePickerCalendar {
10427
10421
  this.currentMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
10428
10422
  this.currentYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
10429
10423
  this.showMonthYearPicker = signal(false, ...(ngDevMode ? [{ debugName: "showMonthYearPicker" }] : []));
10424
+ this.monthYearPickerView = signal('year', ...(ngDevMode ? [{ debugName: "monthYearPickerView" }] : []));
10430
10425
  this.showYearPicker = signal(false, ...(ngDevMode ? [{ debugName: "showYearPicker" }] : []));
10431
- this.yearRangeStart = signal(Math.floor(new Date().getFullYear() / 12) * 12, ...(ngDevMode ? [{ debugName: "yearRangeStart" }] : []));
10426
+ this.yearRangeStart = signal(Math.floor(new Date().getFullYear() / YEARS_DISPLAYED) * YEARS_DISPLAYED, ...(ngDevMode ? [{ debugName: "yearRangeStart" }] : []));
10432
10427
  this.hoverDate = signal(null, ...(ngDevMode ? [{ debugName: "hoverDate" }] : []));
10433
10428
  this.selectedPresetLabel = signal(null, ...(ngDevMode ? [{ debugName: "selectedPresetLabel" }] : []));
10434
10429
  // Estado de tempo para o modo dateTime
@@ -10440,6 +10435,7 @@ class DatePickerCalendar {
10440
10435
  this.currentYearNow = new Date().getFullYear();
10441
10436
  this.currentMonthNow = new Date().getMonth();
10442
10437
  this.months = DateUtil.CALENDAR_MONTHS;
10438
+ this.yearsDisplayed = YEARS_DISPLAYED;
10443
10439
  // Predefinições padrão para o modo range
10444
10440
  this.defaultPresets = computed(() => {
10445
10441
  const customPresets = this.presets();
@@ -10461,10 +10457,10 @@ class DatePickerCalendar {
10461
10457
  this.monthAbbreviation = computed(() => {
10462
10458
  return this.months[this.currentMonth()].short + '.';
10463
10459
  }, ...(ngDevMode ? [{ debugName: "monthAbbreviation" }] : []));
10464
- // Anos a serem exibidos no seletor de anos (Exibe grid com 12 opções)
10460
+ // Anos a serem exibidos no seletor de anos (Exibe grid com 24 opções)
10465
10461
  this.yearsToDisplay = computed(() => {
10466
10462
  const start = this.yearRangeStart();
10467
- return Array.from({ length: 12 }, (_, i) => start + i);
10463
+ return Array.from({ length: YEARS_DISPLAYED }, (_, i) => start + i);
10468
10464
  }, ...(ngDevMode ? [{ debugName: "yearsToDisplay" }] : []));
10469
10465
  // Verifica se deve mostrar o calendário com base no modo
10470
10466
  this.showCalendar = computed(() => {
@@ -10596,7 +10592,7 @@ class DatePickerCalendar {
10596
10592
  this.currentYear.set(targetDate.getFullYear());
10597
10593
  // Atualiza o yearRangeStart para o modo year/yearRange
10598
10594
  if (mode === 'year' || mode === 'yearRange') {
10599
- this.yearRangeStart.set(Math.floor(targetDate.getFullYear() / 12) * 12);
10595
+ this.yearRangeStart.set(Math.floor(targetDate.getFullYear() / YEARS_DISPLAYED) * YEARS_DISPLAYED);
10600
10596
  }
10601
10597
  }
10602
10598
  });
@@ -10665,7 +10661,12 @@ class DatePickerCalendar {
10665
10661
  };
10666
10662
  }
10667
10663
  toggleMonthYearPicker() {
10668
- this.showMonthYearPicker.update((v) => !v);
10664
+ const isOpening = !this.showMonthYearPicker();
10665
+ this.showMonthYearPicker.set(isOpening);
10666
+ if (isOpening) {
10667
+ this.monthYearPickerView.set('year');
10668
+ this.yearRangeStart.set(Math.floor(this.currentYear() / YEARS_DISPLAYED) * YEARS_DISPLAYED);
10669
+ }
10669
10670
  }
10670
10671
  previousMonth() {
10671
10672
  if (this.currentMonth() === 0) {
@@ -10689,6 +10690,20 @@ class DatePickerCalendar {
10689
10690
  this.currentMonth.set(month);
10690
10691
  this.showMonthYearPicker.set(false);
10691
10692
  }
10693
+ selectMonthPickerYear(year) {
10694
+ if (this.isYearDisabled(year)) {
10695
+ return;
10696
+ }
10697
+ this.currentYear.set(year);
10698
+ this.monthYearPickerView.set('month');
10699
+ }
10700
+ showYearPickerView() {
10701
+ this.monthYearPickerView.set('year');
10702
+ this.yearRangeStart.set(Math.floor(this.currentYear() / YEARS_DISPLAYED) * YEARS_DISPLAYED);
10703
+ }
10704
+ isMonthPickerYearSelected(year) {
10705
+ return year === this.currentYear();
10706
+ }
10692
10707
  decrementYear() {
10693
10708
  this.currentYear.update((y) => y - 1);
10694
10709
  }
@@ -10697,10 +10712,10 @@ class DatePickerCalendar {
10697
10712
  }
10698
10713
  // Year picker methods
10699
10714
  previousYearRange() {
10700
- this.yearRangeStart.update((y) => y - 12);
10715
+ this.yearRangeStart.update((y) => y - YEARS_DISPLAYED);
10701
10716
  }
10702
10717
  nextYearRange() {
10703
- this.yearRangeStart.update((y) => y + 12);
10718
+ this.yearRangeStart.update((y) => y + YEARS_DISPLAYED);
10704
10719
  }
10705
10720
  selectYear(year) {
10706
10721
  if (this.isYearDisabled(year)) {
@@ -11219,7 +11234,7 @@ class DatePickerCalendar {
11219
11234
  break;
11220
11235
  case 'End':
11221
11236
  // Vá para o último ano no intervalo atual
11222
- newYear = this.yearRangeStart() + 11;
11237
+ newYear = this.yearRangeStart() + (YEARS_DISPLAYED - 1);
11223
11238
  break;
11224
11239
  case 'PageUp':
11225
11240
  if (event.altKey) {
@@ -11227,8 +11242,8 @@ class DatePickerCalendar {
11227
11242
  newYear -= 240;
11228
11243
  }
11229
11244
  else {
11230
- // Vá para trás 12 anos (1 página)
11231
- newYear -= 12;
11245
+ // Vá para trás 24 anos (1 página)
11246
+ newYear -= YEARS_DISPLAYED;
11232
11247
  }
11233
11248
  break;
11234
11249
  case 'PageDown':
@@ -11237,8 +11252,8 @@ class DatePickerCalendar {
11237
11252
  newYear += 240;
11238
11253
  }
11239
11254
  else {
11240
- // Vá para frente 12 anos (1 página)
11241
- newYear += 12;
11255
+ // Vá para frente 24 anos (1 página)
11256
+ newYear += YEARS_DISPLAYED;
11242
11257
  }
11243
11258
  break;
11244
11259
  case 'Enter':
@@ -11258,8 +11273,8 @@ class DatePickerCalendar {
11258
11273
  this.focusedDate.set(newDate);
11259
11274
  // Atualizar intervalo de anos se o ano focado estiver fora do intervalo atual
11260
11275
  const rangeStart = this.yearRangeStart();
11261
- if (newYear < rangeStart || newYear >= rangeStart + 12) {
11262
- this.yearRangeStart.set(Math.floor(newYear / 12) * 12);
11276
+ if (newYear < rangeStart || newYear >= rangeStart + YEARS_DISPLAYED) {
11277
+ this.yearRangeStart.set(Math.floor(newYear / YEARS_DISPLAYED) * YEARS_DISPLAYED);
11263
11278
  }
11264
11279
  }
11265
11280
  }
@@ -11304,7 +11319,7 @@ class DatePickerCalendar {
11304
11319
  <!-- Year Picker Mode -->
11305
11320
  <div class="g-calendar-header">
11306
11321
  <span class="g-header-title">
11307
- {{ yearRangeStart() }} - {{ yearRangeStart() + 11 }}
11322
+ {{ yearRangeStart() }} - {{ yearRangeStart() + (yearsDisplayed - 1) }}
11308
11323
  </span>
11309
11324
  <div class="g-navigation-buttons">
11310
11325
  <button
@@ -11345,7 +11360,7 @@ class DatePickerCalendar {
11345
11360
  <!-- Year Range Picker Mode -->
11346
11361
  <div class="g-calendar-header">
11347
11362
  <span class="g-header-title">
11348
- {{ yearRangeStart() }} - {{ yearRangeStart() + 11 }}
11363
+ {{ yearRangeStart() }} - {{ yearRangeStart() + (yearsDisplayed - 1) }}
11349
11364
  </span>
11350
11365
  <div class="g-navigation-buttons">
11351
11366
  <button
@@ -11404,6 +11419,7 @@ class DatePickerCalendar {
11404
11419
  </button>
11405
11420
  </div>
11406
11421
  }
11422
+
11407
11423
  @case ('month') {
11408
11424
  <!-- Month Picker Mode -->
11409
11425
  <div class="g-calendar-header">
@@ -11508,14 +11524,13 @@ class DatePickerCalendar {
11508
11524
  </button>
11509
11525
  </div>
11510
11526
  }
11527
+
11528
+ <!-- DateTime Picker Mode -->
11511
11529
  @case ('dateTime') {
11512
- <!-- DateTime Picker Mode -->
11513
11530
  <!-- Header with navigation -->
11514
- <div class="g-date-header">
11531
+ <div class="g-calendar-header">
11515
11532
  <button
11516
- [attr.aria-label]="
11517
- 'Selecionar mês e ano, atualmente ' + currentMonthYear()
11518
- "
11533
+ aria-label="Selecionar mês e ano"
11519
11534
  type="button"
11520
11535
  class="g-month-year-toggle"
11521
11536
  (click)="toggleMonthYearPicker()"
@@ -11550,88 +11565,162 @@ class DatePickerCalendar {
11550
11565
  </div>
11551
11566
 
11552
11567
  <!-- Month/Year Picker -->
11553
- @if (showMonthYearPicker()) {
11568
+ <!-- @if (showMonthYearPicker()) {
11554
11569
  <div class="g-month-year-picker">
11555
- <div class="g-month-buttons">
11556
- @for (month of months; track month.value; let i = $index) {
11570
+ @if (monthYearPickerView() === 'year') {
11571
+ <div class="g-picker-header">
11572
+ <div class="g-picker-title-group">
11573
+ <span class="g-picker-title">
11574
+ {{ yearRangeStart() }} -
11575
+ {{ yearRangeStart() + (yearsDisplayed - 1) }}
11576
+ </span>
11577
+ <span class="material-symbols-rounded g-picker-title-icon">
11578
+ arrow_drop_up
11579
+ </span>
11580
+ </div>
11581
+ <div class="g-picker-nav-actions">
11582
+ <button
11583
+ aria-label="Anos anteriores"
11584
+ type="button"
11585
+ class="g-picker-nav"
11586
+ (click)="previousYearRange()"
11587
+ >
11588
+ <span class="material-symbols-rounded">
11589
+ chevron_left
11590
+ </span>
11591
+ </button>
11592
+ <button
11593
+ aria-label="Próximos anos"
11594
+ type="button"
11595
+ class="g-picker-nav"
11596
+ (click)="nextYearRange()"
11597
+ >
11598
+ <span class="material-symbols-rounded">
11599
+ chevron_right
11600
+ </span>
11601
+ </button>
11602
+ </div>
11603
+ </div>
11604
+ <div class="g-year-grid g-inline-year-grid">
11605
+ @for (year of yearsToDisplay(); track year) {
11606
+ <button
11607
+ type="button"
11608
+ class="g-year-button"
11609
+ [class.selected]="isMonthPickerYearSelected(year)"
11610
+ [class.current]="year === currentYearNow"
11611
+ [class.disabled]="isYearDisabled(year)"
11612
+ [disabled]="isYearDisabled(year)"
11613
+ (click)="selectMonthPickerYear(year)"
11614
+ >
11615
+ {{ year }}
11616
+ </button>
11617
+ }
11618
+ </div>
11619
+ } @else {
11620
+ <div class="g-picker-header">
11557
11621
  <button
11622
+ aria-label="Selecionar ano"
11558
11623
  type="button"
11559
- class="g-month-button"
11560
- [class.selected]="currentMonth() === i"
11561
- (click)="selectMonth(i)"
11624
+ class="g-picker-title-trigger"
11625
+ (click)="showYearPickerView()"
11562
11626
  >
11563
- {{ month.short }}
11627
+ <span class="g-picker-title">
11628
+ {{ currentYear() }}
11629
+ </span>
11630
+ <span class="material-symbols-rounded g-picker-title-icon">
11631
+ arrow_drop_up
11632
+ </span>
11564
11633
  </button>
11565
- }
11566
- </div>
11567
- <div class="g-year-picker">
11568
- <button
11569
- aria-label="Ano anterior"
11570
- type="button"
11571
- class="g-year-nav"
11572
- (click)="decrementYear()"
11573
- >
11574
- <span class="material-symbols-rounded">chevron_left</span>
11575
- </button>
11576
- <span class="g-year-display">
11634
+ <div class="g-picker-nav-actions">
11635
+ <button
11636
+ aria-label="Ano anterior"
11637
+ type="button"
11638
+ class="g-picker-nav"
11639
+ (click)="decrementYear()"
11640
+ >
11641
+ <span class="material-symbols-rounded">
11642
+ chevron_left
11643
+ </span>
11644
+ </button>
11645
+ <button
11646
+ aria-label="Próximo ano"
11647
+ type="button"
11648
+ class="g-picker-nav"
11649
+ (click)="incrementYear()"
11650
+ >
11651
+ <span class="material-symbols-rounded">
11652
+ chevron_right
11653
+ </span>
11654
+ </button>
11655
+ </div>
11656
+ </div>
11657
+ <div class="g-month-subtitle">
11577
11658
  {{ currentYear() }}
11578
- </span>
11659
+ </div>
11660
+ <div class="g-month-buttons">
11661
+ @for (month of months; track month.value; let i = $index) {
11662
+ <button
11663
+ type="button"
11664
+ class="g-month-button"
11665
+ [class.selected]="currentMonth() === i"
11666
+ [class.disabled]="isMonthDisabled(i)"
11667
+ [disabled]="isMonthDisabled(i)"
11668
+ (click)="selectMonth(i)"
11669
+ >
11670
+ {{ month.short }}
11671
+ </button>
11672
+ }
11673
+ </div>
11674
+ }
11675
+ </div>
11676
+ } -->
11677
+
11678
+ @if (!showMonthYearPicker()) {
11679
+ <!-- Month abbreviation -->
11680
+ <div class="g-month-abbreviation">
11681
+ {{ monthAbbreviation() }}
11682
+ </div>
11683
+
11684
+ <!-- Weekday headers -->
11685
+ <div class="g-weekdays">
11686
+ @for (day of weekDays; track $index) {
11687
+ <div class="g-weekday">
11688
+ {{ day }}
11689
+ </div>
11690
+ }
11691
+ </div>
11692
+
11693
+ <!-- Calendar grid -->
11694
+ <div
11695
+ role="grid"
11696
+ tabindex="0"
11697
+ class="g-calendar-grid"
11698
+ >
11699
+ @for (day of calendarDays(); track day.date.toISOString()) {
11579
11700
  <button
11580
- aria-label="Próximo ano"
11581
11701
  type="button"
11582
- class="g-year-nav"
11583
- (click)="incrementYear()"
11702
+ class="g-day-button"
11703
+ [class.other-month]="!day.isCurrentMonth"
11704
+ [class.current-month]="day.isCurrentMonth"
11705
+ [class.selected]="day.isSelected"
11706
+ [class.range-start]="day.isRangeStart"
11707
+ [class.range-end]="day.isRangeEnd"
11708
+ [class.in-range]="day.isInRange"
11709
+ [class.today]="day.isToday"
11710
+ [class.focused]="isFocusedDay(day.date)"
11711
+ [class.disabled]="day.isDisabled || !day.isCurrentMonth"
11712
+ [attr.aria-label]="getDateAriaLabel(day)"
11713
+ [attr.aria-selected]="day.isSelected"
11714
+ [attr.aria-disabled]="day.isDisabled || !day.isCurrentMonth"
11715
+ [disabled]="day.isDisabled || !day.isCurrentMonth"
11716
+ (click)="selectDateTimeDate(day.date)"
11584
11717
  >
11585
- <span class="material-symbols-rounded">chevron_right</span>
11718
+ {{ day.day }}
11586
11719
  </button>
11587
- </div>
11720
+ }
11588
11721
  </div>
11589
11722
  }
11590
11723
 
11591
- <!-- Month abbreviation -->
11592
- <div class="g-month-abbreviation">
11593
- {{ monthAbbreviation() }}
11594
- </div>
11595
-
11596
- <!-- Weekday headers -->
11597
- <div class="g-weekdays">
11598
- @for (day of weekDays; track $index) {
11599
- <div class="g-weekday">
11600
- {{ day }}
11601
- </div>
11602
- }
11603
- </div>
11604
-
11605
- <!-- Calendar grid -->
11606
- <div
11607
- role="grid"
11608
- tabindex="0"
11609
- class="g-calendar-grid"
11610
- >
11611
- @for (day of calendarDays(); track day.date.toISOString()) {
11612
- <button
11613
- type="button"
11614
- class="g-day-button"
11615
- [class.other-month]="!day.isCurrentMonth"
11616
- [class.current-month]="day.isCurrentMonth"
11617
- [class.selected]="day.isSelected"
11618
- [class.range-start]="day.isRangeStart"
11619
- [class.range-end]="day.isRangeEnd"
11620
- [class.in-range]="day.isInRange"
11621
- [class.today]="day.isToday"
11622
- [class.focused]="isFocusedDay(day.date)"
11623
- [class.disabled]="day.isDisabled || !day.isCurrentMonth"
11624
- [attr.aria-label]="getDateAriaLabel(day)"
11625
- [attr.aria-selected]="day.isSelected"
11626
- [attr.aria-disabled]="day.isDisabled || !day.isCurrentMonth"
11627
- [disabled]="day.isDisabled || !day.isCurrentMonth"
11628
- (click)="selectDateTimeDate(day.date)"
11629
- >
11630
- {{ day.day }}
11631
- </button>
11632
- }
11633
- </div>
11634
-
11635
11724
  <!-- Time Picker Section -->
11636
11725
  <div class="g-time-picker-section">
11637
11726
  <div class="g-time-label">
@@ -11666,16 +11755,15 @@ class DatePickerCalendar {
11666
11755
  </button>
11667
11756
  </div>
11668
11757
  }
11758
+
11759
+ <!-- Date / DateRange Picker Mode -->
11669
11760
  @default {
11670
- <!-- Date / DateRange Picker Mode -->
11671
11761
  <!-- Header with navigation -->
11672
- <div class="g-date-header">
11762
+ <div class="g-calendar-header">
11673
11763
  <button
11674
- [attr.aria-label]="
11675
- 'Selecionar mês e ano, atualmente ' + currentMonthYear()
11676
- "
11764
+ aria-label="Selecionar mês e ano"
11677
11765
  type="button"
11678
- class="month-year-toggle"
11766
+ class="g-month-year-toggle"
11679
11767
  (click)="toggleMonthYearPicker()"
11680
11768
  >
11681
11769
  {{ currentDateDisplay() }}
@@ -11692,7 +11780,11 @@ class DatePickerCalendar {
11692
11780
  aria-label="Mês anterior"
11693
11781
  type="button"
11694
11782
  class="g-nav-button"
11695
- (click)="previousMonth()"
11783
+ (click)="
11784
+ monthYearPickerView() === 'year'
11785
+ ? previousYearRange()
11786
+ : previousMonth()
11787
+ "
11696
11788
  >
11697
11789
  <span class="material-symbols-rounded">chevron_left</span>
11698
11790
  </button>
@@ -11700,7 +11792,9 @@ class DatePickerCalendar {
11700
11792
  aria-label="Próximo mês"
11701
11793
  type="button"
11702
11794
  class="g-nav-button"
11703
- (click)="nextMonth()"
11795
+ (click)="
11796
+ monthYearPickerView() === 'year' ? nextYearRange() : nextMonth()
11797
+ "
11704
11798
  >
11705
11799
  <span class="material-symbols-rounded">chevron_right</span>
11706
11800
  </button>
@@ -11708,90 +11802,89 @@ class DatePickerCalendar {
11708
11802
  </div>
11709
11803
 
11710
11804
  <!-- Month/Year Picker -->
11711
- @if (showMonthYearPicker()) {
11712
- <div class="g-month-year-picker">
11713
- <div class="g-month-buttons">
11714
- @for (month of months; track month.value; let i = $index) {
11715
- <button
11716
- type="button"
11717
- class="g-month-button"
11718
- [class.selected]="currentMonth() === i"
11719
- (click)="selectMonth(i)"
11720
- >
11721
- {{ month.short }}
11722
- </button>
11723
- }
11724
- </div>
11725
- <div class="g-year-picker">
11805
+ @if (showMonthYearPicker() && monthYearPickerView() === 'year') {
11806
+ <div class="g-year-grid">
11807
+ @for (year of yearsToDisplay(); track year) {
11726
11808
  <button
11727
- aria-label="Ano anterior"
11728
11809
  type="button"
11729
- class="g-year-nav"
11730
- (click)="decrementYear()"
11810
+ class="g-year-button"
11811
+ [class.selected]="isMonthPickerYearSelected(year)"
11812
+ [class.current]="year === currentYearNow"
11813
+ [class.disabled]="isYearDisabled(year)"
11814
+ [disabled]="isYearDisabled(year)"
11815
+ (click)="selectMonthPickerYear(year)"
11731
11816
  >
11732
- <span class="material-symbols-rounded">chevron_left</span>
11817
+ {{ year }}
11733
11818
  </button>
11734
- <span class="g-year-display">
11735
- {{ currentYear() }}
11736
- </span>
11819
+ }
11820
+ </div>
11821
+ } @else if (showMonthYearPicker() && monthYearPickerView() === 'month') {
11822
+ <div class="g-month-grid">
11823
+ @for (month of months; track month.value; let i = $index) {
11737
11824
  <button
11738
- aria-label="Próximo ano"
11739
11825
  type="button"
11740
- class="g-year-nav"
11741
- (click)="incrementYear()"
11826
+ class="g-month-button"
11827
+ [class.selected]="currentMonth() === i"
11828
+ [class.disabled]="isMonthDisabled(i)"
11829
+ [disabled]="isMonthDisabled(i)"
11830
+ (click)="selectMonth(i)"
11742
11831
  >
11743
- <span class="material-symbols-rounded">chevron_right</span>
11832
+ {{ month.short }}
11744
11833
  </button>
11745
- </div>
11834
+ }
11746
11835
  </div>
11747
11836
  }
11748
11837
 
11749
- <!-- Month abbreviation -->
11750
- <div class="g-month-abbreviation">
11751
- {{ monthAbbreviation() }}
11752
- </div>
11838
+ <!-- Days Picker -->
11839
+ @if (!showMonthYearPicker()) {
11840
+ <!-- Month abbreviation -->
11841
+ <div class="g-month-abbreviation">
11842
+ {{ monthAbbreviation() }}
11843
+ </div>
11753
11844
 
11754
- <!-- Weekday headers -->
11755
- <div class="g-weekdays">
11756
- @for (day of weekDays; track $index) {
11757
- <div class="g-weekday">
11758
- {{ day }}
11759
- </div>
11760
- }
11761
- </div>
11845
+ <!-- Weekday headers -->
11846
+ <div class="g-weekdays">
11847
+ @for (day of weekDays; track $index) {
11848
+ <div class="g-weekday">
11849
+ {{ day }}
11850
+ </div>
11851
+ }
11852
+ </div>
11762
11853
 
11763
- <!-- Calendar grid -->
11764
- <div
11765
- tabindex="0"
11766
- role="grid"
11767
- class="g-calendar-grid"
11768
- >
11769
- @for (day of calendarDays(); track day.date.toISOString()) {
11770
- <button
11771
- type="button"
11772
- class="g-day-button"
11773
- [class.other-month]="!day.isCurrentMonth"
11774
- [class.current-month]="day.isCurrentMonth"
11775
- [class.selected]="
11776
- day.isSelected || day.isRangeStart || day.isRangeEnd
11777
- "
11778
- [class.range-start]="day.isRangeStart"
11779
- [class.range-end]="day.isRangeEnd"
11780
- [class.in-range]="day.isInRange"
11781
- [class.today]="day.isToday"
11782
- [class.focused]="isFocusedDay(day.date)"
11783
- [class.disabled]="day.isDisabled || !day.isCurrentMonth"
11784
- [attr.aria-label]="getDateAriaLabel(day)"
11785
- [attr.aria-selected]="day.isSelected"
11786
- [attr.aria-disabled]="day.isDisabled || !day.isCurrentMonth"
11787
- [disabled]="day.isDisabled || !day.isCurrentMonth"
11788
- (click)="selectDate(day.date)"
11789
- (mouseenter)="onDayHover(day.date)"
11790
- >
11791
- {{ day.day }}
11792
- </button>
11793
- }
11794
- </div>
11854
+ <!-- Calendar grid -->
11855
+ <div
11856
+ tabindex="0"
11857
+ role="grid"
11858
+ class="g-calendar-grid"
11859
+ >
11860
+ @for (day of calendarDays(); track day.date.toISOString()) {
11861
+ <button
11862
+ type="button"
11863
+ class="g-day-button"
11864
+ [class.other-month]="!day.isCurrentMonth"
11865
+ [class.current-month]="day.isCurrentMonth"
11866
+ [class.selected]="
11867
+ day.isSelected || day.isRangeStart || day.isRangeEnd
11868
+ "
11869
+ [class.range-start]="day.isRangeStart"
11870
+ [class.range-end]="day.isRangeEnd"
11871
+ [class.in-range]="day.isInRange"
11872
+ [class.today]="day.isToday"
11873
+ [class.focused]="isFocusedDay(day.date)"
11874
+ [class.disabled]="day.isDisabled || !day.isCurrentMonth"
11875
+ [attr.aria-label]="getDateAriaLabel(day)"
11876
+ [attr.aria-selected]="
11877
+ day.isSelected || day.isRangeStart || day.isRangeEnd
11878
+ "
11879
+ [attr.aria-disabled]="day.isDisabled || !day.isCurrentMonth"
11880
+ [disabled]="day.isDisabled || !day.isCurrentMonth"
11881
+ (click)="selectDate(day.date)"
11882
+ >
11883
+ {{ day.day }}
11884
+ </button>
11885
+ }
11886
+ </div>
11887
+ }
11795
11888
  }
11796
11889
  }
11797
11890
  </div>
@@ -11826,7 +11919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
11826
11919
  <!-- Year Picker Mode -->
11827
11920
  <div class="g-calendar-header">
11828
11921
  <span class="g-header-title">
11829
- {{ yearRangeStart() }} - {{ yearRangeStart() + 11 }}
11922
+ {{ yearRangeStart() }} - {{ yearRangeStart() + (yearsDisplayed - 1) }}
11830
11923
  </span>
11831
11924
  <div class="g-navigation-buttons">
11832
11925
  <button
@@ -11867,7 +11960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
11867
11960
  <!-- Year Range Picker Mode -->
11868
11961
  <div class="g-calendar-header">
11869
11962
  <span class="g-header-title">
11870
- {{ yearRangeStart() }} - {{ yearRangeStart() + 11 }}
11963
+ {{ yearRangeStart() }} - {{ yearRangeStart() + (yearsDisplayed - 1) }}
11871
11964
  </span>
11872
11965
  <div class="g-navigation-buttons">
11873
11966
  <button
@@ -11926,6 +12019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
11926
12019
  </button>
11927
12020
  </div>
11928
12021
  }
12022
+
11929
12023
  @case ('month') {
11930
12024
  <!-- Month Picker Mode -->
11931
12025
  <div class="g-calendar-header">
@@ -12030,14 +12124,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
12030
12124
  </button>
12031
12125
  </div>
12032
12126
  }
12127
+
12128
+ <!-- DateTime Picker Mode -->
12033
12129
  @case ('dateTime') {
12034
- <!-- DateTime Picker Mode -->
12035
12130
  <!-- Header with navigation -->
12036
- <div class="g-date-header">
12131
+ <div class="g-calendar-header">
12037
12132
  <button
12038
- [attr.aria-label]="
12039
- 'Selecionar mês e ano, atualmente ' + currentMonthYear()
12040
- "
12133
+ aria-label="Selecionar mês e ano"
12041
12134
  type="button"
12042
12135
  class="g-month-year-toggle"
12043
12136
  (click)="toggleMonthYearPicker()"
@@ -12072,88 +12165,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
12072
12165
  </div>
12073
12166
 
12074
12167
  <!-- Month/Year Picker -->
12075
- @if (showMonthYearPicker()) {
12168
+ <!-- @if (showMonthYearPicker()) {
12076
12169
  <div class="g-month-year-picker">
12077
- <div class="g-month-buttons">
12078
- @for (month of months; track month.value; let i = $index) {
12170
+ @if (monthYearPickerView() === 'year') {
12171
+ <div class="g-picker-header">
12172
+ <div class="g-picker-title-group">
12173
+ <span class="g-picker-title">
12174
+ {{ yearRangeStart() }} -
12175
+ {{ yearRangeStart() + (yearsDisplayed - 1) }}
12176
+ </span>
12177
+ <span class="material-symbols-rounded g-picker-title-icon">
12178
+ arrow_drop_up
12179
+ </span>
12180
+ </div>
12181
+ <div class="g-picker-nav-actions">
12182
+ <button
12183
+ aria-label="Anos anteriores"
12184
+ type="button"
12185
+ class="g-picker-nav"
12186
+ (click)="previousYearRange()"
12187
+ >
12188
+ <span class="material-symbols-rounded">
12189
+ chevron_left
12190
+ </span>
12191
+ </button>
12192
+ <button
12193
+ aria-label="Próximos anos"
12194
+ type="button"
12195
+ class="g-picker-nav"
12196
+ (click)="nextYearRange()"
12197
+ >
12198
+ <span class="material-symbols-rounded">
12199
+ chevron_right
12200
+ </span>
12201
+ </button>
12202
+ </div>
12203
+ </div>
12204
+ <div class="g-year-grid g-inline-year-grid">
12205
+ @for (year of yearsToDisplay(); track year) {
12206
+ <button
12207
+ type="button"
12208
+ class="g-year-button"
12209
+ [class.selected]="isMonthPickerYearSelected(year)"
12210
+ [class.current]="year === currentYearNow"
12211
+ [class.disabled]="isYearDisabled(year)"
12212
+ [disabled]="isYearDisabled(year)"
12213
+ (click)="selectMonthPickerYear(year)"
12214
+ >
12215
+ {{ year }}
12216
+ </button>
12217
+ }
12218
+ </div>
12219
+ } @else {
12220
+ <div class="g-picker-header">
12079
12221
  <button
12222
+ aria-label="Selecionar ano"
12080
12223
  type="button"
12081
- class="g-month-button"
12082
- [class.selected]="currentMonth() === i"
12083
- (click)="selectMonth(i)"
12224
+ class="g-picker-title-trigger"
12225
+ (click)="showYearPickerView()"
12084
12226
  >
12085
- {{ month.short }}
12227
+ <span class="g-picker-title">
12228
+ {{ currentYear() }}
12229
+ </span>
12230
+ <span class="material-symbols-rounded g-picker-title-icon">
12231
+ arrow_drop_up
12232
+ </span>
12086
12233
  </button>
12087
- }
12088
- </div>
12089
- <div class="g-year-picker">
12090
- <button
12091
- aria-label="Ano anterior"
12092
- type="button"
12093
- class="g-year-nav"
12094
- (click)="decrementYear()"
12095
- >
12096
- <span class="material-symbols-rounded">chevron_left</span>
12097
- </button>
12098
- <span class="g-year-display">
12234
+ <div class="g-picker-nav-actions">
12235
+ <button
12236
+ aria-label="Ano anterior"
12237
+ type="button"
12238
+ class="g-picker-nav"
12239
+ (click)="decrementYear()"
12240
+ >
12241
+ <span class="material-symbols-rounded">
12242
+ chevron_left
12243
+ </span>
12244
+ </button>
12245
+ <button
12246
+ aria-label="Próximo ano"
12247
+ type="button"
12248
+ class="g-picker-nav"
12249
+ (click)="incrementYear()"
12250
+ >
12251
+ <span class="material-symbols-rounded">
12252
+ chevron_right
12253
+ </span>
12254
+ </button>
12255
+ </div>
12256
+ </div>
12257
+ <div class="g-month-subtitle">
12099
12258
  {{ currentYear() }}
12100
- </span>
12259
+ </div>
12260
+ <div class="g-month-buttons">
12261
+ @for (month of months; track month.value; let i = $index) {
12262
+ <button
12263
+ type="button"
12264
+ class="g-month-button"
12265
+ [class.selected]="currentMonth() === i"
12266
+ [class.disabled]="isMonthDisabled(i)"
12267
+ [disabled]="isMonthDisabled(i)"
12268
+ (click)="selectMonth(i)"
12269
+ >
12270
+ {{ month.short }}
12271
+ </button>
12272
+ }
12273
+ </div>
12274
+ }
12275
+ </div>
12276
+ } -->
12277
+
12278
+ @if (!showMonthYearPicker()) {
12279
+ <!-- Month abbreviation -->
12280
+ <div class="g-month-abbreviation">
12281
+ {{ monthAbbreviation() }}
12282
+ </div>
12283
+
12284
+ <!-- Weekday headers -->
12285
+ <div class="g-weekdays">
12286
+ @for (day of weekDays; track $index) {
12287
+ <div class="g-weekday">
12288
+ {{ day }}
12289
+ </div>
12290
+ }
12291
+ </div>
12292
+
12293
+ <!-- Calendar grid -->
12294
+ <div
12295
+ role="grid"
12296
+ tabindex="0"
12297
+ class="g-calendar-grid"
12298
+ >
12299
+ @for (day of calendarDays(); track day.date.toISOString()) {
12101
12300
  <button
12102
- aria-label="Próximo ano"
12103
12301
  type="button"
12104
- class="g-year-nav"
12105
- (click)="incrementYear()"
12302
+ class="g-day-button"
12303
+ [class.other-month]="!day.isCurrentMonth"
12304
+ [class.current-month]="day.isCurrentMonth"
12305
+ [class.selected]="day.isSelected"
12306
+ [class.range-start]="day.isRangeStart"
12307
+ [class.range-end]="day.isRangeEnd"
12308
+ [class.in-range]="day.isInRange"
12309
+ [class.today]="day.isToday"
12310
+ [class.focused]="isFocusedDay(day.date)"
12311
+ [class.disabled]="day.isDisabled || !day.isCurrentMonth"
12312
+ [attr.aria-label]="getDateAriaLabel(day)"
12313
+ [attr.aria-selected]="day.isSelected"
12314
+ [attr.aria-disabled]="day.isDisabled || !day.isCurrentMonth"
12315
+ [disabled]="day.isDisabled || !day.isCurrentMonth"
12316
+ (click)="selectDateTimeDate(day.date)"
12106
12317
  >
12107
- <span class="material-symbols-rounded">chevron_right</span>
12318
+ {{ day.day }}
12108
12319
  </button>
12109
- </div>
12320
+ }
12110
12321
  </div>
12111
12322
  }
12112
12323
 
12113
- <!-- Month abbreviation -->
12114
- <div class="g-month-abbreviation">
12115
- {{ monthAbbreviation() }}
12116
- </div>
12117
-
12118
- <!-- Weekday headers -->
12119
- <div class="g-weekdays">
12120
- @for (day of weekDays; track $index) {
12121
- <div class="g-weekday">
12122
- {{ day }}
12123
- </div>
12124
- }
12125
- </div>
12126
-
12127
- <!-- Calendar grid -->
12128
- <div
12129
- role="grid"
12130
- tabindex="0"
12131
- class="g-calendar-grid"
12132
- >
12133
- @for (day of calendarDays(); track day.date.toISOString()) {
12134
- <button
12135
- type="button"
12136
- class="g-day-button"
12137
- [class.other-month]="!day.isCurrentMonth"
12138
- [class.current-month]="day.isCurrentMonth"
12139
- [class.selected]="day.isSelected"
12140
- [class.range-start]="day.isRangeStart"
12141
- [class.range-end]="day.isRangeEnd"
12142
- [class.in-range]="day.isInRange"
12143
- [class.today]="day.isToday"
12144
- [class.focused]="isFocusedDay(day.date)"
12145
- [class.disabled]="day.isDisabled || !day.isCurrentMonth"
12146
- [attr.aria-label]="getDateAriaLabel(day)"
12147
- [attr.aria-selected]="day.isSelected"
12148
- [attr.aria-disabled]="day.isDisabled || !day.isCurrentMonth"
12149
- [disabled]="day.isDisabled || !day.isCurrentMonth"
12150
- (click)="selectDateTimeDate(day.date)"
12151
- >
12152
- {{ day.day }}
12153
- </button>
12154
- }
12155
- </div>
12156
-
12157
12324
  <!-- Time Picker Section -->
12158
12325
  <div class="g-time-picker-section">
12159
12326
  <div class="g-time-label">
@@ -12188,16 +12355,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
12188
12355
  </button>
12189
12356
  </div>
12190
12357
  }
12358
+
12359
+ <!-- Date / DateRange Picker Mode -->
12191
12360
  @default {
12192
- <!-- Date / DateRange Picker Mode -->
12193
12361
  <!-- Header with navigation -->
12194
- <div class="g-date-header">
12362
+ <div class="g-calendar-header">
12195
12363
  <button
12196
- [attr.aria-label]="
12197
- 'Selecionar mês e ano, atualmente ' + currentMonthYear()
12198
- "
12364
+ aria-label="Selecionar mês e ano"
12199
12365
  type="button"
12200
- class="month-year-toggle"
12366
+ class="g-month-year-toggle"
12201
12367
  (click)="toggleMonthYearPicker()"
12202
12368
  >
12203
12369
  {{ currentDateDisplay() }}
@@ -12214,7 +12380,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
12214
12380
  aria-label="Mês anterior"
12215
12381
  type="button"
12216
12382
  class="g-nav-button"
12217
- (click)="previousMonth()"
12383
+ (click)="
12384
+ monthYearPickerView() === 'year'
12385
+ ? previousYearRange()
12386
+ : previousMonth()
12387
+ "
12218
12388
  >
12219
12389
  <span class="material-symbols-rounded">chevron_left</span>
12220
12390
  </button>
@@ -12222,7 +12392,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
12222
12392
  aria-label="Próximo mês"
12223
12393
  type="button"
12224
12394
  class="g-nav-button"
12225
- (click)="nextMonth()"
12395
+ (click)="
12396
+ monthYearPickerView() === 'year' ? nextYearRange() : nextMonth()
12397
+ "
12226
12398
  >
12227
12399
  <span class="material-symbols-rounded">chevron_right</span>
12228
12400
  </button>
@@ -12230,90 +12402,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
12230
12402
  </div>
12231
12403
 
12232
12404
  <!-- Month/Year Picker -->
12233
- @if (showMonthYearPicker()) {
12234
- <div class="g-month-year-picker">
12235
- <div class="g-month-buttons">
12236
- @for (month of months; track month.value; let i = $index) {
12237
- <button
12238
- type="button"
12239
- class="g-month-button"
12240
- [class.selected]="currentMonth() === i"
12241
- (click)="selectMonth(i)"
12242
- >
12243
- {{ month.short }}
12244
- </button>
12245
- }
12246
- </div>
12247
- <div class="g-year-picker">
12405
+ @if (showMonthYearPicker() && monthYearPickerView() === 'year') {
12406
+ <div class="g-year-grid">
12407
+ @for (year of yearsToDisplay(); track year) {
12248
12408
  <button
12249
- aria-label="Ano anterior"
12250
12409
  type="button"
12251
- class="g-year-nav"
12252
- (click)="decrementYear()"
12410
+ class="g-year-button"
12411
+ [class.selected]="isMonthPickerYearSelected(year)"
12412
+ [class.current]="year === currentYearNow"
12413
+ [class.disabled]="isYearDisabled(year)"
12414
+ [disabled]="isYearDisabled(year)"
12415
+ (click)="selectMonthPickerYear(year)"
12253
12416
  >
12254
- <span class="material-symbols-rounded">chevron_left</span>
12417
+ {{ year }}
12255
12418
  </button>
12256
- <span class="g-year-display">
12257
- {{ currentYear() }}
12258
- </span>
12419
+ }
12420
+ </div>
12421
+ } @else if (showMonthYearPicker() && monthYearPickerView() === 'month') {
12422
+ <div class="g-month-grid">
12423
+ @for (month of months; track month.value; let i = $index) {
12259
12424
  <button
12260
- aria-label="Próximo ano"
12261
12425
  type="button"
12262
- class="g-year-nav"
12263
- (click)="incrementYear()"
12426
+ class="g-month-button"
12427
+ [class.selected]="currentMonth() === i"
12428
+ [class.disabled]="isMonthDisabled(i)"
12429
+ [disabled]="isMonthDisabled(i)"
12430
+ (click)="selectMonth(i)"
12264
12431
  >
12265
- <span class="material-symbols-rounded">chevron_right</span>
12432
+ {{ month.short }}
12266
12433
  </button>
12267
- </div>
12434
+ }
12268
12435
  </div>
12269
12436
  }
12270
12437
 
12271
- <!-- Month abbreviation -->
12272
- <div class="g-month-abbreviation">
12273
- {{ monthAbbreviation() }}
12274
- </div>
12438
+ <!-- Days Picker -->
12439
+ @if (!showMonthYearPicker()) {
12440
+ <!-- Month abbreviation -->
12441
+ <div class="g-month-abbreviation">
12442
+ {{ monthAbbreviation() }}
12443
+ </div>
12275
12444
 
12276
- <!-- Weekday headers -->
12277
- <div class="g-weekdays">
12278
- @for (day of weekDays; track $index) {
12279
- <div class="g-weekday">
12280
- {{ day }}
12281
- </div>
12282
- }
12283
- </div>
12445
+ <!-- Weekday headers -->
12446
+ <div class="g-weekdays">
12447
+ @for (day of weekDays; track $index) {
12448
+ <div class="g-weekday">
12449
+ {{ day }}
12450
+ </div>
12451
+ }
12452
+ </div>
12284
12453
 
12285
- <!-- Calendar grid -->
12286
- <div
12287
- tabindex="0"
12288
- role="grid"
12289
- class="g-calendar-grid"
12290
- >
12291
- @for (day of calendarDays(); track day.date.toISOString()) {
12292
- <button
12293
- type="button"
12294
- class="g-day-button"
12295
- [class.other-month]="!day.isCurrentMonth"
12296
- [class.current-month]="day.isCurrentMonth"
12297
- [class.selected]="
12298
- day.isSelected || day.isRangeStart || day.isRangeEnd
12299
- "
12300
- [class.range-start]="day.isRangeStart"
12301
- [class.range-end]="day.isRangeEnd"
12302
- [class.in-range]="day.isInRange"
12303
- [class.today]="day.isToday"
12304
- [class.focused]="isFocusedDay(day.date)"
12305
- [class.disabled]="day.isDisabled || !day.isCurrentMonth"
12306
- [attr.aria-label]="getDateAriaLabel(day)"
12307
- [attr.aria-selected]="day.isSelected"
12308
- [attr.aria-disabled]="day.isDisabled || !day.isCurrentMonth"
12309
- [disabled]="day.isDisabled || !day.isCurrentMonth"
12310
- (click)="selectDate(day.date)"
12311
- (mouseenter)="onDayHover(day.date)"
12312
- >
12313
- {{ day.day }}
12314
- </button>
12315
- }
12316
- </div>
12454
+ <!-- Calendar grid -->
12455
+ <div
12456
+ tabindex="0"
12457
+ role="grid"
12458
+ class="g-calendar-grid"
12459
+ >
12460
+ @for (day of calendarDays(); track day.date.toISOString()) {
12461
+ <button
12462
+ type="button"
12463
+ class="g-day-button"
12464
+ [class.other-month]="!day.isCurrentMonth"
12465
+ [class.current-month]="day.isCurrentMonth"
12466
+ [class.selected]="
12467
+ day.isSelected || day.isRangeStart || day.isRangeEnd
12468
+ "
12469
+ [class.range-start]="day.isRangeStart"
12470
+ [class.range-end]="day.isRangeEnd"
12471
+ [class.in-range]="day.isInRange"
12472
+ [class.today]="day.isToday"
12473
+ [class.focused]="isFocusedDay(day.date)"
12474
+ [class.disabled]="day.isDisabled || !day.isCurrentMonth"
12475
+ [attr.aria-label]="getDateAriaLabel(day)"
12476
+ [attr.aria-selected]="
12477
+ day.isSelected || day.isRangeStart || day.isRangeEnd
12478
+ "
12479
+ [attr.aria-disabled]="day.isDisabled || !day.isCurrentMonth"
12480
+ [disabled]="day.isDisabled || !day.isCurrentMonth"
12481
+ (click)="selectDate(day.date)"
12482
+ >
12483
+ {{ day.day }}
12484
+ </button>
12485
+ }
12486
+ </div>
12487
+ }
12317
12488
  }
12318
12489
  }
12319
12490
  </div>
@@ -15402,7 +15573,7 @@ class SelectServerSide extends BaseControlValueAccessor {
15402
15573
  });
15403
15574
  }
15404
15575
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectServerSide, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
15405
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectServerSide, isStandalone: true, selector: "gipi-select-server-side", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, suggestion: { classPropertyName: "suggestion", publicName: "suggestion", isSignal: true, isRequired: false, transformFunction: null }, suggestionTooltip: { classPropertyName: "suggestionTooltip", publicName: "suggestionTooltip", isSignal: true, isRequired: false, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, resetSearch: { classPropertyName: "resetSearch", publicName: "resetSearch", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, compareBy: { classPropertyName: "compareBy", publicName: "compareBy", isSignal: true, isRequired: false, transformFunction: null }, propertyLabel: { classPropertyName: "propertyLabel", publicName: "propertyLabel", isSignal: true, isRequired: false, transformFunction: null }, propertyValue: { classPropertyName: "propertyValue", publicName: "propertyValue", isSignal: true, isRequired: false, transformFunction: null }, optionsExclude: { classPropertyName: "optionsExclude", publicName: "optionsExclude", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, fetchOnFirstOpen: { classPropertyName: "fetchOnFirstOpen", publicName: "fetchOnFirstOpen", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, extraParams: { classPropertyName: "extraParams", publicName: "extraParams", isSignal: true, isRequired: false, transformFunction: null }, fetchFn: { classPropertyName: "fetchFn", publicName: "fetchFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "attr.name": "name()", "class.g-select-disabled": "$disabled()", "class.g-select-multiple": "multiple()" }, classAttribute: "g-select" }, providers: [provideValueAccessor(SelectServerSide)], viewQueries: [{ propertyName: "_selectRef", first: true, predicate: Select, descendants: true, isSignal: true }], exportAs: ["gSelectServerSide"], usesInheritance: true, ngImport: i0, template: `
15576
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectServerSide, isStandalone: true, selector: "gipi-select-server-side", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, suggestion: { classPropertyName: "suggestion", publicName: "suggestion", isSignal: true, isRequired: false, transformFunction: null }, suggestionTooltip: { classPropertyName: "suggestionTooltip", publicName: "suggestionTooltip", isSignal: true, isRequired: false, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, resetSearch: { classPropertyName: "resetSearch", publicName: "resetSearch", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, compareBy: { classPropertyName: "compareBy", publicName: "compareBy", isSignal: true, isRequired: false, transformFunction: null }, propertyLabel: { classPropertyName: "propertyLabel", publicName: "propertyLabel", isSignal: true, isRequired: false, transformFunction: null }, propertyValue: { classPropertyName: "propertyValue", publicName: "propertyValue", isSignal: true, isRequired: false, transformFunction: null }, optionsExclude: { classPropertyName: "optionsExclude", publicName: "optionsExclude", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, fetchOnFirstOpen: { classPropertyName: "fetchOnFirstOpen", publicName: "fetchOnFirstOpen", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, extraParams: { classPropertyName: "extraParams", publicName: "extraParams", isSignal: true, isRequired: false, transformFunction: null }, fetchFn: { classPropertyName: "fetchFn", publicName: "fetchFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "attr.name": "name()", "class.g-select-disabled": "$disabled()", "class.g-select-multiple": "multiple()" }, classAttribute: "g-select g-select-server-side" }, providers: [provideValueAccessor(SelectServerSide)], viewQueries: [{ propertyName: "_selectRef", first: true, predicate: Select, descendants: true, isSignal: true }], exportAs: ["gSelectServerSide"], usesInheritance: true, ngImport: i0, template: `
15406
15577
  <gipi-select
15407
15578
  #selectComponent
15408
15579
  #control="ngModel"
@@ -15432,15 +15603,19 @@ class SelectServerSide extends BaseControlValueAccessor {
15432
15603
  @if (options().length > 0 || loading()) {
15433
15604
  <div
15434
15605
  footer
15435
- class="select-load-more-container"
15606
+ class="g-select-server-side-footer-container"
15436
15607
  >
15608
+ @if (loading()) {
15609
+ <gipi-loading type="spin" />
15610
+ }
15611
+
15437
15612
  <span class="select-pagination-text">
15438
15613
  Exibindo de {{ startIndex() }} a {{ endIndex() }} de {{ total() }}
15439
15614
  </span>
15440
15615
  </div>
15441
15616
  }
15442
15617
  </gipi-select>
15443
- `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "gipi-select", inputs: ["label", "placeholder", "help", "hint", "suggestion", "suggestionTooltip", "hasError", "controlErrors", "noOptionsText", "searchPlaceholder", "loading", "multiple", "showSearch", "showClear", "showSelectAll", "compareBy", "options", "propertyLabel", "propertyValue", "optionsExclude", "optionsDisable"], outputs: ["searchChange", "loadMoreClick", "opened", "closed", "optionsScroll"], exportAs: ["gSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
15618
+ `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "gipi-select", inputs: ["label", "placeholder", "help", "hint", "suggestion", "suggestionTooltip", "hasError", "controlErrors", "noOptionsText", "searchPlaceholder", "loading", "multiple", "showSearch", "showClear", "showSelectAll", "compareBy", "options", "propertyLabel", "propertyValue", "optionsExclude", "optionsDisable"], outputs: ["searchChange", "loadMoreClick", "opened", "closed", "optionsScroll"], exportAs: ["gSelect"] }, { kind: "component", type: Loading, selector: "gipi-loading", inputs: ["id", "name", "variant", "type"], exportAs: ["gLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
15444
15619
  }
15445
15620
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectServerSide, decorators: [{
15446
15621
  type: Component,
@@ -15474,8 +15649,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
15474
15649
  @if (options().length > 0 || loading()) {
15475
15650
  <div
15476
15651
  footer
15477
- class="select-load-more-container"
15652
+ class="g-select-server-side-footer-container"
15478
15653
  >
15654
+ @if (loading()) {
15655
+ <gipi-loading type="spin" />
15656
+ }
15657
+
15479
15658
  <span class="select-pagination-text">
15480
15659
  Exibindo de {{ startIndex() }} a {{ endIndex() }} de {{ total() }}
15481
15660
  </span>
@@ -15487,8 +15666,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
15487
15666
  '[attr.name]': 'name()',
15488
15667
  '[class.g-select-disabled]': '$disabled()',
15489
15668
  '[class.g-select-multiple]': 'multiple()',
15490
- class: 'g-select',
15491
- }, providers: [provideValueAccessor(SelectServerSide)], imports: [FormsModule, Select] }]
15669
+ class: 'g-select g-select-server-side',
15670
+ }, providers: [provideValueAccessor(SelectServerSide)], imports: [FormsModule, Select, Loading] }]
15492
15671
  }], ctorParameters: () => [], propDecorators: { _selectRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Select), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], help: [{ type: i0.Input, args: [{ isSignal: true, alias: "help", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], suggestion: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestion", required: false }] }], suggestionTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionTooltip", required: false }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], resetSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetSearch", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], compareBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareBy", required: false }] }], propertyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyLabel", required: false }] }], propertyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyValue", required: false }] }], optionsExclude: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsExclude", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], infiniteScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollThreshold", required: false }] }], fetchOnFirstOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchOnFirstOpen", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], extraParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraParams", required: false }] }], fetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchFn", required: false }] }] } });
15493
15672
 
15494
15673
  class SelectModule {
@@ -20545,6 +20724,7 @@ class Table {
20545
20724
  this._loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
20546
20725
  this.expandedRowsChange = output();
20547
20726
  this.onExpandedRows = output();
20727
+ this.onExpandRow = output();
20548
20728
  this.selectedRowsChange = output();
20549
20729
  this.onSelectedRows = output();
20550
20730
  this.onSelectRow = output();
@@ -20614,6 +20794,17 @@ class Table {
20614
20794
  this.onExpandedRows.emit(this.expandedRows?.selected ?? []);
20615
20795
  this._changeDetectorRef.markForCheck();
20616
20796
  }
20797
+ onHandleExpandRow(row) {
20798
+ if (this.loading || !this.isRowExpandableFn()(row)) {
20799
+ return;
20800
+ }
20801
+ this.expandedRows?.toggle(row);
20802
+ if (this.expandedRows?.isSelected(row)) {
20803
+ this.onExpandRow.emit(row);
20804
+ }
20805
+ this.onExpandedRows.emit(this.expandedRows?.selected ?? []);
20806
+ this._changeDetectorRef.markForCheck();
20807
+ }
20617
20808
  isAllSelected() {
20618
20809
  const numSelected = this.selectedRows?.selected?.length ?? 0;
20619
20810
  const numRows = this.dataSource.data.length;
@@ -20635,7 +20826,9 @@ class Table {
20635
20826
  return;
20636
20827
  }
20637
20828
  this.selectedRows?.toggle(row);
20638
- this.onSelectRow.emit(row);
20829
+ if (this.selectedRows?.isSelected(row)) {
20830
+ this.onSelectRow.emit(row);
20831
+ }
20639
20832
  this.onSelectedRows.emit(this.selectedRows?.selected ?? []);
20640
20833
  this._changeDetectorRef.markForCheck();
20641
20834
  }
@@ -20714,8 +20907,7 @@ class Table {
20714
20907
  this.onHandleSelectRow(row);
20715
20908
  }
20716
20909
  if (expandableByClickInRow) {
20717
- this.expandedRows?.toggle(row);
20718
- this.onExpandedRows.emit(this.expandedRows?.selected ?? []);
20910
+ this.onHandleExpandRow(row);
20719
20911
  }
20720
20912
  this._changeDetectorRef.markForCheck();
20721
20913
  }
@@ -20809,12 +21001,12 @@ class Table {
20809
21001
  return JSON.stringify(row1) === JSON.stringify(row2);
20810
21002
  }
20811
21003
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
20812
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "gipi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, calcMinHeight: { classPropertyName: "calcMinHeight", publicName: "calcMinHeight", isSignal: true, isRequired: false, transformFunction: null }, isRowHighlightFn: { classPropertyName: "isRowHighlightFn", publicName: "isRowHighlightFn", isSignal: true, isRequired: false, transformFunction: null }, matSortFrontend: { classPropertyName: "matSortFrontend", publicName: "sortFrontend", isSignal: true, isRequired: false, transformFunction: null }, matSortActive: { classPropertyName: "matSortActive", publicName: "sortActive", isSignal: true, isRequired: false, transformFunction: null }, matSortDirection: { classPropertyName: "matSortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, matSortDisableClear: { classPropertyName: "matSortDisableClear", publicName: "sortDisableClear", isSignal: true, isRequired: false, transformFunction: null }, matSortDisabled: { classPropertyName: "matSortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, matSortStart: { classPropertyName: "matSortStart", publicName: "sortStart", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expandedRowsInitial: { classPropertyName: "expandedRowsInitial", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, expandAllEnabled: { classPropertyName: "expandAllEnabled", publicName: "expandAllEnabled", isSignal: true, isRequired: false, transformFunction: null }, multiExpandable: { classPropertyName: "multiExpandable", publicName: "multiExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandablePosition: { classPropertyName: "expandablePosition", publicName: "expandablePosition", isSignal: true, isRequired: false, transformFunction: null }, expandableByClickInRow: { classPropertyName: "expandableByClickInRow", publicName: "expandableByClickInRow", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: true, isRequired: false, transformFunction: null }, expandableCompareWithFn: { classPropertyName: "expandableCompareWithFn", publicName: "expandableCompareWithFn", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandableFn: { classPropertyName: "isRowExpandableFn", publicName: "isRowExpandableFn", isSignal: true, isRequired: false, transformFunction: null }, selectAllEnabled: { classPropertyName: "selectAllEnabled", publicName: "selectAllEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectablePosition: { classPropertyName: "selectablePosition", publicName: "selectablePosition", isSignal: true, isRequired: false, transformFunction: null }, selectByClickInRow: { classPropertyName: "selectByClickInRow", publicName: "selectByClickInRow", isSignal: true, isRequired: false, transformFunction: null }, selectCompareWithFn: { classPropertyName: "selectCompareWithFn", publicName: "selectCompareWithFn", isSignal: true, isRequired: false, transformFunction: null }, selectedRowsInitial: { classPropertyName: "selectedRowsInitial", publicName: "selectedRowsInitial", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectableFn: { classPropertyName: "isRowSelectableFn", publicName: "isRowSelectableFn", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, columnInitial: { classPropertyName: "columnInitial", publicName: "columnInitial", isSignal: true, isRequired: false, transformFunction: null }, columnFinal: { classPropertyName: "columnFinal", publicName: "columnFinal", isSignal: true, isRequired: false, transformFunction: null }, showActionsOnHover: { classPropertyName: "showActionsOnHover", publicName: "showActionsOnHover", isSignal: true, isRequired: false, transformFunction: null }, actionsWidth: { classPropertyName: "actionsWidth", publicName: "actionsWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsMinWidth: { classPropertyName: "actionsMinWidth", publicName: "actionsMinWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsMaxWidth: { classPropertyName: "actionsMaxWidth", publicName: "actionsMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, paginatorFrontend: { classPropertyName: "paginatorFrontend", publicName: "paginatorFrontend", isSignal: true, isRequired: false, transformFunction: null }, paginatorDisabled: { classPropertyName: "paginatorDisabled", publicName: "paginatorDisabled", isSignal: true, isRequired: false, transformFunction: null }, paginatorPageSize: { classPropertyName: "paginatorPageSize", publicName: "paginatorPageSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, paginatorPageNumber: { classPropertyName: "paginatorPageNumber", publicName: "paginatorPageNumber", isSignal: true, isRequired: false, transformFunction: null }, paginatorLength: { classPropertyName: "paginatorLength", publicName: "paginatorLength", isSignal: true, isRequired: false, transformFunction: null }, paginatorPageSizeOptions: { classPropertyName: "paginatorPageSizeOptions", publicName: "paginatorPageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, paginatorHidePageSize: { classPropertyName: "paginatorHidePageSize", publicName: "paginatorHidePageSize", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, menuItemsContext: { classPropertyName: "menuItemsContext", publicName: "menuItemsContext", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { expandedRowsChange: "expandedRowsChange", onExpandedRows: "onExpandedRows", selectedRowsChange: "selectedRowsChange", onSelectedRows: "onSelectedRows", onSelectRow: "onSelectRow", onSort: "onSort", onPage: "onPage", onClickRow: "onClickRow" }, host: { properties: { "attr.id": "id()", "attr.name": "name()", "attr.role": "'table'", "style.min-height": "this.tableMinHeightPx" }, classAttribute: "g-table" }, providers: [
21004
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "gipi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, calcMinHeight: { classPropertyName: "calcMinHeight", publicName: "calcMinHeight", isSignal: true, isRequired: false, transformFunction: null }, isRowHighlightFn: { classPropertyName: "isRowHighlightFn", publicName: "isRowHighlightFn", isSignal: true, isRequired: false, transformFunction: null }, matSortFrontend: { classPropertyName: "matSortFrontend", publicName: "sortFrontend", isSignal: true, isRequired: false, transformFunction: null }, matSortActive: { classPropertyName: "matSortActive", publicName: "sortActive", isSignal: true, isRequired: false, transformFunction: null }, matSortDirection: { classPropertyName: "matSortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, matSortDisableClear: { classPropertyName: "matSortDisableClear", publicName: "sortDisableClear", isSignal: true, isRequired: false, transformFunction: null }, matSortDisabled: { classPropertyName: "matSortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, matSortStart: { classPropertyName: "matSortStart", publicName: "sortStart", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expandedRowsInitial: { classPropertyName: "expandedRowsInitial", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, expandAllEnabled: { classPropertyName: "expandAllEnabled", publicName: "expandAllEnabled", isSignal: true, isRequired: false, transformFunction: null }, multiExpandable: { classPropertyName: "multiExpandable", publicName: "multiExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandablePosition: { classPropertyName: "expandablePosition", publicName: "expandablePosition", isSignal: true, isRequired: false, transformFunction: null }, expandableByClickInRow: { classPropertyName: "expandableByClickInRow", publicName: "expandableByClickInRow", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: true, isRequired: false, transformFunction: null }, expandableCompareWithFn: { classPropertyName: "expandableCompareWithFn", publicName: "expandableCompareWithFn", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandableFn: { classPropertyName: "isRowExpandableFn", publicName: "isRowExpandableFn", isSignal: true, isRequired: false, transformFunction: null }, selectAllEnabled: { classPropertyName: "selectAllEnabled", publicName: "selectAllEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectablePosition: { classPropertyName: "selectablePosition", publicName: "selectablePosition", isSignal: true, isRequired: false, transformFunction: null }, selectByClickInRow: { classPropertyName: "selectByClickInRow", publicName: "selectByClickInRow", isSignal: true, isRequired: false, transformFunction: null }, selectCompareWithFn: { classPropertyName: "selectCompareWithFn", publicName: "selectCompareWithFn", isSignal: true, isRequired: false, transformFunction: null }, selectedRowsInitial: { classPropertyName: "selectedRowsInitial", publicName: "selectedRowsInitial", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectableFn: { classPropertyName: "isRowSelectableFn", publicName: "isRowSelectableFn", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, columnInitial: { classPropertyName: "columnInitial", publicName: "columnInitial", isSignal: true, isRequired: false, transformFunction: null }, columnFinal: { classPropertyName: "columnFinal", publicName: "columnFinal", isSignal: true, isRequired: false, transformFunction: null }, showActionsOnHover: { classPropertyName: "showActionsOnHover", publicName: "showActionsOnHover", isSignal: true, isRequired: false, transformFunction: null }, actionsWidth: { classPropertyName: "actionsWidth", publicName: "actionsWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsMinWidth: { classPropertyName: "actionsMinWidth", publicName: "actionsMinWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsMaxWidth: { classPropertyName: "actionsMaxWidth", publicName: "actionsMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, paginatorFrontend: { classPropertyName: "paginatorFrontend", publicName: "paginatorFrontend", isSignal: true, isRequired: false, transformFunction: null }, paginatorDisabled: { classPropertyName: "paginatorDisabled", publicName: "paginatorDisabled", isSignal: true, isRequired: false, transformFunction: null }, paginatorPageSize: { classPropertyName: "paginatorPageSize", publicName: "paginatorPageSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, paginatorPageNumber: { classPropertyName: "paginatorPageNumber", publicName: "paginatorPageNumber", isSignal: true, isRequired: false, transformFunction: null }, paginatorLength: { classPropertyName: "paginatorLength", publicName: "paginatorLength", isSignal: true, isRequired: false, transformFunction: null }, paginatorPageSizeOptions: { classPropertyName: "paginatorPageSizeOptions", publicName: "paginatorPageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, paginatorHidePageSize: { classPropertyName: "paginatorHidePageSize", publicName: "paginatorHidePageSize", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, menuItemsContext: { classPropertyName: "menuItemsContext", publicName: "menuItemsContext", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { expandedRowsChange: "expandedRowsChange", onExpandedRows: "onExpandedRows", onExpandRow: "onExpandRow", selectedRowsChange: "selectedRowsChange", onSelectedRows: "onSelectedRows", onSelectRow: "onSelectRow", onSort: "onSort", onPage: "onPage", onClickRow: "onClickRow" }, host: { properties: { "attr.id": "id()", "attr.name": "name()", "attr.role": "'table'", "style.min-height": "this.tableMinHeightPx" }, classAttribute: "g-table" }, providers: [
20813
21005
  {
20814
21006
  provide: MatPaginatorIntl,
20815
21007
  useFactory: () => inject(PaginatorIntlToken),
20816
21008
  },
20817
- ], queries: [{ propertyName: "expandDetailRef", first: true, predicate: ["expandDetail"], descendants: true, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "menuContextRef", first: true, predicate: ["menuContext"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableFooterRef", first: true, predicate: ["gTableFooter"], descendants: true, read: ElementRef }, { propertyName: "matPaginatorRef", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSortRef", first: true, predicate: MatSort, descendants: true }, { propertyName: "menuContextWrapperRef", first: true, predicate: ["menuContextWrapper"], descendants: true, read: ElementRef }], exportAs: ["gTable"], ngImport: i0, template: "<table\n #gTable\n class=\"g-table-content\"\n tabindex=\"-1\"\n cdk-table\n [dataSource]=\"dataSource\"\n [trackBy]=\"trackByFn()\"\n [multiTemplateDataRows]=\"expandable()\"\n matSort\n [matSortActive]=\"matSortActive()\"\n [matSortDirection]=\"_matSortDirection\"\n [matSortDisableClear]=\"matSortDisableClear()\"\n [matSortDisabled]=\"matSortDisabled()\"\n [matSortStart]=\"_matSortStart\"\n (matSortChange)=\"onHandleSort($event)\"\n (mouseleave)=\"menuContextHover = false; closeMenuContext()\"\n (blur)=\"menuContextHover = false; closeMenuContext()\"\n>\n <!-- Expand Column -->\n @if (expandable()) {\n <ng-container cdkColumnDef=\"expand\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"g-table-column-fixed-wrapper\"\n >\n @if (expandAllEnabled() && multiExpandable()) {\n <button\n type=\"button\"\n class=\"g-table-button-expand g-table-button-expand-all\"\n [class.g-table-button-expanded]=\"\n expandedRows?.hasValue() && isAllExpanded()\n \"\n (click)=\"onHandleToggleExpandAll()\"\n >\n <gipi-icon\n [icon]=\"isAllExpanded() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"\n />\n </button>\n } @else {\n &nbsp;\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n class=\"g-table-column-fixed-wrapper\"\n >\n <button\n mat-icon-button\n aria-label=\"expand row\"\n class=\"g-table-button-expand\"\n [class.g-table-button-expanded]=\"expandedRows?.isSelected(row)\"\n [disabled]=\"!isRowExpandableFn()(row)\"\n (click)=\"expandedRows?.toggle(row); $event.stopPropagation()\"\n >\n <gipi-icon\n [icon]=\"\n expandedRows?.isSelected(row)\n ? 'keyboard_arrow_up'\n : 'keyboard_arrow_down'\n \"\n />\n </button>\n </td>\n </ng-container>\n }\n\n <!-- Checkbox Column -->\n @if (selectable()) {\n <ng-container cdkColumnDef=\"select\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"g-table-column-fixed-wrapper\"\n >\n @if (selectAllEnabled() && multiSelectable()) {\n <gipi-checkbox\n [variant]=\"'primary'\"\n [checked]=\"selectedRows?.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectedRows?.hasValue() && !isAllSelected()\"\n (change)=\"onHandleToggleSelectAll()\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n &nbsp;\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n class=\"g-table-column-fixed-wrapper\"\n >\n <gipi-checkbox\n [variant]=\"'secondary'\"\n [disabled]=\"!isRowSelectableFn()(row)\"\n [checked]=\"selectedRows?.isSelected(row)\"\n (change)=\"onHandleSelectRow(row)\"\n (click)=\"$event.stopPropagation()\"\n />\n </td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (column of columns; track column) {\n <ng-container [cdkColumnDef]=\"column.property\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [mat-sort-header]=\"column.property\"\n [disabled]=\"!coerceConditionByColumn(column.sortable)\"\n [disableClear]=\"coerceConditionByColumn(column.sortDisableClear)\"\n [style.padding-inline.px]=\"column.borderSpacing\"\n [style.min-width]=\"_columnWidth(column.minWidth)\"\n [style.width]=\"_columnWidth(column.width)\"\n [style.max-width]=\"_columnWidth(column.maxWidth)\"\n [style.align-content]=\"column.alignVerHeader\"\n [style.justify-items]=\"column.alignHorHeader\"\n [class.g-table-align-center]=\"column.alignTextHeader === 'center'\"\n [class.g-table-align-end]=\"column.alignTextHeader === 'end'\"\n [class.g-table-align-start]=\"column.alignTextHeader === 'start'\"\n [class.g-table-align-left]=\"column.alignTextHeader === 'left'\"\n [class.g-table-align-right]=\"column.alignTextHeader === 'right'\"\n [class.g-table-align-justify]=\"column.alignTextHeader === 'justify'\"\n >\n @if (column.templateHeader) {\n <ng-container\n [ngTemplateOutlet]=\"column.templateHeader\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n } @else {\n <span\n [gTextEllipsis]=\"1\"\n [gTextEllipsisEnabled]=\"coerceConditionByColumn(column.slice)\"\n >\n {{ column.label }}\n </span>\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [style.padding-inline.px]=\"column.borderSpacing\"\n [style.min-width]=\"_columnWidth(column.minWidth)\"\n [style.width]=\"\n !!column.maxWidth && column.maxWidth !== '100%'\n ? '100%'\n : _columnWidth(column.width)\n \"\n [style.max-width]=\"_columnWidth(column.maxWidth)\"\n [style.align-content]=\"column.alignVerCell\"\n [style.justify-items]=\"column.alignHorCell\"\n [class.g-table-align-center]=\"column.alignTextCell === 'center'\"\n [class.g-table-align-end]=\"column.alignTextCell === 'end'\"\n [class.g-table-align-start]=\"column.alignTextCell === 'start'\"\n [class.g-table-align-left]=\"column.alignTextCell === 'left'\"\n [class.g-table-align-right]=\"column.alignTextCell === 'right'\"\n [class.g-table-align-justify]=\"column.alignTextCell === 'justify'\"\n (click)=\"columnCellAction(column, row, 'click')\"\n (dblclick)=\"columnCellAction(column, row, 'dblClick')\"\n (mouseenter)=\"columnCellAction(column, row, 'mouseEnter')\"\n (mouseleave)=\"columnCellAction(column, row, 'mouseLeave')\"\n >\n @if (column.templateCell) {\n <ng-container\n [ngTemplateOutlet]=\"column.templateCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n />\n } @else {\n <span\n [gTextEllipsis]=\"column.subValue ? 1 : 2\"\n [gTextEllipsisEnabled]=\"coerceConditionByRow(column.slice, row)\"\n >\n {{ columnCellValue(column, row) }}\n </span>\n\n @if (column.subValue) {\n <small\n [gTextEllipsis]=\"1\"\n [gTextEllipsisEnabled]=\"coerceConditionByRow(column.slice, row)\"\n >\n {{ columnCellSubValue(column, row) }}\n </small>\n }\n }\n </td>\n </ng-container>\n }\n\n <!-- Actions Column -->\n @if (actionsRef()) {\n <ng-container cdkColumnDef=\"actions\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [style.justify-items]=\"'center'\"\n [style.align-content]=\"'center'\"\n [style.text-align]=\"'center'\"\n [style.min-width]=\"_columnWidth(actionsMinWidth())\"\n [style.width]=\"_columnWidth(actionsWidth())\"\n [style.max-width]=\"_columnWidth(actionsMaxWidth())\"\n >\n A\u00E7\u00F5es\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [style.justify-items]=\"'center'\"\n [style.align-content]=\"'center'\"\n [style.min-width]=\"_columnWidth(actionsMinWidth())\"\n [style.width]=\"_columnWidth(actionsWidth())\"\n [style.max-width]=\"_columnWidth(actionsMaxWidth())\"\n >\n @if (!showActionsOnHover() || rowHovered() === row) {\n <ng-template\n [ngTemplateOutlet]=\"actionsRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n />\n } @else {\n &nbsp;\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (expandable() && expandDetailRef()) {\n <ng-container cdkColumnDef=\"expandedDetail\">\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"columnExpandDetailColspan\"\n style=\"padding: 0 !important\"\n >\n <div\n class=\"g-table-expand-detail-wrapper\"\n [class.g-table-expand-detail-wrapper-expanded]=\"expandedRows?.isSelected(row)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"expandDetailRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n ></ng-template>\n </div>\n </td>\n </ng-container>\n }\n\n <tr\n cdk-header-row\n *cdkHeaderRowDef=\"columnsToDisplay()\"\n class=\"g-table-header-row\"\n [class.hidden]=\"!showHeader()\"\n (focus)=\"menuContextHover = false; closeMenuContext()\"\n (mouseenter)=\"menuContextHover = false; closeMenuContext()\"\n ></tr>\n\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: columnsToDisplay()\"\n class=\"g-table-row\"\n [class.g-table-row-hover]=\"menuContextRow() === row\"\n [class.g-table-row-highlight]=\"isRowHighlightFn()(row)\"\n [style.display]=\"loading ? 'none' : 'table-row'\"\n (mousemove)=\"showMenuContext($event, row)\"\n (mouseenter)=\"rowHovered.set(row)\"\n (mouseleave)=\"rowHovered.set(null)\"\n (click)=\"onHandleClickRow(row)\"\n ></tr>\n\n @if (expandable()) {\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"g-table-expand-detail-row\"\n [class.g-table-expand-detail-row-expanded]=\"expandedRows?.isSelected(row)\"\n (focus)=\"menuContextHover = false; closeMenuContext()\"\n (mouseenter)=\"rowHovered.set(row); menuContextHover = false; closeMenuContext()\"\n (mouseleave)=\"rowHovered.set(null)\"\n ></tr>\n }\n</table>\n\n@if (loading) {\n <gipi-loading type=\"progress-bar\" />\n}\n\n@if (!loading && dataSource.data.length <= 0) {\n <gipi-empty />\n}\n\n@if (!loading && dataSource.data.length > 0) {\n <div\n #gTableFooter\n class=\"g-table-footer-row\"\n >\n @if (footerRef()) {\n <ng-template\n [ngTemplateOutlet]=\"footerRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: dataSource }\"\n />\n }\n\n @if (paginator()) {\n <mat-paginator\n class=\"g-table-paginator\"\n [disabled]=\"paginatorDisabled() || loading\"\n [hidePageSize]=\"paginatorHidePageSize()\"\n [length]=\"paginatorLength()\"\n [pageIndex]=\"paginatorPageNumber()\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"paginatorPageSizeOptions()\"\n [selectConfig]=\"{}\"\n [showFirstLastButtons]=\"true\"\n (page)=\"onHandlePage($event)\"\n />\n }\n </div>\n}\n\n@if (!loading && dataSource.data.length && (menuItemsContext().length > 0 || menuContextRef())) {\n <div\n #menuContextWrapper\n class=\"g-table-menu-context\"\n [attr.id]=\"'menuContext'\"\n [attr.role]=\"'menu'\"\n (mouseover)=\"menuContextHover = true\"\n (focus)=\"menuContextHover = true\"\n (mouseleave)=\"menuContextHover = false; closeMenuContext()\"\n (blur)=\"menuContextHover = false; closeMenuContext()\"\n >\n @if (menuItemsContext() && menuItemsContext().length > 0) {\n @for (menu of menuItemsContext(); track menu) {\n @if (coerceConditionByRow(menu.visible, menuContextRow())) {\n <button\n class=\"g-table-menu-item-context\"\n [class.g-table-menu-item-context-show-tag-new]=\"\n coerceConditionByRow(menu.showTagNew, menuContextRow())\n \"\n [attr.id]=\"menu.id\"\n [name]=\"menu.name\"\n [tabIndex]=\"$index\"\n [gTooltip]=\"menu.tooltip\"\n [gTooltipPosition]=\"'below'\"\n (click)=\"\n menu?.action(menuContextRow()!);\n menuContextHover = false;\n closeMenuContext()\n \"\n >\n @if (menu.icon || menu.svgIcon) {\n <gipi-icon\n class=\"g-button-icon\"\n [size]=\"22\"\n [icon]=\"menu.icon\"\n [svgIcon]=\"menu.svgIcon\"\n [fontSet]=\"menu.iconFontSet\"\n [variation]=\"menu.iconVariation\"\n [weight]=\"menu.iconWeight\"\n [grade]=\"menu.iconGrade\"\n [optical]=\"menu.iconOptical\"\n />\n }\n </button>\n }\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"menuContextRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: menuContextRow() }\"\n />\n }\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i2$4.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2$4.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$4.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$4.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$4.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$4.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2$4.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2$4.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2$4.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2$4.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: TextEllipsisModule }, { kind: "directive", type: TextEllipsisDirective, selector: "[gTextEllipsis]", inputs: ["gTextEllipsis", "gTextEllipsisEnabled"], exportAs: ["gTextEllipsis"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: TooltipDirective, selector: "[gTooltip]", inputs: ["gTooltip", "gTooltipPosition", "gTooltipDisabled", "gTooltipShowDelay", "gTooltipHideDelay"], exportAs: ["gTooltip"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: Checkbox, selector: "gipi-checkbox", inputs: ["label", "help", "variant", "checked", "indeterminate"], outputs: ["indeterminateChange", "change", "focus", "blur"], exportAs: ["gCheckbox"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: Icon, selector: "gipi-icon", inputs: ["id", "name", "class", "style", "variation", "weight", "grade", "optical", "inline", "aria-label", "tooltip", "icon", "svgIcon", "size", "color", "fontSet"], exportAs: ["gIcon"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: Loading, selector: "gipi-loading", inputs: ["id", "name", "variant", "type"], exportAs: ["gLoading"] }, { kind: "ngmodule", type: EmptyModule }, { kind: "component", type: Empty, selector: "gipi-empty", inputs: ["id", "name", "label"], exportAs: ["gEmpty"] }] }); }
21009
+ ], queries: [{ propertyName: "expandDetailRef", first: true, predicate: ["expandDetail"], descendants: true, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "menuContextRef", first: true, predicate: ["menuContext"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableFooterRef", first: true, predicate: ["gTableFooter"], descendants: true, read: ElementRef }, { propertyName: "matPaginatorRef", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSortRef", first: true, predicate: MatSort, descendants: true }, { propertyName: "menuContextWrapperRef", first: true, predicate: ["menuContextWrapper"], descendants: true, read: ElementRef }], exportAs: ["gTable"], ngImport: i0, template: "<table\n #gTable\n class=\"g-table-content\"\n tabindex=\"-1\"\n cdk-table\n [dataSource]=\"dataSource\"\n [trackBy]=\"trackByFn()\"\n [multiTemplateDataRows]=\"expandable()\"\n matSort\n [matSortActive]=\"matSortActive()\"\n [matSortDirection]=\"_matSortDirection\"\n [matSortDisableClear]=\"matSortDisableClear()\"\n [matSortDisabled]=\"matSortDisabled()\"\n [matSortStart]=\"_matSortStart\"\n (matSortChange)=\"onHandleSort($event)\"\n (mouseleave)=\"menuContextHover = false; closeMenuContext()\"\n (blur)=\"menuContextHover = false; closeMenuContext()\"\n>\n <!-- Expand Column -->\n @if (expandable()) {\n <ng-container cdkColumnDef=\"expand\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"g-table-column-fixed-wrapper\"\n >\n @if (expandAllEnabled() && multiExpandable()) {\n <button\n type=\"button\"\n class=\"g-table-button-expand g-table-button-expand-all\"\n [class.g-table-button-expanded]=\"\n expandedRows?.hasValue() && isAllExpanded()\n \"\n (click)=\"onHandleToggleExpandAll(); $event.stopPropagation()\"\n >\n <gipi-icon\n [icon]=\"isAllExpanded() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"\n />\n </button>\n } @else {\n &nbsp;\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n class=\"g-table-column-fixed-wrapper\"\n >\n <button\n mat-icon-button\n aria-label=\"expand row\"\n class=\"g-table-button-expand\"\n [class.g-table-button-expanded]=\"expandedRows?.isSelected(row)\"\n [disabled]=\"!isRowExpandableFn()(row)\"\n (click)=\"onHandleExpandRow(row); $event.stopPropagation()\"\n >\n <gipi-icon\n [icon]=\"\n expandedRows?.isSelected(row)\n ? 'keyboard_arrow_up'\n : 'keyboard_arrow_down'\n \"\n />\n </button>\n </td>\n </ng-container>\n }\n\n <!-- Checkbox Column -->\n @if (selectable()) {\n <ng-container cdkColumnDef=\"select\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"g-table-column-fixed-wrapper\"\n >\n @if (selectAllEnabled() && multiSelectable()) {\n <gipi-checkbox\n [variant]=\"'primary'\"\n [checked]=\"selectedRows?.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectedRows?.hasValue() && !isAllSelected()\"\n (change)=\"onHandleToggleSelectAll()\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n &nbsp;\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n class=\"g-table-column-fixed-wrapper\"\n >\n <gipi-checkbox\n [variant]=\"'secondary'\"\n [disabled]=\"!isRowSelectableFn()(row)\"\n [checked]=\"selectedRows?.isSelected(row)\"\n (change)=\"onHandleSelectRow(row)\"\n (click)=\"$event.stopPropagation()\"\n />\n </td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (column of columns; track column) {\n <ng-container [cdkColumnDef]=\"column.property\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [mat-sort-header]=\"column.property\"\n [disabled]=\"!coerceConditionByColumn(column.sortable)\"\n [disableClear]=\"coerceConditionByColumn(column.sortDisableClear)\"\n [style.padding-inline.px]=\"column.borderSpacing\"\n [style.min-width]=\"_columnWidth(column.minWidth)\"\n [style.width]=\"_columnWidth(column.width)\"\n [style.max-width]=\"_columnWidth(column.maxWidth)\"\n [style.align-content]=\"column.alignVerHeader\"\n [style.justify-items]=\"column.alignHorHeader\"\n [class.g-table-align-center]=\"column.alignTextHeader === 'center'\"\n [class.g-table-align-end]=\"column.alignTextHeader === 'end'\"\n [class.g-table-align-start]=\"column.alignTextHeader === 'start'\"\n [class.g-table-align-left]=\"column.alignTextHeader === 'left'\"\n [class.g-table-align-right]=\"column.alignTextHeader === 'right'\"\n [class.g-table-align-justify]=\"column.alignTextHeader === 'justify'\"\n >\n @if (column.templateHeader) {\n <ng-container\n [ngTemplateOutlet]=\"column.templateHeader\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n } @else {\n <span\n [gTextEllipsis]=\"1\"\n [gTextEllipsisEnabled]=\"coerceConditionByColumn(column.slice)\"\n >\n {{ column.label }}\n </span>\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [style.padding-inline.px]=\"column.borderSpacing\"\n [style.min-width]=\"_columnWidth(column.minWidth)\"\n [style.width]=\"\n !!column.maxWidth && column.maxWidth !== '100%'\n ? '100%'\n : _columnWidth(column.width)\n \"\n [style.max-width]=\"_columnWidth(column.maxWidth)\"\n [style.align-content]=\"column.alignVerCell\"\n [style.justify-items]=\"column.alignHorCell\"\n [class.g-table-align-center]=\"column.alignTextCell === 'center'\"\n [class.g-table-align-end]=\"column.alignTextCell === 'end'\"\n [class.g-table-align-start]=\"column.alignTextCell === 'start'\"\n [class.g-table-align-left]=\"column.alignTextCell === 'left'\"\n [class.g-table-align-right]=\"column.alignTextCell === 'right'\"\n [class.g-table-align-justify]=\"column.alignTextCell === 'justify'\"\n (click)=\"columnCellAction(column, row, 'click')\"\n (dblclick)=\"columnCellAction(column, row, 'dblClick')\"\n (mouseenter)=\"columnCellAction(column, row, 'mouseEnter')\"\n (mouseleave)=\"columnCellAction(column, row, 'mouseLeave')\"\n >\n @if (column.templateCell) {\n <ng-container\n [ngTemplateOutlet]=\"column.templateCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n />\n } @else {\n <span\n [gTextEllipsis]=\"column.subValue ? 1 : 2\"\n [gTextEllipsisEnabled]=\"coerceConditionByRow(column.slice, row)\"\n >\n {{ columnCellValue(column, row) }}\n </span>\n\n @if (column.subValue) {\n <small\n [gTextEllipsis]=\"1\"\n [gTextEllipsisEnabled]=\"coerceConditionByRow(column.slice, row)\"\n >\n {{ columnCellSubValue(column, row) }}\n </small>\n }\n }\n </td>\n </ng-container>\n }\n\n <!-- Actions Column -->\n @if (actionsRef()) {\n <ng-container cdkColumnDef=\"actions\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [style.justify-items]=\"'center'\"\n [style.align-content]=\"'center'\"\n [style.text-align]=\"'center'\"\n [style.min-width]=\"_columnWidth(actionsMinWidth())\"\n [style.width]=\"_columnWidth(actionsWidth())\"\n [style.max-width]=\"_columnWidth(actionsMaxWidth())\"\n >\n A\u00E7\u00F5es\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [style.justify-items]=\"'center'\"\n [style.align-content]=\"'center'\"\n [style.min-width]=\"_columnWidth(actionsMinWidth())\"\n [style.width]=\"_columnWidth(actionsWidth())\"\n [style.max-width]=\"_columnWidth(actionsMaxWidth())\"\n >\n @if (!showActionsOnHover() || rowHovered() === row) {\n <ng-template\n [ngTemplateOutlet]=\"actionsRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n />\n } @else {\n &nbsp;\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (expandable() && expandDetailRef()) {\n <ng-container cdkColumnDef=\"expandedDetail\">\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"columnExpandDetailColspan\"\n style=\"padding: 0 !important\"\n >\n <div\n class=\"g-table-expand-detail-wrapper\"\n [class.g-table-expand-detail-wrapper-expanded]=\"expandedRows?.isSelected(row)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"expandDetailRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n ></ng-template>\n </div>\n </td>\n </ng-container>\n }\n\n <tr\n cdk-header-row\n *cdkHeaderRowDef=\"columnsToDisplay()\"\n class=\"g-table-header-row\"\n [class.hidden]=\"!showHeader()\"\n (focus)=\"menuContextHover = false; closeMenuContext()\"\n (mouseenter)=\"menuContextHover = false; closeMenuContext()\"\n ></tr>\n\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: columnsToDisplay()\"\n class=\"g-table-row\"\n [class.g-table-row-hover]=\"menuContextRow() === row\"\n [class.g-table-row-highlight]=\"isRowHighlightFn()(row)\"\n [style.display]=\"loading ? 'none' : 'table-row'\"\n (mousemove)=\"showMenuContext($event, row)\"\n (mouseenter)=\"rowHovered.set(row)\"\n (mouseleave)=\"rowHovered.set(null)\"\n (click)=\"onHandleClickRow(row)\"\n ></tr>\n\n @if (expandable()) {\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"g-table-expand-detail-row\"\n [class.g-table-expand-detail-row-expanded]=\"expandedRows?.isSelected(row)\"\n (focus)=\"menuContextHover = false; closeMenuContext()\"\n (mouseenter)=\"rowHovered.set(row); menuContextHover = false; closeMenuContext()\"\n (mouseleave)=\"rowHovered.set(null)\"\n ></tr>\n }\n</table>\n\n@if (loading) {\n <gipi-loading type=\"progress-bar\" />\n}\n\n@if (!loading && dataSource.data.length <= 0) {\n <gipi-empty />\n}\n\n@if (!loading && dataSource.data.length > 0) {\n <div\n #gTableFooter\n class=\"g-table-footer-row\"\n >\n @if (footerRef()) {\n <ng-template\n [ngTemplateOutlet]=\"footerRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: dataSource }\"\n />\n }\n\n @if (paginator()) {\n <mat-paginator\n class=\"g-table-paginator\"\n [disabled]=\"paginatorDisabled() || loading\"\n [hidePageSize]=\"paginatorHidePageSize()\"\n [length]=\"paginatorLength()\"\n [pageIndex]=\"paginatorPageNumber()\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"paginatorPageSizeOptions()\"\n [selectConfig]=\"{}\"\n [showFirstLastButtons]=\"true\"\n (page)=\"onHandlePage($event)\"\n />\n }\n </div>\n}\n\n@if (!loading && dataSource.data.length && (menuItemsContext().length > 0 || menuContextRef())) {\n <div\n #menuContextWrapper\n class=\"g-table-menu-context\"\n [attr.id]=\"'menuContext'\"\n [attr.role]=\"'menu'\"\n (mouseover)=\"menuContextHover = true\"\n (focus)=\"menuContextHover = true\"\n (mouseleave)=\"menuContextHover = false; closeMenuContext()\"\n (blur)=\"menuContextHover = false; closeMenuContext()\"\n >\n @if (menuItemsContext() && menuItemsContext().length > 0) {\n @for (menu of menuItemsContext(); track menu) {\n @if (coerceConditionByRow(menu.visible, menuContextRow())) {\n <button\n class=\"g-table-menu-item-context\"\n [class.g-table-menu-item-context-show-tag-new]=\"\n coerceConditionByRow(menu.showTagNew, menuContextRow())\n \"\n [attr.id]=\"menu.id\"\n [name]=\"menu.name\"\n [tabIndex]=\"$index\"\n [gTooltip]=\"menu.tooltip\"\n [gTooltipPosition]=\"'below'\"\n (click)=\"\n menu?.action(menuContextRow()!);\n menuContextHover = false;\n closeMenuContext()\n \"\n >\n @if (menu.icon || menu.svgIcon) {\n <gipi-icon\n class=\"g-button-icon\"\n [size]=\"22\"\n [icon]=\"menu.icon\"\n [svgIcon]=\"menu.svgIcon\"\n [fontSet]=\"menu.iconFontSet\"\n [variation]=\"menu.iconVariation\"\n [weight]=\"menu.iconWeight\"\n [grade]=\"menu.iconGrade\"\n [optical]=\"menu.iconOptical\"\n />\n }\n </button>\n }\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"menuContextRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: menuContextRow() }\"\n />\n }\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i2$4.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2$4.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$4.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$4.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$4.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$4.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2$4.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2$4.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2$4.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2$4.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: TextEllipsisModule }, { kind: "directive", type: TextEllipsisDirective, selector: "[gTextEllipsis]", inputs: ["gTextEllipsis", "gTextEllipsisEnabled"], exportAs: ["gTextEllipsis"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: TooltipDirective, selector: "[gTooltip]", inputs: ["gTooltip", "gTooltipPosition", "gTooltipDisabled", "gTooltipShowDelay", "gTooltipHideDelay"], exportAs: ["gTooltip"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: Checkbox, selector: "gipi-checkbox", inputs: ["label", "help", "variant", "checked", "indeterminate"], outputs: ["indeterminateChange", "change", "focus", "blur"], exportAs: ["gCheckbox"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: Icon, selector: "gipi-icon", inputs: ["id", "name", "class", "style", "variation", "weight", "grade", "optical", "inline", "aria-label", "tooltip", "icon", "svgIcon", "size", "color", "fontSet"], exportAs: ["gIcon"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: Loading, selector: "gipi-loading", inputs: ["id", "name", "variant", "type"], exportAs: ["gLoading"] }, { kind: "ngmodule", type: EmptyModule }, { kind: "component", type: Empty, selector: "gipi-empty", inputs: ["id", "name", "label"], exportAs: ["gEmpty"] }] }); }
20818
21010
  }
20819
21011
  __decorate([
20820
21012
  Debounce(50)
@@ -20843,7 +21035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
20843
21035
  IconModule,
20844
21036
  LoadingModule,
20845
21037
  EmptyModule,
20846
- ], template: "<table\n #gTable\n class=\"g-table-content\"\n tabindex=\"-1\"\n cdk-table\n [dataSource]=\"dataSource\"\n [trackBy]=\"trackByFn()\"\n [multiTemplateDataRows]=\"expandable()\"\n matSort\n [matSortActive]=\"matSortActive()\"\n [matSortDirection]=\"_matSortDirection\"\n [matSortDisableClear]=\"matSortDisableClear()\"\n [matSortDisabled]=\"matSortDisabled()\"\n [matSortStart]=\"_matSortStart\"\n (matSortChange)=\"onHandleSort($event)\"\n (mouseleave)=\"menuContextHover = false; closeMenuContext()\"\n (blur)=\"menuContextHover = false; closeMenuContext()\"\n>\n <!-- Expand Column -->\n @if (expandable()) {\n <ng-container cdkColumnDef=\"expand\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"g-table-column-fixed-wrapper\"\n >\n @if (expandAllEnabled() && multiExpandable()) {\n <button\n type=\"button\"\n class=\"g-table-button-expand g-table-button-expand-all\"\n [class.g-table-button-expanded]=\"\n expandedRows?.hasValue() && isAllExpanded()\n \"\n (click)=\"onHandleToggleExpandAll()\"\n >\n <gipi-icon\n [icon]=\"isAllExpanded() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"\n />\n </button>\n } @else {\n &nbsp;\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n class=\"g-table-column-fixed-wrapper\"\n >\n <button\n mat-icon-button\n aria-label=\"expand row\"\n class=\"g-table-button-expand\"\n [class.g-table-button-expanded]=\"expandedRows?.isSelected(row)\"\n [disabled]=\"!isRowExpandableFn()(row)\"\n (click)=\"expandedRows?.toggle(row); $event.stopPropagation()\"\n >\n <gipi-icon\n [icon]=\"\n expandedRows?.isSelected(row)\n ? 'keyboard_arrow_up'\n : 'keyboard_arrow_down'\n \"\n />\n </button>\n </td>\n </ng-container>\n }\n\n <!-- Checkbox Column -->\n @if (selectable()) {\n <ng-container cdkColumnDef=\"select\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"g-table-column-fixed-wrapper\"\n >\n @if (selectAllEnabled() && multiSelectable()) {\n <gipi-checkbox\n [variant]=\"'primary'\"\n [checked]=\"selectedRows?.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectedRows?.hasValue() && !isAllSelected()\"\n (change)=\"onHandleToggleSelectAll()\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n &nbsp;\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n class=\"g-table-column-fixed-wrapper\"\n >\n <gipi-checkbox\n [variant]=\"'secondary'\"\n [disabled]=\"!isRowSelectableFn()(row)\"\n [checked]=\"selectedRows?.isSelected(row)\"\n (change)=\"onHandleSelectRow(row)\"\n (click)=\"$event.stopPropagation()\"\n />\n </td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (column of columns; track column) {\n <ng-container [cdkColumnDef]=\"column.property\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [mat-sort-header]=\"column.property\"\n [disabled]=\"!coerceConditionByColumn(column.sortable)\"\n [disableClear]=\"coerceConditionByColumn(column.sortDisableClear)\"\n [style.padding-inline.px]=\"column.borderSpacing\"\n [style.min-width]=\"_columnWidth(column.minWidth)\"\n [style.width]=\"_columnWidth(column.width)\"\n [style.max-width]=\"_columnWidth(column.maxWidth)\"\n [style.align-content]=\"column.alignVerHeader\"\n [style.justify-items]=\"column.alignHorHeader\"\n [class.g-table-align-center]=\"column.alignTextHeader === 'center'\"\n [class.g-table-align-end]=\"column.alignTextHeader === 'end'\"\n [class.g-table-align-start]=\"column.alignTextHeader === 'start'\"\n [class.g-table-align-left]=\"column.alignTextHeader === 'left'\"\n [class.g-table-align-right]=\"column.alignTextHeader === 'right'\"\n [class.g-table-align-justify]=\"column.alignTextHeader === 'justify'\"\n >\n @if (column.templateHeader) {\n <ng-container\n [ngTemplateOutlet]=\"column.templateHeader\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n } @else {\n <span\n [gTextEllipsis]=\"1\"\n [gTextEllipsisEnabled]=\"coerceConditionByColumn(column.slice)\"\n >\n {{ column.label }}\n </span>\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [style.padding-inline.px]=\"column.borderSpacing\"\n [style.min-width]=\"_columnWidth(column.minWidth)\"\n [style.width]=\"\n !!column.maxWidth && column.maxWidth !== '100%'\n ? '100%'\n : _columnWidth(column.width)\n \"\n [style.max-width]=\"_columnWidth(column.maxWidth)\"\n [style.align-content]=\"column.alignVerCell\"\n [style.justify-items]=\"column.alignHorCell\"\n [class.g-table-align-center]=\"column.alignTextCell === 'center'\"\n [class.g-table-align-end]=\"column.alignTextCell === 'end'\"\n [class.g-table-align-start]=\"column.alignTextCell === 'start'\"\n [class.g-table-align-left]=\"column.alignTextCell === 'left'\"\n [class.g-table-align-right]=\"column.alignTextCell === 'right'\"\n [class.g-table-align-justify]=\"column.alignTextCell === 'justify'\"\n (click)=\"columnCellAction(column, row, 'click')\"\n (dblclick)=\"columnCellAction(column, row, 'dblClick')\"\n (mouseenter)=\"columnCellAction(column, row, 'mouseEnter')\"\n (mouseleave)=\"columnCellAction(column, row, 'mouseLeave')\"\n >\n @if (column.templateCell) {\n <ng-container\n [ngTemplateOutlet]=\"column.templateCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n />\n } @else {\n <span\n [gTextEllipsis]=\"column.subValue ? 1 : 2\"\n [gTextEllipsisEnabled]=\"coerceConditionByRow(column.slice, row)\"\n >\n {{ columnCellValue(column, row) }}\n </span>\n\n @if (column.subValue) {\n <small\n [gTextEllipsis]=\"1\"\n [gTextEllipsisEnabled]=\"coerceConditionByRow(column.slice, row)\"\n >\n {{ columnCellSubValue(column, row) }}\n </small>\n }\n }\n </td>\n </ng-container>\n }\n\n <!-- Actions Column -->\n @if (actionsRef()) {\n <ng-container cdkColumnDef=\"actions\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [style.justify-items]=\"'center'\"\n [style.align-content]=\"'center'\"\n [style.text-align]=\"'center'\"\n [style.min-width]=\"_columnWidth(actionsMinWidth())\"\n [style.width]=\"_columnWidth(actionsWidth())\"\n [style.max-width]=\"_columnWidth(actionsMaxWidth())\"\n >\n A\u00E7\u00F5es\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [style.justify-items]=\"'center'\"\n [style.align-content]=\"'center'\"\n [style.min-width]=\"_columnWidth(actionsMinWidth())\"\n [style.width]=\"_columnWidth(actionsWidth())\"\n [style.max-width]=\"_columnWidth(actionsMaxWidth())\"\n >\n @if (!showActionsOnHover() || rowHovered() === row) {\n <ng-template\n [ngTemplateOutlet]=\"actionsRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n />\n } @else {\n &nbsp;\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (expandable() && expandDetailRef()) {\n <ng-container cdkColumnDef=\"expandedDetail\">\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"columnExpandDetailColspan\"\n style=\"padding: 0 !important\"\n >\n <div\n class=\"g-table-expand-detail-wrapper\"\n [class.g-table-expand-detail-wrapper-expanded]=\"expandedRows?.isSelected(row)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"expandDetailRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n ></ng-template>\n </div>\n </td>\n </ng-container>\n }\n\n <tr\n cdk-header-row\n *cdkHeaderRowDef=\"columnsToDisplay()\"\n class=\"g-table-header-row\"\n [class.hidden]=\"!showHeader()\"\n (focus)=\"menuContextHover = false; closeMenuContext()\"\n (mouseenter)=\"menuContextHover = false; closeMenuContext()\"\n ></tr>\n\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: columnsToDisplay()\"\n class=\"g-table-row\"\n [class.g-table-row-hover]=\"menuContextRow() === row\"\n [class.g-table-row-highlight]=\"isRowHighlightFn()(row)\"\n [style.display]=\"loading ? 'none' : 'table-row'\"\n (mousemove)=\"showMenuContext($event, row)\"\n (mouseenter)=\"rowHovered.set(row)\"\n (mouseleave)=\"rowHovered.set(null)\"\n (click)=\"onHandleClickRow(row)\"\n ></tr>\n\n @if (expandable()) {\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"g-table-expand-detail-row\"\n [class.g-table-expand-detail-row-expanded]=\"expandedRows?.isSelected(row)\"\n (focus)=\"menuContextHover = false; closeMenuContext()\"\n (mouseenter)=\"rowHovered.set(row); menuContextHover = false; closeMenuContext()\"\n (mouseleave)=\"rowHovered.set(null)\"\n ></tr>\n }\n</table>\n\n@if (loading) {\n <gipi-loading type=\"progress-bar\" />\n}\n\n@if (!loading && dataSource.data.length <= 0) {\n <gipi-empty />\n}\n\n@if (!loading && dataSource.data.length > 0) {\n <div\n #gTableFooter\n class=\"g-table-footer-row\"\n >\n @if (footerRef()) {\n <ng-template\n [ngTemplateOutlet]=\"footerRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: dataSource }\"\n />\n }\n\n @if (paginator()) {\n <mat-paginator\n class=\"g-table-paginator\"\n [disabled]=\"paginatorDisabled() || loading\"\n [hidePageSize]=\"paginatorHidePageSize()\"\n [length]=\"paginatorLength()\"\n [pageIndex]=\"paginatorPageNumber()\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"paginatorPageSizeOptions()\"\n [selectConfig]=\"{}\"\n [showFirstLastButtons]=\"true\"\n (page)=\"onHandlePage($event)\"\n />\n }\n </div>\n}\n\n@if (!loading && dataSource.data.length && (menuItemsContext().length > 0 || menuContextRef())) {\n <div\n #menuContextWrapper\n class=\"g-table-menu-context\"\n [attr.id]=\"'menuContext'\"\n [attr.role]=\"'menu'\"\n (mouseover)=\"menuContextHover = true\"\n (focus)=\"menuContextHover = true\"\n (mouseleave)=\"menuContextHover = false; closeMenuContext()\"\n (blur)=\"menuContextHover = false; closeMenuContext()\"\n >\n @if (menuItemsContext() && menuItemsContext().length > 0) {\n @for (menu of menuItemsContext(); track menu) {\n @if (coerceConditionByRow(menu.visible, menuContextRow())) {\n <button\n class=\"g-table-menu-item-context\"\n [class.g-table-menu-item-context-show-tag-new]=\"\n coerceConditionByRow(menu.showTagNew, menuContextRow())\n \"\n [attr.id]=\"menu.id\"\n [name]=\"menu.name\"\n [tabIndex]=\"$index\"\n [gTooltip]=\"menu.tooltip\"\n [gTooltipPosition]=\"'below'\"\n (click)=\"\n menu?.action(menuContextRow()!);\n menuContextHover = false;\n closeMenuContext()\n \"\n >\n @if (menu.icon || menu.svgIcon) {\n <gipi-icon\n class=\"g-button-icon\"\n [size]=\"22\"\n [icon]=\"menu.icon\"\n [svgIcon]=\"menu.svgIcon\"\n [fontSet]=\"menu.iconFontSet\"\n [variation]=\"menu.iconVariation\"\n [weight]=\"menu.iconWeight\"\n [grade]=\"menu.iconGrade\"\n [optical]=\"menu.iconOptical\"\n />\n }\n </button>\n }\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"menuContextRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: menuContextRow() }\"\n />\n }\n </div>\n}\n" }]
21038
+ ], template: "<table\n #gTable\n class=\"g-table-content\"\n tabindex=\"-1\"\n cdk-table\n [dataSource]=\"dataSource\"\n [trackBy]=\"trackByFn()\"\n [multiTemplateDataRows]=\"expandable()\"\n matSort\n [matSortActive]=\"matSortActive()\"\n [matSortDirection]=\"_matSortDirection\"\n [matSortDisableClear]=\"matSortDisableClear()\"\n [matSortDisabled]=\"matSortDisabled()\"\n [matSortStart]=\"_matSortStart\"\n (matSortChange)=\"onHandleSort($event)\"\n (mouseleave)=\"menuContextHover = false; closeMenuContext()\"\n (blur)=\"menuContextHover = false; closeMenuContext()\"\n>\n <!-- Expand Column -->\n @if (expandable()) {\n <ng-container cdkColumnDef=\"expand\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"g-table-column-fixed-wrapper\"\n >\n @if (expandAllEnabled() && multiExpandable()) {\n <button\n type=\"button\"\n class=\"g-table-button-expand g-table-button-expand-all\"\n [class.g-table-button-expanded]=\"\n expandedRows?.hasValue() && isAllExpanded()\n \"\n (click)=\"onHandleToggleExpandAll(); $event.stopPropagation()\"\n >\n <gipi-icon\n [icon]=\"isAllExpanded() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"\n />\n </button>\n } @else {\n &nbsp;\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n class=\"g-table-column-fixed-wrapper\"\n >\n <button\n mat-icon-button\n aria-label=\"expand row\"\n class=\"g-table-button-expand\"\n [class.g-table-button-expanded]=\"expandedRows?.isSelected(row)\"\n [disabled]=\"!isRowExpandableFn()(row)\"\n (click)=\"onHandleExpandRow(row); $event.stopPropagation()\"\n >\n <gipi-icon\n [icon]=\"\n expandedRows?.isSelected(row)\n ? 'keyboard_arrow_up'\n : 'keyboard_arrow_down'\n \"\n />\n </button>\n </td>\n </ng-container>\n }\n\n <!-- Checkbox Column -->\n @if (selectable()) {\n <ng-container cdkColumnDef=\"select\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"g-table-column-fixed-wrapper\"\n >\n @if (selectAllEnabled() && multiSelectable()) {\n <gipi-checkbox\n [variant]=\"'primary'\"\n [checked]=\"selectedRows?.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectedRows?.hasValue() && !isAllSelected()\"\n (change)=\"onHandleToggleSelectAll()\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n &nbsp;\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n class=\"g-table-column-fixed-wrapper\"\n >\n <gipi-checkbox\n [variant]=\"'secondary'\"\n [disabled]=\"!isRowSelectableFn()(row)\"\n [checked]=\"selectedRows?.isSelected(row)\"\n (change)=\"onHandleSelectRow(row)\"\n (click)=\"$event.stopPropagation()\"\n />\n </td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (column of columns; track column) {\n <ng-container [cdkColumnDef]=\"column.property\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [mat-sort-header]=\"column.property\"\n [disabled]=\"!coerceConditionByColumn(column.sortable)\"\n [disableClear]=\"coerceConditionByColumn(column.sortDisableClear)\"\n [style.padding-inline.px]=\"column.borderSpacing\"\n [style.min-width]=\"_columnWidth(column.minWidth)\"\n [style.width]=\"_columnWidth(column.width)\"\n [style.max-width]=\"_columnWidth(column.maxWidth)\"\n [style.align-content]=\"column.alignVerHeader\"\n [style.justify-items]=\"column.alignHorHeader\"\n [class.g-table-align-center]=\"column.alignTextHeader === 'center'\"\n [class.g-table-align-end]=\"column.alignTextHeader === 'end'\"\n [class.g-table-align-start]=\"column.alignTextHeader === 'start'\"\n [class.g-table-align-left]=\"column.alignTextHeader === 'left'\"\n [class.g-table-align-right]=\"column.alignTextHeader === 'right'\"\n [class.g-table-align-justify]=\"column.alignTextHeader === 'justify'\"\n >\n @if (column.templateHeader) {\n <ng-container\n [ngTemplateOutlet]=\"column.templateHeader\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n } @else {\n <span\n [gTextEllipsis]=\"1\"\n [gTextEllipsisEnabled]=\"coerceConditionByColumn(column.slice)\"\n >\n {{ column.label }}\n </span>\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [style.padding-inline.px]=\"column.borderSpacing\"\n [style.min-width]=\"_columnWidth(column.minWidth)\"\n [style.width]=\"\n !!column.maxWidth && column.maxWidth !== '100%'\n ? '100%'\n : _columnWidth(column.width)\n \"\n [style.max-width]=\"_columnWidth(column.maxWidth)\"\n [style.align-content]=\"column.alignVerCell\"\n [style.justify-items]=\"column.alignHorCell\"\n [class.g-table-align-center]=\"column.alignTextCell === 'center'\"\n [class.g-table-align-end]=\"column.alignTextCell === 'end'\"\n [class.g-table-align-start]=\"column.alignTextCell === 'start'\"\n [class.g-table-align-left]=\"column.alignTextCell === 'left'\"\n [class.g-table-align-right]=\"column.alignTextCell === 'right'\"\n [class.g-table-align-justify]=\"column.alignTextCell === 'justify'\"\n (click)=\"columnCellAction(column, row, 'click')\"\n (dblclick)=\"columnCellAction(column, row, 'dblClick')\"\n (mouseenter)=\"columnCellAction(column, row, 'mouseEnter')\"\n (mouseleave)=\"columnCellAction(column, row, 'mouseLeave')\"\n >\n @if (column.templateCell) {\n <ng-container\n [ngTemplateOutlet]=\"column.templateCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n />\n } @else {\n <span\n [gTextEllipsis]=\"column.subValue ? 1 : 2\"\n [gTextEllipsisEnabled]=\"coerceConditionByRow(column.slice, row)\"\n >\n {{ columnCellValue(column, row) }}\n </span>\n\n @if (column.subValue) {\n <small\n [gTextEllipsis]=\"1\"\n [gTextEllipsisEnabled]=\"coerceConditionByRow(column.slice, row)\"\n >\n {{ columnCellSubValue(column, row) }}\n </small>\n }\n }\n </td>\n </ng-container>\n }\n\n <!-- Actions Column -->\n @if (actionsRef()) {\n <ng-container cdkColumnDef=\"actions\">\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [style.justify-items]=\"'center'\"\n [style.align-content]=\"'center'\"\n [style.text-align]=\"'center'\"\n [style.min-width]=\"_columnWidth(actionsMinWidth())\"\n [style.width]=\"_columnWidth(actionsWidth())\"\n [style.max-width]=\"_columnWidth(actionsMaxWidth())\"\n >\n A\u00E7\u00F5es\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [style.justify-items]=\"'center'\"\n [style.align-content]=\"'center'\"\n [style.min-width]=\"_columnWidth(actionsMinWidth())\"\n [style.width]=\"_columnWidth(actionsWidth())\"\n [style.max-width]=\"_columnWidth(actionsMaxWidth())\"\n >\n @if (!showActionsOnHover() || rowHovered() === row) {\n <ng-template\n [ngTemplateOutlet]=\"actionsRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n />\n } @else {\n &nbsp;\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (expandable() && expandDetailRef()) {\n <ng-container cdkColumnDef=\"expandedDetail\">\n <td\n cdk-cell\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"columnExpandDetailColspan\"\n style=\"padding: 0 !important\"\n >\n <div\n class=\"g-table-expand-detail-wrapper\"\n [class.g-table-expand-detail-wrapper-expanded]=\"expandedRows?.isSelected(row)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"expandDetailRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n ></ng-template>\n </div>\n </td>\n </ng-container>\n }\n\n <tr\n cdk-header-row\n *cdkHeaderRowDef=\"columnsToDisplay()\"\n class=\"g-table-header-row\"\n [class.hidden]=\"!showHeader()\"\n (focus)=\"menuContextHover = false; closeMenuContext()\"\n (mouseenter)=\"menuContextHover = false; closeMenuContext()\"\n ></tr>\n\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: columnsToDisplay()\"\n class=\"g-table-row\"\n [class.g-table-row-hover]=\"menuContextRow() === row\"\n [class.g-table-row-highlight]=\"isRowHighlightFn()(row)\"\n [style.display]=\"loading ? 'none' : 'table-row'\"\n (mousemove)=\"showMenuContext($event, row)\"\n (mouseenter)=\"rowHovered.set(row)\"\n (mouseleave)=\"rowHovered.set(null)\"\n (click)=\"onHandleClickRow(row)\"\n ></tr>\n\n @if (expandable()) {\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"g-table-expand-detail-row\"\n [class.g-table-expand-detail-row-expanded]=\"expandedRows?.isSelected(row)\"\n (focus)=\"menuContextHover = false; closeMenuContext()\"\n (mouseenter)=\"rowHovered.set(row); menuContextHover = false; closeMenuContext()\"\n (mouseleave)=\"rowHovered.set(null)\"\n ></tr>\n }\n</table>\n\n@if (loading) {\n <gipi-loading type=\"progress-bar\" />\n}\n\n@if (!loading && dataSource.data.length <= 0) {\n <gipi-empty />\n}\n\n@if (!loading && dataSource.data.length > 0) {\n <div\n #gTableFooter\n class=\"g-table-footer-row\"\n >\n @if (footerRef()) {\n <ng-template\n [ngTemplateOutlet]=\"footerRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: dataSource }\"\n />\n }\n\n @if (paginator()) {\n <mat-paginator\n class=\"g-table-paginator\"\n [disabled]=\"paginatorDisabled() || loading\"\n [hidePageSize]=\"paginatorHidePageSize()\"\n [length]=\"paginatorLength()\"\n [pageIndex]=\"paginatorPageNumber()\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"paginatorPageSizeOptions()\"\n [selectConfig]=\"{}\"\n [showFirstLastButtons]=\"true\"\n (page)=\"onHandlePage($event)\"\n />\n }\n </div>\n}\n\n@if (!loading && dataSource.data.length && (menuItemsContext().length > 0 || menuContextRef())) {\n <div\n #menuContextWrapper\n class=\"g-table-menu-context\"\n [attr.id]=\"'menuContext'\"\n [attr.role]=\"'menu'\"\n (mouseover)=\"menuContextHover = true\"\n (focus)=\"menuContextHover = true\"\n (mouseleave)=\"menuContextHover = false; closeMenuContext()\"\n (blur)=\"menuContextHover = false; closeMenuContext()\"\n >\n @if (menuItemsContext() && menuItemsContext().length > 0) {\n @for (menu of menuItemsContext(); track menu) {\n @if (coerceConditionByRow(menu.visible, menuContextRow())) {\n <button\n class=\"g-table-menu-item-context\"\n [class.g-table-menu-item-context-show-tag-new]=\"\n coerceConditionByRow(menu.showTagNew, menuContextRow())\n \"\n [attr.id]=\"menu.id\"\n [name]=\"menu.name\"\n [tabIndex]=\"$index\"\n [gTooltip]=\"menu.tooltip\"\n [gTooltipPosition]=\"'below'\"\n (click)=\"\n menu?.action(menuContextRow()!);\n menuContextHover = false;\n closeMenuContext()\n \"\n >\n @if (menu.icon || menu.svgIcon) {\n <gipi-icon\n class=\"g-button-icon\"\n [size]=\"22\"\n [icon]=\"menu.icon\"\n [svgIcon]=\"menu.svgIcon\"\n [fontSet]=\"menu.iconFontSet\"\n [variation]=\"menu.iconVariation\"\n [weight]=\"menu.iconWeight\"\n [grade]=\"menu.iconGrade\"\n [optical]=\"menu.iconOptical\"\n />\n }\n </button>\n }\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"menuContextRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: menuContextRow() }\"\n />\n }\n </div>\n}\n" }]
20847
21039
  }], ctorParameters: () => [], propDecorators: { tableFooterRef: [{
20848
21040
  type: ViewChild,
20849
21041
  args: ['gTableFooter', { read: ElementRef }]
@@ -20874,7 +21066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
20874
21066
  }], menuItemsContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItemsContext", required: false }] }], loading: [{
20875
21067
  type: Input$1,
20876
21068
  args: [{ transform: booleanAttribute }]
20877
- }], expandedRowsChange: [{ type: i0.Output, args: ["expandedRowsChange"] }], onExpandedRows: [{ type: i0.Output, args: ["onExpandedRows"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }], onSelectedRows: [{ type: i0.Output, args: ["onSelectedRows"] }], onSelectRow: [{ type: i0.Output, args: ["onSelectRow"] }], onSort: [{ type: i0.Output, args: ["onSort"] }], onPage: [{ type: i0.Output, args: ["onPage"] }], onClickRow: [{ type: i0.Output, args: ["onClickRow"] }], closeMenuContext: [] } });
21069
+ }], expandedRowsChange: [{ type: i0.Output, args: ["expandedRowsChange"] }], onExpandedRows: [{ type: i0.Output, args: ["onExpandedRows"] }], onExpandRow: [{ type: i0.Output, args: ["onExpandRow"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }], onSelectedRows: [{ type: i0.Output, args: ["onSelectedRows"] }], onSelectRow: [{ type: i0.Output, args: ["onSelectRow"] }], onSort: [{ type: i0.Output, args: ["onSort"] }], onPage: [{ type: i0.Output, args: ["onPage"] }], onClickRow: [{ type: i0.Output, args: ["onClickRow"] }], closeMenuContext: [] } });
20878
21070
  class TableModule {
20879
21071
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
20880
21072
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TableModule, imports: [Table], exports: [Table] }); }
@@ -22973,7 +23165,8 @@ class DialogConfig {
22973
23165
  this.restoreFocus = true;
22974
23166
  /**
22975
23167
  * Se o dialog deve fechar quando o usuário retrocede/avança no histórico.
22976
- * Observe que isso geralmente não inclui clicar em links (a menos que o usuário esteja usando a `HashLocationStrategy`).
23168
+ * Observe que isso geralmente não inclui clicar em links (a menos que o usuário esteja usando a
23169
+ * `HashLocationStrategy`).
22977
23170
  */
22978
23171
  this.closeOnNavigation = true;
22979
23172
  Object.assign(this, dialogConfig);
@@ -22992,7 +23185,8 @@ class DialogService {
22992
23185
  * @template TResult Tipo do valor retornado quando o dialog é fechado (`dialogRef.close(value)`).
22993
23186
  *
22994
23187
  * @param componentRef Componente que será exibido dentro do dialog.
22995
- * @param data Dados a serem injetados no dialog. Serão acessíveis no construtor do componente via `@Inject(MAT_DIALOG_DATA)`.
23188
+ * @param data Dados a serem injetados no dialog. Serão acessíveis no construtor do componente via
23189
+ * `@Inject(MAT_DIALOG_DATA)`.
22996
23190
  * @param dialogConfig Configurações opcionais de aparência, comportamento e posicionamento do dialog.
22997
23191
  *
22998
23192
  * @returns Uma referência do `MatDialogRef`.