date-picker

1import { DatePipe } from '@angular/common';
2import {
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  forwardRef,
7  inject,
8  input,
9  model,
10  output,
11  viewChild,
12  ViewEncapsulation,
13  type TemplateRef,
14} from '@angular/core';
15import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
16 
17import { NgIcon, provideIcons } from '@ng-icons/core';
18import { lucideCalendar } from '@ng-icons/lucide';
19import type { ClassValue } from 'clsx';
20 
21import { ZardButtonComponent, type ZardButtonTypeVariants } from '@/shared/components/button';
22import { ZardCalendarComponent } from '@/shared/components/calendar';
23import type { ZardDatePickerSizeVariants } from '@/shared/components/date-picker/date-picker.variants';
24import { ZardPopoverComponent, ZardPopoverDirective } from '@/shared/components/popover';
25import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
26 
27/**
28 * Height overrides for date-picker sizes.
29 *
30 * These heights intentionally differ from button size variants to accommodate
31 * the date-picker UI:
32 * - default: h-9 (vs button h-8)
33 * - lg: h-11 (vs button h-9)
34 *
35 * The `mergeClasses` utility (tailwind-merge) resolves class conflicts,
36 * allowing these values to override the base button heights defined in
37 * `ZardDatePickerSizeVariants`.
38 */
39const HEIGHT_BY_SIZE: Record<ZardDatePickerSizeVariants, string> = {
40  xs: 'h-7',
41  sm: 'h-8',
42  default: 'h-9',
43  lg: 'h-11',
44};
45 
46@Component({
47  selector: 'z-date-picker, [z-date-picker]',
48  imports: [NgIcon, ZardButtonComponent, ZardCalendarComponent, ZardPopoverComponent, ZardPopoverDirective],
49  template: `
50    <button
51      z-button
52      type="button"
53      [zType]="zType()"
54      [zSize]="zSize()"
55      [disabled]="disabled()"
56      [class]="buttonClasses()"
57      zPopover
58      #popoverDirective="zPopover"
59      [zContent]="calendarTemplate"
60      zTrigger="click"
61      (zVisibleChange)="onPopoverVisibilityChange($event)"
62      [attr.aria-expanded]="false"
63      [attr.aria-haspopup]="true"
64      aria-label="Choose date"
65    >
66      <ng-icon name="lucideCalendar" class="size-4!" />
67      <span [class]="textClasses()">
68        {{ displayText() }}
69      </span>
70    </button>
71 
72    <ng-template #calendarTemplate>
73      <z-popover [class]="popoverClasses()">
74        <z-calendar
75          #calendar
76          class="border-0"
77          [value]="value()"
78          [minDate]="minDate()"
79          [maxDate]="maxDate()"
80          [disabled]="disabled()"
81// … truncated