import { default as dayjs, Dayjs } from 'dayjs'; import { PropertyValueMap } from 'lit'; import { DdsElement } from '../../internal/dds-hu-element'; import { default as DapDSCalendarCell } from './calendar-cell.component'; /** * `dap-ds-calendar` * @summary A calendar is a visual representation of dates. It allows users to select a date. * @element dap-ds-calendar * @title - Calendar * * @event {{ value: Dayjs }} dds-change - Fired when the calendar value changes. * * @slot - The content of the calendar. * * @csspart base - The main calendar container. * @csspart calendar-header - The header of the calendar. * @csspart body - The body of the calendar. * @csspart calendar-grid-header - The header of the calendar grid. * @csspart calendar-grid-header-cell - The header cell of the calendar grid. * @csspart calendar-grid-cell - The cell of the calendar grid. * @csspart calendar-header-button-prev - The previous month button of the calendar header. * @csspart calendar-header-button-next - The next month button of the calendar header. * @csspart calendar-header-year-select - The year select of the calendar header. * @csspart calendar-header-month-select - The month select of the calendar header. * * @cssproperty --dds-calendar-display - The display property of the calendar container (default: flex) * @cssproperty --dds-calendar-isolation - The isolation property of the calendar (default: isolate) * @cssproperty --dds-calendar-block-display - The display property of the calendar block (default: block) * @cssproperty --dds-calendar-transition - The transition property for the calendar (default: all 0.2s ease-in-out) * @cssproperty --dds-calendar-header-display - The display property of the calendar header (default: grid) * @cssproperty --dds-calendar-header-grid-flow - The grid-auto-flow property of the calendar header (default: column) * @cssproperty --dds-calendar-header-width - The width of the calendar header (default: 100%) * @cssproperty --dds-calendar-header-gap - The gap between header items (default: var(--dds-spacing-100)) * @cssproperty --dds-calendar-select-min-height - The minimum height of the select trigger (default: auto) * @cssproperty --dds-calendar-select-max-height - The maximum height of the select trigger (default: 32px) * @cssproperty --dds-calendar-select-padding - The padding of the select trigger (default: var(--dds-spacing-200)) * @cssproperty --dds-calendar-select-border-radius - The border radius of the select trigger (default: var(--dds-radius-rounded)) * @cssproperty --dds-calendar-select-border-color - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive)) * @cssproperty --dds-calendar-select-background - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled)) * @cssproperty --dds-calendar-select-color - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled)) * @cssproperty --dds-calendar-select-font-size - The font size of the select trigger (default: var(--dds-font-sm)) * @cssproperty --dds-calendar-select-font-style - The font style of the select trigger (default: normal) * @cssproperty --dds-calendar-select-font-weight - The font weight of the select trigger (default: var(--dds-font-weight-bold)) * @cssproperty --dds-calendar-nav-button-margin - The margin of the navigation buttons (default: var(--dds-spacing-200)) * @cssproperty --dds-calendar-nav-button-color - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled)) */ export default class DapDSCalendar extends DdsElement { private readonly cells; private readonly monthSelect; /** The mode of the calendar - single date or range selection. * @type {'single' | 'range'} * @default 'single' */ mode: 'single' | 'range'; /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.*/ hideAdjacentMonths: boolean; /** The value of the calendar. * @type {Dayjs} */ value?: Dayjs; /** The start date of the range selection (only used in range mode). * @type {Dayjs} */ rangeStart?: Dayjs; /** The end date of the range selection (only used in range mode). * @type {Dayjs} */ rangeEnd?: Dayjs; /** The current visible date of the calendar. Only the month and year are considered. * @type {Dayjs} * @default dayjs() */ currentDate: dayjs.Dayjs; /** The minimum date of the calendar. Only the month and year are considered. * @type {Dayjs} * @default dayjs().subtract(50, 'year') */ minDate: dayjs.Dayjs; /** The maximum date of the calendar. Only the month and year are considered. * @type {Dayjs} * @default dayjs().add(50, 'year') */ maxDate: dayjs.Dayjs; /** The function to determine if the date is disabled. * @type {Function} * @default () => false */ disabledDate: (date: Dayjs) => boolean; /** The locale of the calendar. * @type {'hu' | 'en' | 'de'} * @default dayjs.locale() */ locale: string; private _currentCell; private _yearOptionsLoaded; private instanceLocalData; connectedCallback(): Promise; static readonly styles: import('lit').CSSResult; get startDate(): dayjs.Dayjs; get endDate(): dayjs.Dayjs; get shouldHideAdjacentMonths(): boolean; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; protected updated(_changedProperties: PropertyValueMap | Map): void; attributeChangedCallback(name: string, _old: string | null, value: string | null): void; private readonly updateLocale; private readonly updateLocaleFromHtml; setValue(value?: Dayjs, setFocus?: boolean): void; private readonly getWeeksInMonth; private loadYearOptions; isOutOfRange(currentDate: Dayjs, date: Dayjs): boolean; isToday(date: Dayjs): boolean; isSelected(date: Dayjs): boolean; isRangeStart(date: Dayjs): boolean; isRangeEnd(date: Dayjs): boolean; isInRange(date: Dayjs): boolean; getDatesInWeek(week: number, from: Dayjs): dayjs.Dayjs[]; isDateInAllowedRange(date: Dayjs): boolean; isMonthInAllowedRange(year: number, month: number): boolean; isDateInAllowedRangeByDate(year: number, month: number, date: number): boolean; getAllowedMonths(currentDate: Dayjs): string[]; setMonth(month: number): void; setDay(day: number): void; setYear(year: number): void; setSelectedDate(date: Dayjs): void; getFirstDayOfMonthCell(): DapDSCalendarCell | undefined; getCellByDate(date: Dayjs): DapDSCalendarCell | undefined; handleKeyDown(event: KeyboardEvent): void; setCurrentCell(cell: DapDSCalendarCell, setFocus?: boolean): void; setFocusToCurrentCell(): void; setToFirstDayOfMonth(): void; setToToday(): void; setToFirstAllowedDayOfMonth(currentDate?: dayjs.Dayjs): void; focusNextCell(element: DapDSCalendarCell, offset: number): void; captureFocus(): void; private getWeekdaysMin; renderCalendarGridHeader(): import('lit-html').TemplateResult; renderCalendarGridBody(date: Dayjs): import('lit-html').TemplateResult; renderCalendarHeader(): import('lit-html').TemplateResult; render(): import('lit-html').TemplateResult; }