@frxjs/ngx-timeline
Version:
The main goal of this angular library is to give you the possibility to integrate a timeline in your app. <br> Version 21.0.1 is compatible with angular 20. <br> Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible
253 lines (245 loc) • 12.7 kB
TypeScript
import * as _angular_core from '@angular/core';
import { OnChanges, DoCheck, TemplateRef, PipeTransform } from '@angular/core';
declare const supportedLanguageCodes: readonly ["en", "it", "fr", "de", "es", "sl", "tr", "pl", "pt", "ru", "nb"];
type SupportedLanguageCode = typeof supportedLanguageCodes[number];
declare const defaultSupportedLanguageCode: SupportedLanguageCode;
interface NgxConfigDate {
code: string;
dayMonthYear: string;
fullDate: string;
hoursMinutes: string;
monthYear: string;
year: string;
}
declare const dateConfigMap: Record<SupportedLanguageCode, NgxConfigDate>;
declare enum NgxDateFormat {
DAY_MONTH_YEAR = "DAY_MONTH_YEAR",
FULL_DATE = "FULL_DATE",
HOURS_MINUTES = "HOURS_MINUTES",
MONTH_YEAR = "MONTH_YEAR",
YEAR = "YEAR"
}
declare const fieldConfigDate: Record<NgxDateFormat, keyof NgxConfigDate>;
/**
* Enum used to set the group event logic
*/
declare enum NgxTimelineEventGroup {
YEAR = "YEAR",
MONTH_YEAR = "MONTH_YEAR",
DAY_MONTH_YEAR = "DAY_MONTH_YEAR"
}
declare const fieldsToAddEventGroup: Record<NgxTimelineEventGroup, string[]>;
declare const periodKeyDateFormat: Record<NgxTimelineEventGroup, NgxDateFormat>;
/**
* Enum used to set the group event logic.
*/
declare enum NgxTimelineOrientation {
HORIZONTAL = "HORIZONTAL",
VERTICAL = "VERTICAL"
}
/**
* Enum used to set the change side event logic.
*/
declare enum NgxTimelineEventChangeSide {
ALL = "ALL",
ALL_IN_GROUP = "ALL_IN_GROUP",
ON_DIFFERENT_DAY_IN_GROUP = "ON_DIFFERENT_DAY_IN_GROUP",
ON_DIFFERENT_HMS_IN_GROUP = "ON_DIFFERENT_HMS_IN_GROUP",
ON_DIFFERENT_MONTH_IN_GROUP = "ON_DIFFERENT_MONTH_IN_GROUP"
}
declare const fieldsToCheckEventChangeSideInGroup: Partial<Record<NgxTimelineEventChangeSide, string[]>>;
/**
* Event to be provided from outside the timeline.
*/
interface NgxTimelineEvent {
timestamp: Date;
title?: string;
description?: string;
id?: unknown;
itemPosition?: NgxTimelineItemPosition;
}
interface NgxTimelinePeriodInfo {
periodKey?: string;
year?: number;
month?: number;
day?: number;
firstDate?: Date;
}
/**
* Item used inside the timeline.
*/
interface NgxTimelineItem {
position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;
periodInfo?: NgxTimelinePeriodInfo;
eventInfo?: NgxTimelineEvent;
}
declare enum NgxTimelineItemPosition {
ON_LEFT = "ON_LEFT",
ON_RIGHT = "ON_RIGHT"
}
declare class NgxTimelineComponent implements OnChanges, DoCheck {
/**
* List of events to be displayed.
*/
readonly events: _angular_core.InputSignal<NgxTimelineEvent[]>;
/**
* Language code used to show the date formatted.
*/
readonly langCode: _angular_core.InputSignal<"en" | "it" | "fr" | "de" | "es" | "sl" | "tr" | "pl" | "pt" | "ru" | "nb">;
/**
* Boolean used to enable or disable the animations.
*/
readonly enableAnimation: _angular_core.InputSignal<boolean>;
/**
* Boolean used to reverse sort order (default older first).
*/
readonly reverseOrder: _angular_core.InputSignal<boolean>;
/**
* Orientation of the timeline.
*/
readonly orientation: _angular_core.InputSignal<NgxTimelineOrientation>;
/**
* Logic to be applied in order to group events.
*/
readonly groupEvent: _angular_core.InputSignal<NgxTimelineEventGroup>;
/**
* Logic to be applied in order to put events on LEFT or RIGHT.
*/
readonly changeSide: _angular_core.InputSignal<NgxTimelineEventChangeSide>;
/**
* Custom Template displayed before a group of events.
*/
readonly periodCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Custom Template displayed to show a single event.
*/
readonly eventCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Custom Template displayed to show a separator icon.
*/
readonly centerIconCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Custom Template displayed to show the side date.
*/
readonly dateInstantCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Custom Template displayed to show the inner event.
*/
readonly innerEventCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Inner custom template used to display the event description.
*/
readonly eventDescriptionCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Enable virtual scrolling, for rendering performance. Useful when rendering thousands of items.
*/
readonly virtualScroll: _angular_core.InputSignal<boolean>;
/**
* The size of the items in the list (in pixels).
*/
readonly virtualScrollItemSize: _angular_core.InputSignal<number>;
/**
* The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.
*/
readonly virtualScrollMaxBufferPx: _angular_core.InputSignal<number>;
/**
* The minimum amount of buffer rendered beyond the viewport (in pixels).
* If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
*/
readonly virtualScrollMinBufferPx: _angular_core.InputSignal<number>;
/**
* Output click event emitter.
*/
readonly clickEmitter: _angular_core.OutputEmitterRef<NgxTimelineItem>;
groups: Record<string, NgxTimelineEvent[]>;
periods: NgxTimelineItem[];
items: NgxTimelineItem[];
ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
ngxTimelineOrientation: typeof NgxTimelineOrientation;
ngxDateFormat: typeof NgxDateFormat;
private differs;
private iterableDiffer;
private readonly separator;
ngOnChanges(): void;
ngDoCheck(): void;
getPeriodKeyDateFormat(): string;
protected clear(): void;
protected groupEvents(events: NgxTimelineEvent[]): void;
protected sortEvents(events: NgxTimelineEvent[]): void;
protected setGroupsAndPeriods(events: NgxTimelineEvent[]): void;
protected setItems(): void;
protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean;
protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void;
/**
* Compare the events inside the same group
*/
protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean;
protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean;
protected getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): NgxTimelinePeriodInfo;
private getPeriodInfo;
private shouldChangeEventsInPeriod;
protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string;
getOrientationForVirtualScroll(): Lowercase<NgxTimelineOrientation.HORIZONTAL | NgxTimelineOrientation.VERTICAL>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTimelineComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxTimelineComponent, "ngx-timeline", never, { "events": { "alias": "events"; "required": true; "isSignal": true; }; "langCode": { "alias": "langCode"; "required": false; "isSignal": true; }; "enableAnimation": { "alias": "enableAnimation"; "required": false; "isSignal": true; }; "reverseOrder": { "alias": "reverseOrder"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "groupEvent": { "alias": "groupEvent"; "required": false; "isSignal": true; }; "changeSide": { "alias": "changeSide"; "required": false; "isSignal": true; }; "periodCustomTemplate": { "alias": "periodCustomTemplate"; "required": false; "isSignal": true; }; "eventCustomTemplate": { "alias": "eventCustomTemplate"; "required": false; "isSignal": true; }; "centerIconCustomTemplate": { "alias": "centerIconCustomTemplate"; "required": false; "isSignal": true; }; "dateInstantCustomTemplate": { "alias": "dateInstantCustomTemplate"; "required": false; "isSignal": true; }; "innerEventCustomTemplate": { "alias": "innerEventCustomTemplate"; "required": false; "isSignal": true; }; "eventDescriptionCustomTemplate": { "alias": "eventDescriptionCustomTemplate"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "virtualScrollMaxBufferPx": { "alias": "virtualScrollMaxBufferPx"; "required": false; "isSignal": true; }; "virtualScrollMinBufferPx": { "alias": "virtualScrollMinBufferPx"; "required": false; "isSignal": true; }; }, { "clickEmitter": "clickEmitter"; }, never, never, true, never>;
}
declare class NgxTimelineEventComponent {
/**
* Event to be displayed.
*/
readonly event: _angular_core.InputSignal<NgxTimelineItem>;
/**
* Event position respect to the vertical line (LEFT or RIGHT).
*/
readonly colSidePosition: _angular_core.InputSignal<NgxTimelineItemPosition | undefined>;
/**
* Language code used to format the dates.
*/
readonly langCode: _angular_core.InputSignal<"en" | "it" | "fr" | "de" | "es" | "sl" | "tr" | "pl" | "pt" | "ru" | "nb">;
/**
* Inner custom template used to display the event detail.
*/
readonly innerEventCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Inner custom template used to display the event description.
*/
readonly eventDescriptionCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Boolean used to enable or disable the animations.
*/
readonly enableAnimation: _angular_core.InputSignal<boolean>;
/**
* Orientation of the timeline.
*/
readonly orientation: _angular_core.InputSignal<NgxTimelineOrientation>;
/**
* Output click event emitter.
*/
readonly clickEmitter: _angular_core.OutputEmitterRef<NgxTimelineItem>;
ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
ngxTimelineOrientation: typeof NgxTimelineOrientation;
private readonly monthAbbr;
private readonly dayFormat;
getDateObj(): {
day: unknown;
month: unknown;
year: unknown;
};
protected getLangCode(): SupportedLanguageCode;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTimelineEventComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxTimelineEventComponent, "ngx-timeline-event", never, { "event": { "alias": "event"; "required": true; "isSignal": true; }; "colSidePosition": { "alias": "colSidePosition"; "required": false; "isSignal": true; }; "langCode": { "alias": "langCode"; "required": false; "isSignal": true; }; "innerEventCustomTemplate": { "alias": "innerEventCustomTemplate"; "required": false; "isSignal": true; }; "eventDescriptionCustomTemplate": { "alias": "eventDescriptionCustomTemplate"; "required": false; "isSignal": true; }; "enableAnimation": { "alias": "enableAnimation"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "clickEmitter": "clickEmitter"; }, never, never, true, never>;
}
declare class NgxDatePipe implements PipeTransform {
transform(date: Date | string, dateFormat?: NgxDateFormat | string, langCode?: SupportedLanguageCode): string | null;
private dateFormat;
private getDateConfig;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDatePipe, never>;
static ɵpipe: _angular_core.ɵɵPipeDeclaration<NgxDatePipe, "ngxdate", true>;
}
declare class NgxTimelineModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTimelineModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgxTimelineModule, never, [typeof NgxDatePipe, typeof NgxTimelineComponent, typeof NgxTimelineEventComponent], [typeof NgxDatePipe, typeof NgxTimelineComponent]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxTimelineModule>;
}
export { NgxDateFormat, NgxDatePipe, NgxTimelineComponent, NgxTimelineEventChangeSide, NgxTimelineEventComponent, NgxTimelineEventGroup, NgxTimelineItemPosition, NgxTimelineModule, NgxTimelineOrientation, dateConfigMap, defaultSupportedLanguageCode, fieldConfigDate, fieldsToAddEventGroup, fieldsToCheckEventChangeSideInGroup, periodKeyDateFormat, supportedLanguageCodes };
export type { NgxConfigDate, NgxTimelineEvent, NgxTimelineItem, NgxTimelinePeriodInfo, SupportedLanguageCode };