dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
157 lines (156 loc) • 8.4 kB
TypeScript
import { default as dayjs, Dayjs } from 'dayjs';
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSIconButton } from '../icon-button/icon-button.component';
import { default as ArrowsExpandUpDownFill } from '../icons/arrows/arrows-expand-up-down-fill/arrows-expand-up-down-fill.component';
import { default as DapDSOptionItem } from '../option-item/option-item.component';
import { default as DapDSSelect } from '../select/select.component';
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 {
static tagName: string;
static dependencies: {
'dap-ds-calendar-cell': typeof DapDSCalendarCell;
'dap-ds-icon-button': typeof DapDSIconButton;
'dap-ds-select': typeof DapDSSelect;
'dap-ds-icon-expand-up-down-fill': typeof ArrowsExpandUpDownFill;
'dap-ds-option-item': typeof DapDSOptionItem;
};
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;
/** `data-testid` for the previous-month button. */
prevButtonTestId: string;
/** `data-testid` for the next-month button. */
nextButtonTestId: string;
private _currentCell;
private _yearOptionsLoaded;
private instanceLocalData;
connectedCallback(): Promise<void>;
static readonly styles: import('lit').CSSResult;
get startDate(): dayjs.Dayjs;
get endDate(): dayjs.Dayjs;
get shouldHideAdjacentMonths(): boolean;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): 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;
}