igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
154 lines (153 loc) • 7.29 kB
TypeScript
import { nothing } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
import { IgcCalendarBaseComponent } from './base.js';
import { CalendarDay } from './model.js';
import type { IgcCalendarBaseEventMap } from './types.js';
export declare const focusActiveDate: unique symbol;
declare const IgcCalendarComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCalendarBaseEventMap>> & Constructor<IgcCalendarBaseComponent>;
/**
* Represents a calendar that lets users
* to select a date value in a variety of different ways.
*
* @element igc-calendar
*
* @slot - The default slot for the calendar.
* @slot title - Renders the title of the calendar header.
*
* @fires igcChange - Emitted when calendar changes its value.
*
* @csspart header - The header element of the calendar.
* @csspart header-title - The header title element of the calendar.
* @csspart header-date - The header date element of the calendar.
* @csspart content - The content element which contains the views and navigation elements of the calendar.
* @csspart navigation - The navigation container element of the calendar.
* @csspart months-navigation - The months navigation button element of the calendar.
* @csspart years-navigation - The years navigation button element of the calendar.
* @csspart years-range - The years range element of the calendar.
* @csspart navigation-buttons - The navigation buttons container of the calendar.
* @csspart navigation-button - Previous/next navigation button of the calendar.
* @csspart days-view-container - The days view container element of the calendar.
* @csspart days-view - Days view element of the calendar.
* @csspart months-view - The months view element of the calendar.
* @csspart years-view - The years view element of the calendar.
* @csspart days-row - Days row element of the calendar.
* @csspart label - Week header label element of the calendar.
* @csspart week-number - Week number element of the calendar.
* @csspart week-number-inner - Week number inner element of the calendar.
* @csspart date - Date element of the calendar.
* @csspart date-inner - Date inner element of the calendar.
* @csspart first - The first selected date element of the calendar in range selection.
* @csspart last - The last selected date element of the calendar in range selection.
* @csspart inactive - Inactive date element of the calendar.
* @csspart hidden - Hidden date element of the calendar.
* @csspart weekend - Weekend date element of the calendar.
* @csspart range - Range selected element of the calendar.
* @csspart special - Special date element of the calendar.
* @csspart disabled - Disabled date element of the calendar.
* @csspart single - Single selected date element of the calendar.
* @csspart preview - Range selection preview date element of the calendar.
* @csspart month - Month element of the calendar.
* @csspart month-inner - Month inner element of the calendar.
* @csspart year - Year element of the calendar.
* @csspart year-inner - Year inner element of the calendar.
* @csspart selected - Indicates selected state. Applies to date, month and year elements of the calendar.
* @csspart current - Indicates current state. Applies to date, month and year elements of the calendar.
*/
export default class IgcCalendarComponent extends IgcCalendarComponent_base {
static readonly tagName = "igc-calendar";
static styles: import("lit").CSSResult;
static register(): void;
private get _isDayView();
private get _isMonthView();
private get _isYearView();
private get previousButtonLabel();
private get nextButtonLabel();
private contentRef;
private activeDaysViewIndex;
private daysViews;
private monthsView;
private yearsView;
/**
* Whether to show the dates that do not belong to the current active month.
* @attr hide-outside-days
*/
hideOutsideDays: boolean;
/**
* Whether to render the calendar header part.
* When the calendar selection is set to `multiple` the header is always hidden.
*
* @attr hide-header
*/
hideHeader: boolean;
/**
* The orientation of the calendar header.
* @attr header-orientation
*/
headerOrientation: 'vertical' | 'horizontal';
/**
* The orientation of the calendar months when more than one month
* is being shown.
* @attr orientation
*/
orientation: 'vertical' | 'horizontal';
/**
* The number of months displayed in the days view.
* @attr visible-months
*/
visibleMonths: number;
/**
* The current active view of the component.
* @attr active-view
*/
activeView: 'days' | 'months' | 'years';
/** The options used to format the months and the weekdays in the calendar views. */
formatOptions: Pick<Intl.DateTimeFormatOptions, 'month' | 'weekday'>;
/**
* The resource strings for localization.
*/
resourceStrings: import("../common/i18n/calendar.resources.js").IgcCalendarResourceStrings;
private _intl;
protected localeChange(): void;
protected formatOptionsChange(): void;
/** @private @hidden @internal */
[focusActiveDate](): Promise<void>;
private updateViewIndex;
private getSubsequentActiveDate;
private handleArrowKey;
private onPageKeys;
private onShiftPageKeys;
private onHomeKey;
private onEndKey;
private isNotFromCalendarView;
constructor();
protected renderNavigationButtons(): import("lit-html").TemplateResult<1>;
protected renderMonthButtonNavigation(active: CalendarDay, viewIndex: number): import("lit-html").TemplateResult<1>;
protected renderYearButtonNavigation(active: CalendarDay, viewIndex: number): import("lit-html").TemplateResult<1>;
protected renderYearRangeNavigation(active: CalendarDay): import("lit-html").TemplateResult<1>;
protected renderNavigation(date?: CalendarDay, showButtons?: boolean, viewIndex?: number): import("lit-html").TemplateResult<1>;
protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
protected renderHeaderDateSingle(): string | import("lit-html").TemplateResult<1>;
protected renderHeaderDateRange(): import("lit-html").TemplateResult<1>;
protected renderHeaderDate(): string | import("lit-html").TemplateResult<1>;
protected renderDaysView(): import("lit-html").TemplateResult<1>;
protected renderMonthView(): import("lit-html").TemplateResult<1>;
protected renderYearView(): import("lit-html").TemplateResult<1>;
protected render(): import("lit-html").TemplateResult<1>;
protected changeMonth(event: CustomEvent<Date>): void;
protected changeYear(event: CustomEvent<Date>): void;
protected changeValue(event: CustomEvent<Date>): void;
protected activeDateChanged(event: CustomEvent<Date>): void;
protected rangePreviewDateChanged(event: CustomEvent<Date>): void;
private getActiveDates;
private activateDaysView;
private navigatePrevious;
private navigateNext;
private switchToMonths;
private switchToYears;
}
declare global {
interface HTMLElementTagNameMap {
'igc-calendar': IgcCalendarComponent;
}
}
export {};