@heartlandone/vega-sandbox-pr-1479-67b1af6617cd7ddd88b398d2d9e81f66e06d5403 2.27.0

package/dist/types/components/vega-calendar/slimmers/common/layout/full-day-event-layout-row.d.ts

@@ -0,0 +1,26 @@
+import { CalendarEvent } from '../../../../../helpers/calendar/calendar-event';
+import { Nullable } from '../../../../../types/general';
+import { VegaCalendarFullDayEventView } from '../../../types';
+import { VegaCalendarBaseEventLayoutCell } from './base-event-layout-cell';
+/** The `VegaCalendarLongEventLayoutRow` class in TypeScript manages the layout of long events in a calendar by updating slots and checking for overlaps. */
+export declare class VegaCalendarFullDayEventLayoutRow extends VegaCalendarBaseEventLayoutCell {
+  static readonly defaultSlots: Nullable<CalendarEvent>[];
+  protected slots: Nullable<CalendarEvent>[];
+  /**
+   * The function `updateRowSlots` updates a row of slots in a calendar view with a long event.
+   *
+   * @param {VegaCalendarFullDayEventView} eventView - The `eventView` parameter in the `updateRowSlots` method is of type `VegaCalendarFullDayEventView`. It contains information about a long event in a
+   */
+  updateSlots(eventView: VegaCalendarFullDayEventView): void;
+  /**
+   * The function checks if a given event overlaps with existing events in a calendar view.
+   *
+   * @param {VegaCalendarFullDayEventView} eventView - The `eventView` parameter in the `hasOverlapEvent`
+   * function represents a view of a long event in a Vega calendar. It contains the `start` and `end`
+   * properties which specify the start and end times of the event. The function checks if there is any
+   * overlap with existing events in
+   * @returns {boolean} The function `hasOverlapEvent` returns a boolean value indicating whether there is an
+   * overlap in the slots between the start and end times of the given `VegaCalendarFullDayEventView` event.
+   */
+  hasOverlapEvent(eventView: VegaCalendarFullDayEventView): boolean;
+}

package/dist/types/components/vega-calendar/slimmers/common/layout/full-day-event-layout.d.ts

@@ -0,0 +1,30 @@
+import { CalendarEvent } from '../../../../../helpers/calendar/calendar-event';
+import { Nullable } from '../../../../../types/general';
+import { VegaCalendarBaseEventLayout } from './base-event-layout';
+import { VegaCalendarFullDayEventLayoutRow } from './full-day-event-layout-row';
+/** The VegaCalendarLongEventLayout class manages the layout of long events in a calendar by organizing them into rows. */
+export declare class VegaCalendarFullDayEventLayout extends VegaCalendarBaseEventLayout {
+  protected cells: VegaCalendarFullDayEventLayoutRow[];
+  /**
+   * The constructor function initializes a VegaCalendarFullDayEventLayoutRow array in TypeScript.
+   *
+   * @param {VegaCalendarFullDayEventLayoutRow[]} rows - An array of VegaCalendarFullDayEventLayoutRow objects.
+   */
+  constructor(rows: VegaCalendarFullDayEventLayoutRow[]);
+  /**
+   * This TypeScript function returns the index of a row containing a specific calendar event.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter is a `CalendarEvent` object that represents an event in a calendar.
+   * @returns {number} The function `getEventRowsIndex` returns the index of the row in the `rows` array where the `eventItem` is found based on the condition specified in the `findIndex` method.
+   */
+  getEventRowsIndex(eventItem: CalendarEvent): number;
+  /**
+   * This function retrieves CalendarEvents from each row in a calendar layout based on a specified index.
+   *
+   * @param {number} index - The `index` parameter in the `getEventsByIndex` method is a number that
+   * represents the slot index for which you want to retrieve calendar events. The method iterates
+   * through each row in the `rows` array and retrieves the calendar event at the specified slot index from each row. The method
+   * @returns {(Nullable<CalendarEvent>)[]} An array of CalendarEvent objects is being returned.
+   */
+  getEventsByIndex(index: number): Nullable<CalendarEvent>[];
+}

package/dist/types/components/vega-calendar/slimmers/common/layout/test/long-event-layout-generator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/vega-calendar/slimmers/common/renderers/vega-calendar-event-item-renderer.d.ts

@@ -0,0 +1,24 @@
+import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
+import { CalendarEvent } from '../../../../../helpers/calendar/calendar-event';
+import { VegaCalendar } from '../../../vega-calendar';
+/** The `VegaCalendarEventItemRenderer` class in TypeScript React is used for rendering calendar event items with specific layout and styling properties. */
+export declare class VegaCalendarEventItemRenderer extends VegaSlimmer {
+  static readonly backgroundColorModeEventHeight: number;
+  protected host: VegaCalendar['host'];
+  protected calendarView: VegaCalendar['calendarView'];
+  protected eventClickEmitter: VegaCalendar['eventClickEmitter'];
+  /**
+   * render event component
+   *
+   * @param {CalendarEvent} item the calendar event object
+   * @param {Record<string,boolean>} classMap the class name map
+   * @returns {HTMLVegaCalendarEventElement} calendar event element
+   */
+  render(item: CalendarEvent, classMap: Record<string, boolean>): HTMLVegaCalendarEventElement;
+  /**
+   * emit vega click event
+   *
+   * @param {CalendarEvent} eventItem the event item
+   */
+  private handleEventClick;
+}

package/dist/types/components/vega-calendar/slimmers/common/renderers/vega-calendar-full-day-event-layout-renderer.d.ts

@@ -0,0 +1,39 @@
+import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
+import { CalendarEvent } from '../../../../../helpers/calendar/calendar-event';
+import { VegaCalendar } from '../../../vega-calendar';
+import { Nullable } from '../../../../../types/general';
+/** This code snippet defines a TypeScript class `VegaCalendarFullDayEventLayoutRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
+export declare class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
+  private static monthViewEventOffsetTop;
+  protected eventItemRenderer: VegaCalendar['eventItemRenderer'];
+  protected viewMode: VegaCalendar['viewMode'];
+  protected calendarView: VegaCalendar['calendarView'];
+  private longEventLayoutGenerator;
+  private calendarEventSorter;
+  private fullDayEventLayout;
+  /**
+   * The function `sortLongEvents` sorts calendar events based on a fixed layout generated by `longEventLayoutGenerator`.
+   *
+   * @param {CalendarEvent[][]} calendarEvents - calendar current row all events
+   * @returns {Nullable<CalendarEvent>[][]} the events after sorter
+   */
+  sortLongEvents(calendarEvents: CalendarEvent[][]): Nullable<CalendarEvent>[][];
+  /**
+   * render the month view or week view long events
+   *
+   * @param {Nullable<CalendarEvent>[]} calendarEvents current events
+   * @param {currentViewIndex} currentViewIndex the current index of the row
+   * @returns {HTMLElement[]} event elements
+   */
+  render(calendarEvents: Nullable<CalendarEvent>[], currentViewIndex: number): HTMLElement[];
+  /**
+   * Get the current event layout style from the params
+   *
+   * @param {CalendarEvent} calendarEvent current event item
+   * @param {number} currentViewIndex the current date index of the row
+   * @param {number} itemIndex the current event index of the event array
+   * @param {number} offsetTop the default offset top for the event
+   * @returns {VegaCalendarEventStyle} layout style object
+   */
+  private getEventStyle;
+}

package/dist/types/components/vega-calendar/slimmers/common/renderers/vega-calendar-renderer.d.ts

@@ -0,0 +1,13 @@
+import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendar } from '../../../vega-calendar';
+/** The `VegaCalendarRenderer` class in TypeScript React renders switch panel and view components for a calendar using VegaSlimmer. */
+export declare class VegaCalendarRenderer extends VegaSlimmer {
+  protected switchPanelRenderer: VegaCalendar['switchPanelRenderer'];
+  protected viewRenderer: VegaCalendar['viewRenderer'];
+  /**
+   * The render function returns a Fragment containing the rendered output of switchPanelRenderer and viewRenderer components.
+   *
+   * @returns {HTMLElement} An HTMLElement containing the rendered output of the switchPanelRenderer and viewRenderer components.
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/vega-calendar/slimmers/common/renderers/vega-calendar-switch-panel.d.ts

@@ -0,0 +1,82 @@
+import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendar } from '../../../vega-calendar';
+import { VegaSegmentProps } from '../../../../vega-segment-control/types';
+/** The `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
+export declare class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
+  static views: VegaSegmentProps[];
+  protected viewMode: VegaCalendar['viewMode'];
+  protected calendarView: VegaCalendar['calendarView'];
+  protected currentPeriod: VegaCalendar['currentPeriod'];
+  protected moreActionDropdownProps: VegaCalendar['moreActionDropdownProps'];
+  protected moreActionClickEmitter: VegaCalendar['moreActionClickEmitter'];
+  protected currentPeriodController: VegaCalendar['currentPeriodController'];
+  protected calendarViewController: VegaCalendar['calendarViewController'];
+  protected translationSlimmer: VegaCalendar['translationSlimmer'];
+  private switchPanelRef;
+  /**
+   * get the switch panel container element
+   *
+   * @returns {HTMLElement} container element
+   */
+  getSwitchPanelRef(): HTMLVegaFlexElement;
+  /**
+   * calendar switch panel with date switch, view switch, add new button, and more action components.
+   *
+   * @returns {HTMLElement} html element
+   */
+  render(): HTMLElement;
+  /**
+   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
+   *
+   * @returns {HTMLDivElement} action button elements container.
+   */
+  private renderDateSwitch;
+  /**
+   * The function `renderCurrentPeriod` returns an HTML element displaying the view date content summary info.
+   *
+   * @returns {HTMLVegaFontElement} The text content inside the element is "Current Date Test".
+   */
+  private renderCurrentPeriod;
+  /**
+   * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
+   */
+  private renderViewSwitch;
+  /**
+   * Render an more action button if dropdown source is not empty
+   *
+   * @returns {Nullable<HTMLElement>} the additional element
+   */
+  private renderMoreActionMenu;
+  /**
+   * This function is responsible for updating the `viewMode` property of the `VegaCalendarSwitchPanelRenderer` class with the value extracted from the `input` parameter.
+   *
+   * @param {NotifyObserverPayload<VegaCalendarViewModeType>} input mark which view should be selected
+   */
+  private handleViewChange;
+  /**
+   * reset view content to today
+   */
+  private todayButtonClick;
+  /**
+   * update view content after click next button
+   */
+  private nextButtonClick;
+  /**
+   * update view content after click previous button
+   */
+  private prevButtonClick;
+  /**
+   * The more action menu item click
+   *
+   * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
+   */
+  private moreActionMenuClick;
+  /**
+   * Get the view content date summary info, such as `January, 2024` or `10 January, 2024` or `28 December, 2023 - 3 January, 2024`
+   *
+   * @returns {string} string
+   */
+  private getViewDateSummary;
+}

package/dist/types/components/vega-calendar/slimmers/common/renderers/vega-calendar-view-renderer.d.ts

@@ -0,0 +1,15 @@
+import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendar } from '../../../vega-calendar';
+/** renders different views based on the specified view mode using month, week, and day view render. */
+export declare class VegaCalendarViewRenderer extends VegaSlimmer {
+  protected viewMode: VegaCalendar['viewMode'];
+  protected showWeekends: VegaCalendar['showWeekends'];
+  protected monthViewRenderer: VegaCalendar['monthViewRenderer'];
+  protected viewWithTimeRenderer: VegaCalendar['viewWithTimeRenderer'];
+  /**
+   * render the calendar month/week/day view
+   *
+   * @returns {HTMLElement} html element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-more-button-renderer.d.ts

@@ -0,0 +1,23 @@
+import { VegaSlimmer } from '../../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendar } from '../../../../vega-calendar';
+import { Nullable } from '../../../../../../types/general';
+export declare class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
+  protected showAllEventsInDayOrWeekView: VegaCalendar['showAllEventsInDayOrWeekView'];
+  /**
+   * Render the more button element
+   *
+   * @param {number} count the hidden elements count
+   * @returns {HTMLElement} more button
+   */
+  render(count: number): Nullable<HTMLElement>;
+  /**
+   * Reset the show all event flag when view mode change
+   */
+  protected resetShowAllFlag(): void;
+  /**
+   * Update the show all flag to true when click the more button
+   *
+   * @param {MouseEvent} e event object
+   */
+  private updateShowAllFlag;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-renderer.d.ts

@@ -0,0 +1,34 @@
+import { VegaSlimmer } from '../../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendar } from '../../../../vega-calendar';
+/** renders all-day events in a calendar view, with options to display a limited number of events and show a "more" button for additional events. */
+export declare class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
+  private static maxDisplayEventLength;
+  protected calendarView: VegaCalendar['calendarView'];
+  protected calendarEventController: VegaCalendar['calendarEventController'];
+  protected eventItemRenderer: VegaCalendar['eventItemRenderer'];
+  protected fullDayEventLayoutRenderer: VegaCalendar['fullDayEventLayoutRenderer'];
+  protected showAllEventsInDayOrWeekView: VegaCalendar['showAllEventsInDayOrWeekView'];
+  protected dayViewFullDayEventMoreButtonRenderer: VegaCalendar['dayViewFullDayEventMoreButtonRenderer'];
+  /**
+   * render current preiod all day events
+   *
+   * @returns {HTMLElement} event element
+   */
+  render(): HTMLElement;
+  /**
+   * render current date all day events
+   *
+   * @param {Nullable<CalendarEvent>[]} events displayed calendar events
+   * @param {number} currentViewIndex the current date index of the array
+   * @param {Nullable<CalendarEvent>[]} allEvents all calendar events
+   * @returns {HTMLVegaCalendarEventElement[]} event component array
+   */
+  private renderCurrentFullDayEvents;
+  /**
+   * Get the display events base on the show all events flag
+   *
+   * @param {Nullable<CalendarEvent>[][]} rowEvents row events array
+   * @returns {Nullable<CalendarEvent>[][]} the part of the events or the whole events
+   */
+  private filterDisplayEvents;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/timed-event/layout/day-view-timed-event-layout-column.d.ts

@@ -0,0 +1,28 @@
+import { CalendarEvent } from '../../../../../../../helpers/calendar/calendar-event';
+import { Nullable } from '../../../../../../../types/general';
+import { VegaCalendarBaseEventLayoutCell } from '../../../../common/layout/base-event-layout-cell';
+/** The class `VegaCalendarDayViewEventLayoutColumn` manages the layout of events in a day view calendar by storing event slots and providing methods to interact with them. */
+export declare class VegaCalendarDayViewTimedEventLayoutColumn extends VegaCalendarBaseEventLayoutCell {
+  static readonly defaultSlots: Nullable<CalendarEvent>[];
+  protected slots: Nullable<CalendarEvent>[];
+  /**
+   * The function `hasOverlapEvent` checks if a given calendar event overlaps with existing events in the calendar.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter in the `hasOverlapEvent` function represents a `CalendarEvent` object that contains information about an event such as its start time, end time, and possibly other details related to the event.
+   * @returns {boolean} The function `hasOverlapEvent` returns a boolean value indicating whether there is an overlap in the calendar event slots. If there is an overlap, it returns `true`, otherwise it returns `false`.
+   */
+  hasOverlapEvent(eventItem: CalendarEvent): boolean;
+  /**
+   * The function `updateColumnSlots` updates the slots array by replacing a range of elements with a given event item.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter is a `CalendarEvent` object that represents an event in a calendar.
+   */
+  updateSlots(eventItem: CalendarEvent): void;
+  /**
+   * The function `getIndexRangeFromEvent` takes a `CalendarEvent` object and returns an array of time indices based on the start and end times of the event.
+   *
+   * @param {CalendarEvent} eventItem - A CalendarEvent object containing information about a specific event in a calendar, such as its start time and end time.
+   * @returns {number[]} An array of two numbers representing the index range of the start and end times of the given CalendarEvent.
+   */
+  private getIndexRangeFromEvent;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/timed-event/layout/day-view-timed-event-layout-generator.d.ts

@@ -0,0 +1,20 @@
+import { CalendarEvent } from '../../../../../../../helpers/calendar/calendar-event';
+import { VegaCalendarBaseEventLayoutGenerator } from '../../../../common/layout/base-event-layout-generator';
+import { VegaCalendarDayViewTimedEventLayout } from './day-view-timed-event-layout';
+import { VegaCalendarDayViewTimedEventLayoutColumn } from './day-view-timed-event-layout-column';
+/** The `VegaCalendarDayViewEventLayoutGenerator` class in TypeScript generates a layout for calendar events in a day view. */
+export declare class VegaCalendarDayViewTimedEventLayoutGenerator extends VegaCalendarBaseEventLayoutGenerator {
+  /**
+   * The function generates a layout for displaying calendar events in a day view.
+   *
+   * @param {CalendarEvent[]} calendarEvents - CalendarEvent[] - an array of calendar events containing information such as event title, start time, end time, and other relevant details.
+   * @returns {VegaCalendarDayViewTimedEventLayout} A `VegaCalendarDayViewTimedEventLayout` object is being returned, which is constructed using the `layoutColumns` array containing `VegaCalendarDayViewTimedEventLayoutColumn` objects.
+   */
+  generate(calendarEvents: CalendarEvent[]): VegaCalendarDayViewTimedEventLayout;
+  /**
+   * The function creates a new instance of VegaCalendarDayViewTimedEventLayoutColumn.
+   *
+   * @returns {VegaCalendarDayViewTimedEventLayoutColumn} An instance of the class `VegaCalendarDayViewTimedEventLayoutColumn` is being returned.
+   */
+  protected createNewLayoutCell(): VegaCalendarDayViewTimedEventLayoutColumn;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/timed-event/layout/day-view-timed-event-layout.d.ts

@@ -0,0 +1,20 @@
+import { CalendarEvent } from '../../../../../../../helpers/calendar/calendar-event';
+import { VegaCalendarBaseEventLayout } from '../../../../common/layout/base-event-layout';
+import { VegaCalendarDayViewTimedEventLayoutColumn } from './day-view-timed-event-layout-column';
+/** This TypeScript class, VegaCalendarDayViewTimedEventLayout, manages the layout of events in a day view calendar. */
+export declare class VegaCalendarDayViewTimedEventLayout extends VegaCalendarBaseEventLayout {
+  protected cells: VegaCalendarDayViewTimedEventLayoutColumn[];
+  /**
+   * The constructor function initializes the columns property with the provided array of VegaCalendarDayViewTimedEventLayoutColumn objects.
+   *
+   * @param {VegaCalendarDayViewTimedEventLayoutColumn[]} columns - An array of VegaCalendarDayViewTimedEventLayoutColumn objects.
+   */
+  constructor(columns: VegaCalendarDayViewTimedEventLayoutColumn[]);
+  /**
+   * The function `getEventColumnsSpannedCount` calculates the number of columns spanned by a given calendar event in a day view layout.
+   *
+   * @param {CalendarEvent} eventItem - The `getEventColumnsSpannedCount` function takes a `CalendarEvent` object as the `eventItem` parameter. This function calculates the number of columns spanned by the given event within the calendar view.
+   * @returns {number} The function `getEventColumnsSpannedCount` returns the number of columns spanned by the given `eventItem` in the `VegaCalendarDayViewTimedEventLayoutColumn` array `columns`.
+   */
+  getEventColumnsSpannedCount(eventItem: CalendarEvent): number;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/timed-event/layout/test/day-view-event-layout-generator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/timed-event/vega-calendar-day-event-layout-renderer.d.ts

@@ -0,0 +1,27 @@
+import { VegaSlimmer } from '../../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendarDayViewTimedEventLayout } from './layout/day-view-timed-event-layout';
+import { VegaCalendar } from '../../../../vega-calendar';
+/** The `VegaCalendarDayViewEventLayoutRenderer` class in TypeScript React renders event layouts for a day view calendar. */
+export declare class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
+  private static totalNumberOfCells;
+  protected eventItemRenderer: VegaCalendar['eventItemRenderer'];
+  /**
+   * The `render` function in TypeScript React renders a layout of calendar events for a day view.
+   *
+   * @param {VegaCalendarDayViewTimedEventLayout} layout - The `layout` parameter in the `render` function is
+   * of type `VegaCalendarDayViewTimedEventLayout`, which contains information about the layout of events for
+   * a day view in a calendar. It has properties like `eventLayoutColumns`, which is an array of `VegaCalendarDayViewEvent
+   * @returns {HTMLElement[]} An array of HTMLElements representing the rendered event nodes based on the provided layout and event data.
+   */
+  render(layout: VegaCalendarDayViewTimedEventLayout): HTMLElement[];
+  /**
+   * This function calculates and returns the style properties for positioning and sizing a calendar event within a grid layout.
+   *
+   * @param {number} startIndex - The `startIndex` parameter represents the index of the starting cell for the time event in the calendar grid.
+   * @param {number} endIndex - The `endIndex` parameter represents the index of the end position of the time event within a column. It indicates where the time event ends vertically within the column layout.
+   * @param {number} columnIndex - The `columnIndex` parameter represents the index of the column in which the event is being displayed. It is used to calculate the `left` position of the event element within the container based on the total number of columns spanned by the event.
+   * @param {number} columnsSpannedCount - The `columnsSpannedCount` parameter represents the number of columns spanned by the event in a calendar layout. It is used to calculate the left position of the event within the calendar grid.
+   * @returns {VegaCalendarEventStyle} The function `getTimeEventStyle` returns an object of type `VegaCalendarEventStyle` with properties for position, left, top, width, height, and zIndex.
+   */
+  private getTimeEventStyle;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/timed-event/vega-calendar-timed-event-renderer.d.ts

@@ -0,0 +1,23 @@
+import { VegaSlimmer } from '../../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendar } from '../../../../vega-calendar';
+/** The `VegaCalendarTimedEventRenderer` class in TypeScript React renders timed events for a calendar view based on the current day's events. timed events render for day view and week view */
+export declare class VegaCalendarTimedEventRenderer extends VegaSlimmer {
+  protected calendarView: VegaCalendar['calendarView'];
+  protected calendarEventController: VegaCalendar['calendarEventController'];
+  protected dayViewEventLayoutRenderer: VegaCalendar['dayViewEventLayoutRenderer'];
+  private calendarEventSorter;
+  private dayViewTimedEventLayoutGenerator;
+  /**
+   * render current preiod normal events
+   *
+   * @returns {HTMLElement} events element
+   */
+  render(): HTMLElement;
+  /**
+   * render current day events
+   *
+   * @param {CalendarDate} date calendar Date
+   * @returns {HTMLElement[]} event elements
+   */
+  private renderTimedEvents;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-time-line-renderer.d.ts

@@ -0,0 +1,67 @@
+import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendarViewModeType } from '../../../types';
+import { CalendarDate } from '../../../../../helpers/calendar';
+import { VegaCalendar } from '../../../vega-calendar';
+/** The `VegaCalendarTimeLineRenderer` class in TypeScript React renders a time line with custom time format options and includes methods for rendering time markers and the time line itself. */
+export declare class VegaCalendarTimeLineRenderer extends VegaSlimmer {
+  protected timeFormat: VegaCalendar['timeFormat'];
+  protected viewMode: VegaCalendar['viewMode'];
+  private timeLineRef;
+  private timeMarkerRef;
+  private timeMarkerPositionTimer;
+  /**
+   * takes an array of `CalendarDate` objects as input and returns an HTML element
+   *
+   * @param {CalendarDate[]} source
+   * @returns {HTMLElement} the html element
+   */
+  renderTimeMarker(source: CalendarDate[]): HTMLElement;
+  /**
+   * rendering the time line component as an HTML element
+   *
+   * @returns {HTMLElement} the html element
+   */
+  render(): HTMLElement;
+  /**
+   * scroll to current time line block if change view mode to week or day
+   *
+   * @param {VegaCalendarViewModeType} viewMode the view mode
+   */
+  protected updateTimeLine(viewMode: VegaCalendarViewModeType): void;
+  /**
+   * remove setInterval when component destroy
+   */
+  protected clearTimer(): void;
+  /**
+   * Add the time mark position update logic if the component add back to page
+   */
+  protected updateTimeLineIfComponentAddBack(): void;
+  /**
+   * Should display the current time block in the view if the default view mode is not month
+   */
+  protected displayCurrentTimeBlockByDefault(): void;
+  /**
+   * The function `getTimeMarkerPosition` calculates the position of the current time marker as a percentage of the day.
+   *
+   * @returns {string} a string representing the current time marker position as a percentage of the day.
+   */
+  private getTimeMarkerPosition;
+  /**
+   * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
+   *
+   * @returns {string[]} returns an array of strings representing the time line
+   */
+  private getTimeLineTitles;
+  /**
+   * Update the time marker position with the time
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  private syncTimeMarkerPosition;
+  /**
+   * scroll the time line in to current view
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  private scrollToTargetTimeBlock;
+}

package/dist/types/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-view-with-time-renderer.d.ts

@@ -0,0 +1,45 @@
+import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendar } from '../../../vega-calendar';
+/** The `VegaCalendarViewWithTimeRenderer` class in TypeScript React renders a day view for a calendar component with title, content, and hour blocks. */
+export declare class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
+  protected viewMode: VegaCalendar['viewMode'];
+  protected timeLineRenderer: VegaCalendar['timeLineRenderer'];
+  protected dayViewTimedEventRenderer: VegaCalendar['dayViewTimedEventRenderer'];
+  protected dayViewFullDayEventRenderer: VegaCalendar['dayViewFullDayEventRenderer'];
+  protected calendarView: VegaCalendar['calendarView'];
+  protected dateDblClickEmitter: VegaCalendar['dateDblClickEmitter'];
+  protected translationSlimmer: VegaCalendar['translationSlimmer'];
+  /**
+   * The render function in TypeScript React returns an array of HTMLElements containing the week calendar view for a specific day.
+   *
+   * @returns {HTMLElement} An array of HTMLElement elements containing the rendered content of a calendar view for a
+   * specific day in the week. The content includes the title and the main content of the calendar view
+   * for that day.
+   */
+  render(): HTMLElement;
+  /**
+   * The function `renderViewTitle` renders a calendar view title and events based on the provided source data.
+   *
+   * @returns {HTMLElement} The `renderViewTitle` function returns an HTML element (HTMLElement) that contains a calendar view title container with rows for each day's information.
+   */
+  private renderViewTitle;
+  /**
+   * The `renderViewContent` function in TypeScript React renders a calendar view with day blocks and time markers based on the provided data.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a calendar view row with day containers, a timeline renderer, a content container, a day list, and hour blocks for each item in the source array.
+   */
+  private renderViewContent;
+  /**
+   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
+   *
+   * @param {CalendarDate} calendarDate then current calendar date object
+   * @returns {HTMLElement[]} An array of HTMLElements is being returned. Each HTMLElement represents an hour block with a time value inside a div element.
+   */
+  private renderHourBlock;
+  /**
+   * emit vega click event when click the date block
+   *
+   * @param {CalendarDate} calendarDate the calendar date object
+   */
+  private handleDateBlockClick;
+}

package/dist/types/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-event-renderer.d.ts

@@ -0,0 +1,66 @@
+import { VegaSlimmer } from '../../../../../vega-slimmer/vega-slimmer-core';
+import { VegaCalendar } from '../../../vega-calendar';
+import { CalendarDate } from '../../../../../helpers/calendar';
+import { Nullable } from '../../../../../types/general';
+import { CalendarEvent } from '../../../../../helpers/calendar/calendar-event';
+/** This code snippet defines a TypeScript class `VegaCalendarMonthEventRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
+export declare class VegaCalendarMonthEventRenderer extends VegaSlimmer {
+  protected viewMode: VegaCalendar['viewMode'];
+  protected host: VegaCalendar['host'];
+  protected calendarEventController: VegaCalendar['calendarEventController'];
+  protected eventItemRenderer: VegaCalendar['eventItemRenderer'];
+  protected fullDayEventLayoutRenderer: VegaCalendar['fullDayEventLayoutRenderer'];
+  private eventContainerRef;
+  private maxMonthDisplayEventsCount;
+  /**
+   * current row dates all events.
+   *
+   * @param {CalendarDate[]} rowDate the current view date object
+   * @returns {(CalendarEvent|null)[][]} the current view events
+   */
+  getCurrentRowEvents(rowDate: CalendarDate[]): Nullable<CalendarEvent>[][];
+  /**
+   * The function filterRowDisplayEvents processes a 2D array of CalendarEvent objects to limit the number of events displayed per row.
+   *
+   * @param {(CalendarEvent|null)[][]} rowEvents - `rowEvents` is an array of arrays of `CalendarEvent` objects. Each inner array represents events for a specific row in a calendar display.
+   * @returns {(CalendarEvent|null)[][]} the current row should display events array
+   */
+  filterRowDisplayEvents(rowEvents: Nullable<CalendarEvent>[][]): Nullable<CalendarEvent>[][];
+  /**
+   * Get the month event container element ref
+   *
+   * @returns {HTMLDivElement} the container element
+   */
+  getMonthEventContainerRef(): HTMLDivElement;
+  /**
+   * render the current date events
+   *
+   * @param {CalendarDate} calendarDate current day
+   * @param {Nullable<CalendarEvent>[]} allEvents current row events
+   * @param {Nullable<CalendarEvent>[]} displayEvents current row should display events
+   * @param {number} currentViewIndex current day index of week
+   * @returns {HTMLDivElement} the events container
+   */
+  render(calendarDate: CalendarDate, allEvents: Nullable<CalendarEvent>[], displayEvents: Nullable<CalendarEvent>[], currentViewIndex: number): HTMLDivElement;
+  /**
+   * Add a month event display count change observer, than update the component
+   */
+  protected addMaxDisplayCountChange(): void;
+  /**
+   * Render the event more button if there is no enough space to display all event
+   *
+   * @param {Nullable<CalendarEvent>[]} events all event list array
+   * @param {number} moreItemsLength popover events length
+   * @param {string} title the popover title
+   * @returns {HTMLDivElement | null} the more button or null
+   */
+  private renderMoreButton;
+  /**
+   * The `hideTheCutOffEvents` method in the `VegaCalendarMonthEventRenderer` class is responsible for removing any cut-off events from the displayed events in each row
+   *
+   * @param {Nullable<CalendarEvent>[][]} allEvents the all events
+   * @param {Nullable<CalendarEvent>[][]} rowEvents the display events
+   * @returns {Nullable<CalendarEvent>[][]} new event array
+   */
+  private hideTheCutOffEvents;
+}