import { JSXInterface } from '../jsx'; import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core'; import '@refinitiv-ui/phrasebook/locale/en/calendar.js'; import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate'; import '../button/index.js'; import { CalendarRenderView } from './constants.js'; import './locales.js'; import type { BeforeCellRenderEvent, CalendarFilter } from './types'; export { CalendarRenderView }; export type { CalendarCell } from './types'; export type { CalendarFilter, BeforeCellRenderEvent }; /** * Standard calendar element * * @fires before-cell-render - Fired before calendar renders each cell along with `cell` model. * @fires value-changed - Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically. * @fires view-changed - Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically. * * @attr {boolean} readonly - Set readonly state * @prop {boolean} [readonly=false] - Set readonly state * * @attr {boolean} disabled - Set disabled state * @prop {boolean} [disabled=false] - Set disabled state * * @slot yyyy-MM-dd - Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy` * @slot footer - Adds slotted content into the footer of the calendar control */ export declare class Calendar extends ControlElement implements MultiValue { /** * Element version number * @returns version number */ static get version(): string; protected readonly defaultRole: string | null; /** * A `CSSResultGroup` that will be used * to style the host, slotted children * and the internal template of the element. * @return CSS template */ static get styles(): CSSResultGroup; /** * Reference to the view button */ private viewBtnRef; private _min; /** * Set minimum date * @param min min date * @default - */ set min(min: string); get min(): string; private _max; /** * Set maximum date * @param max max date * @default - */ set max(max: string); get max(): string; /** * Only enable weekdays */ weekdaysOnly: boolean; /** * Only enable weekends */ weekendsOnly: boolean; /** * Custom filter, used for enabling/disabling certain dates * @type {CalendarFilter | null} */ filter: CalendarFilter | null; private _view; /** * Current calendar view date * @param view view date * @default - */ set view(view: string); get view(): string; private localFirstDayOfWeek; private localMonthsNames; private localWeekdaysNames; private _firstDayOfWeek; /** * Set the first day of the week. * 0 - for Sunday, 6 - for Saturday * @param firstDayOfWeek The first day of the week * @type {number | null} * @default null */ set firstDayOfWeek(firstDayOfWeek: number); get firstDayOfWeek(): number; /** * Set to switch to range select mode */ range: boolean; /** * Set to switch to multiple select mode */ multiple: boolean; /** * Current date time value * @param value Calendar value * @default - */ set value(value: string); get value(): string; private _values; /** * Set multiple selected values * @param values Values to set * @type {string[]} * @default [] */ set values(values: string[]); get values(): string[]; /** * Fill head and tail cell dates */ fillCells: boolean; /** * Calendar internal translation strings */ protected dateT: TranslateDirective; protected dateTPromise: TranslatePromise; /** * Used for translations */ protected t: TranslateDirective; /** * Used for internal navigation between render views */ private _renderView; private get renderView(); private set renderView(value); /** * Used for keyboard navigation when trying * to restore focus on re-render and control navigation */ private _activeCellIndex; private get activeCellIndex(); private set activeCellIndex(value); /** * Silently reset cell index without calling request update * @returns {void} */ private resetActiveCellIndex; private navigationGrid; /** * Connected to role. If false, the values are not announced in the screen reader */ private announceValues; /** * Get an active element */ private get activeElement(); /** * Get selectable date button element by index * @param index Cell index * @returns button HTML date button element or null */ private getDateButtonByIndex; /** * Get active date button element * @returns button HTML date button element or null */ private get activeDateButton(); /** * Return true if passed target is HTML * date button element that can be selected * @param target Target to check * @returns isDateButtonElement */ private isDateButton; private isDateAvailable; static get observedAttributes(): string[]; attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void; /** * Perform asynchronous update * @returns promise */ protected performUpdate(): Promise; /** * Invoked before update() to compute values needed during the update. * Implement willUpdate to compute property values that depend on other properties and are used in the rest of the update process. * @param changedProperties Properties that will change * @returns {void} */ protected willUpdate(changedProperties: PropertyValues): void; /** * Updates the element * @param changedProperties Properties that has changed * @returns {void} */ protected update(changedProperties: PropertyValues): void; /** * Called after render life-cycle finished * @param changedProperties Properties which have changed * @return {void} */ protected updated(changedProperties: PropertyValues): void; /** * Run when an element has been first updated * @param changedProperties properties that was changed on first update * @returns {void} */ protected firstUpdated(changedProperties: PropertyValues): void; /** * Show invalid view message * @param value Invalid value * @returns {void} */ protected warnInvalidView(value: string): void; /** * Show invalid value message * @param value Invalid value * @returns {void} */ protected warnInvalidValue(value: string): void; /** * Validate that the value confirms the control type * @param value Value to check * @returns false if value is invalid */ protected isValidValue(value: string): boolean; /** * A helper method to make sure that only valid values are passed * Warn if passed value is invalid * @param values Values to check * @returns Filtered collection of values */ private filterAndWarnInvalidValues; /** * Check if there is a need to reconstruct filters * @param changedProperties properties that was changed on first update * @returns true if filter needs to be constructed */ private shouldConstructFilters; /** * Construct and store a collection of filters * First always comes default filters and last custom filters * @returns {void} */ private constructFilters; /** * Check if date cell is selected * @param value A value to compare * @param comparator A comparator to check for selection. Can be day, month or year * @returns true if cell is selected */ private isDateCellSelected; /** * Get cell selection model, which is used to bind values and ranges * to cell styles * @param value A value to compare * @param comparator A comparator to check for selection. Can be day, month or year * @returns cell selection model */ private getCellSelection; /** * Set navigation map based on rows * @param rows A collection of rows with cells * @returns {void} */ private setNavigationMap; /** * Run when next button is tapped. * Change current view to next view * @param event Next view tap event * @returns {void} */ private onNextTap; /** * Run when previous button is tapped. * Change current view to previous view * @param event Previous view tap event * @returns {void} */ private onPreviousTap; /** * Run when change view button is tapped. * Switch between views * @param event Render view tap event * @returns {void} */ private onRenderViewTap; /** * Run when key down event happens on calendar * @param event Keyboard event * @returns {void} */ private onKeyDown; /** * Get cell content from tap event * @param event Keyboard event * @returns html element */ private getCellContent; /** * Run when tap event happens to table. * Select the values or switch the view * @param event Tap event * @returns {void} */ private onTableTap; /** * Navigate over the grid * @param key Navigation direction * @returns navigation promise */ private onNavigation; /** * Navigate to the next view * @returns {void} */ private toNextView; /** * Navigate to the previous view * @returns {void} */ private toPreviousView; /** * Run when tap event happened on DAY view and the cell has the values * Try to select/deselect cell value * @param value Date string * @returns {void} */ private onTapSelectValue; /** * Notify that values array has been changed * @param values A collection of string dates * @returns {void} */ private notifyValuesChange; /** * Notify that view has been changed * @param view Date * @returns {void} */ private notifyViewChange; /** * Localised format for render view * @param segment Segment object * @param includeMonth True to include a month * @returns template result */ private viewFormattedDate; /** * Get a string representation of current view * @returns template result */ private get formattedViewRender(); /** * Set an active state of the cell based * @param rows A collection of rows with cells * @returns {void} */ private setActiveCell; /** * Get year view template */ private get yearView(); /** * Get month view template */ private get monthView(); /** * Get day view template */ private get dayView(); /** * Get weekday names template */ private get renderWeekdayNames(); /** * Render a view based on the current render view */ private get viewRender(); /** * Get cell translate label key based on selected state * @param cell Cell * @returns key Translate label key */ private getCellLabelKey; /** * fire 'before-cell-render' event * @param cell Cell * @returns {void} */ private dispatchBeforeCellRender; /** * Render cell template. Cell can be a day, month or year * @param cell Cell * @returns template result */ private renderCell; /** * Render view rows * @param rows A collection of rows with cells * @returns template result */ private renderRows; /** * Render button navigation template * @returns template result */ private get buttonNavigationTemplate(); /** * A template used to notify currently selected value for screen readers * @returns template result */ private get selectionTemplate(); /** * A `TemplateResult` that will be used * to render the updated internal template. * @return Render template */ protected render(): TemplateResult; } declare global { interface HTMLElementTagNameMap { 'ef-calendar': Calendar; } } declare global { interface HTMLElementTagNameMap { 'ef-calendar': Calendar; } namespace JSX { interface IntrinsicElements { 'ef-calendar': Partial | JSXInterface.ControlHTMLAttributes; } } } export {};