@frxjs/ngx-timeline 1.0.3 → 1.0.7

package/frxjs-ngx-timeline.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"exports":[{"from":"./lib/ngx-date-pipe"},{"from":"./lib/NgxTimelineEvent"}],"metadata":{"NgxTimelineModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"ngx-timeline","template":"<div class=\"main-container\">\r\n  <div class=\"items-container\">\r\n    <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n      <!-- DESKTOP -->\r\n      <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n        <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n        </div>\r\n        <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n        <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {index: index}\"></ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n        <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n        </div>\r\n        <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- MOBILE -->\r\n      <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n        <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n          <div class=\"hour-inner-container\">\r\n            <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n        <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n            <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {index: index}\"></ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n        <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n          <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></ng-container>\r\n  <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate>\r\n  <div class=\"center-icon-container\">\r\n    <div class=\"icon\"></div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n  <span>\r\n    {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index>\r\n  <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n  <div class=\"period-container\">\r\n    <div class=\"period-inner-container\">\r\n      <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n  <ngx-timeline-event\r\n    [event]=\"event\"\r\n    [langCode]=\"langCode\"\r\n    [enableAnimation]=\"enableAnimation\"\r\n    [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n    [colSidePosition]=\"colSidePosition\"\r\n    (clickEmitter)=\"clickEmitter.next($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","styles":[".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end}.col-left,.col-right{padding:0;flex:49 49 0}.col-right{align-items:flex-start}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width:900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner,.period-container{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}"]}]}],"members":{"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"langCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"enableAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"groupEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"changeSideInGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"periodCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"eventCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"centerIconCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"dateInstantCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"innerEventCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"clickEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"getPeriodKeyDateFormat":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"groupEvents":[{"__symbolic":"method"}],"sortEvents":[{"__symbolic":"method"}],"setGroups":[{"__symbolic":"method"}],"setItems":[{"__symbolic":"method"}],"addPeriodEvents":[{"__symbolic":"method"}],"pushEventOnItems":[{"__symbolic":"method"}],"compareEvents":[{"__symbolic":"method"}],"compareEventsField":[{"__symbolic":"method"}],"setPeriods":[{"__symbolic":"method"}],"getPeriodInfo":[{"__symbolic":"method"}],"getPeriodKeyFromEvent":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"ngx-timeline-event","template":"<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\">\n  <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n  <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n    <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\">\n    </ng-container>\n  </div>\n  <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n  <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n    <div class=\"event-info-container\">\n      <div class=\"event-info-header\">\n        <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n      </div>\n      <div class=\"event-info-body\">\n        <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr/>\n    </div>\n\n    <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n      <div>\n        <p>{{dateObj?.month}}</p>\n      </div>\n      <div>\n        <p class=\"day\">{{dateObj?.day}}</p>\n      </div>\n      <div>\n        <p>{{dateObj?.year}}</p>\n      </div>\n    </div>\n  </div>\n</ng-template>\n","styles":[".event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0 0 #244a6e22);border-left:.5rem solid #fff}.arrow.left{filter:drop-shadow(-1px 0 0 #244a6e22);border-right:.5rem solid #fff}.event{background:#fff;border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:#fff 0 0 no-repeat padding-box;box-shadow:0 3px 6px rgba(36,74,110,.3215686274509804)}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .icon-container nb-icon{color:orange;width:1.5rem;height:1.5rem;margin-bottom:.1rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .category-container,.event-container .event-info-container .event-info-body .expiration-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .category-container p,.event-container .event-info-container .event-info-body .expiration-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .category-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .expiration-container .expiration-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .category-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .expiration-container .expiration-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-info-container .event-info-footer .footer-inner-container nb-icon{color:#006cb4;width:1rem;height:1rem;margin-bottom:.1rem}.event-container .event-info-container .event-info-footer p{margin:0;color:#006cb4}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:#e9e9e9}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}"]}]}],"members":{"event":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"colSidePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"langCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"innerEventCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"enableAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"clickEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getDateObj":[{"__symbolic":"method"}],"getLangCode":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"ngxdate","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transform":[{"__symbolic":"method"}],"dateFormat":[{"__symbolic":"method"}],"getDateConfig":[{"__symbolic":"method"}]}}},"origins":{"NgxTimelineModule":"./lib/ngx-timeline.module","ɵa":"./lib/components/ngx-timeline.component","ɵb":"./lib/components/ngx-timeline-event/ngx-timeline-event.component","ɵc":"./lib/pipes/ngx-date-pipe"},"importAs":"@frxjs/ngx-timeline"}

package/{projects/ngx-timeline/src/lib/components/index.ts → lib/components/index.d.ts}

@@ -1,2 +1,2 @@
-export * from './ngx-timeline.component';
-export * from './ngx-timeline-event/ngx-timeline-event.component';
+export * from './ngx-timeline.component';
+export * from './ngx-timeline-event/ngx-timeline-event.component';

package/lib/components/ngx-timeline-event/ngx-timeline-event.component.d.ts

@@ -0,0 +1,35 @@
+import { TemplateRef } from '@angular/core';
+import { NgxTimelineItem, NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';
+import { BehaviorSubject } from 'rxjs';
+export declare class NgxTimelineEventComponent {
+    /**
+     * Event to be displayed
+     */
+    event: NgxTimelineItem;
+    /**
+     * Event position respect to the vertical line (LEFT or RIGHT)
+     */
+    colSidePosition: NgxTimelineItemPosition;
+    /**
+     * Language code used to format the dates
+     */
+    langCode?: string;
+    /**
+     * Inner custom template used to display the event detail
+     */
+    innerEventCustomTemplate?: TemplateRef<any>;
+    /**
+     * Boolean used to enable or disable the animations
+     */
+    enableAnimation: boolean;
+    /**
+     * Output click event emitter
+     */
+    clickEmitter: BehaviorSubject<NgxTimelineItem>;
+    ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
+    private readonly monthAbbr;
+    private readonly dayFormat;
+    constructor();
+    getDateObj(): any;
+    protected getLangCode(): string;
+}

package/lib/components/ngx-timeline.component.d.ts

@@ -0,0 +1,76 @@
+import { OnInit, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
+import { NgxTimelineEvent, NgxTimelineItem, NgxTimelineItemPosition, NgxTimelinePeriodInfo, NgxDateFormat, NgxTimelineEventGroup, NgxTimelineEventChangeSideInGroup } from '../models';
+import { BehaviorSubject } from 'rxjs';
+export declare class NgxTimelineComponent implements OnInit, OnChanges {
+    /**
+     * List of events to be displayed
+     */
+    events: NgxTimelineEvent[];
+    /**
+     * Language code used to show the date formatted
+     */
+    langCode?: string;
+    /**
+     * Boolean used to enable or disable the animations
+     */
+    enableAnimation: boolean;
+    /**
+     * Logic to be applied in order to group events
+     */
+    groupEvent?: NgxTimelineEventGroup;
+    /**
+     * Logic to be applied in order to put evetns on LEFT or RIGHT
+     */
+    changeSideInGroup?: NgxTimelineEventChangeSideInGroup;
+    /**
+     * Custom Template displayed before a group of events
+     */
+    periodCustomTemplate: TemplateRef<any>;
+    /**
+     * Custom Template displayed to show a single event
+     */
+    eventCustomTemplate: TemplateRef<any>;
+    /**
+     * Custom Template displayed to show an separator icon
+     */
+    centerIconCustomTemplate: TemplateRef<any>;
+    /**
+     * Custom Template displayed to show the side date
+     */
+    dateInstantCustomTemplate: TemplateRef<any>;
+    /**
+     * Custom Template displayed to show the inner event
+     */
+    innerEventCustomTemplate: TemplateRef<any>;
+    /**
+     * Output click event emitter
+     */
+    clickEmitter: BehaviorSubject<NgxTimelineItem>;
+    groups: {
+        [key: string]: NgxTimelineEvent[];
+    };
+    periods: NgxTimelineItem[];
+    items: NgxTimelineItem[];
+    ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
+    ngxDateFormat: typeof NgxDateFormat;
+    private readonly separator;
+    constructor();
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    getPeriodKeyDateFormat(): string;
+    protected clear(): void;
+    protected groupEvents(events: NgxTimelineEvent[]): void;
+    protected sortEvents(events: NgxTimelineEvent[]): void;
+    protected setGroups(events: NgxTimelineEvent[]): void;
+    protected setItems(): void;
+    protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void;
+    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 setPeriods(): void;
+    private getPeriodInfo;
+    protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string;
+}

package/lib/models/NgxConfigObj.d.ts

@@ -0,0 +1,59 @@
+export declare let supportedLanguageCodes: string[];
+export interface NgxConfigDate {
+    code: string;
+    dayMonthYear: string;
+    fullDate: string;
+    hoursMinutes: string;
+    monthYear: string;
+    year: string;
+}
+export interface NgxDateObjMap {
+    [key: string]: NgxConfigDate;
+}
+export declare let dateConfigMap: NgxDateObjMap;
+export declare enum NgxDateFormat {
+    DAY_MONTH_YEAR = "DAY_MONTH_YEAR",
+    FULL_DATE = "FULL_DATE",
+    MONTH_YEAR = "MONTH_YEAR",
+    HOURS_MINUTES = "HOURS_MINUTES",
+    YEAR = "YEAR"
+}
+export declare let fieldConfigDate: {
+    MONTH_YEAR: string;
+    YEAR: string;
+    HOURS_MINUTES: string;
+    FULL_DATE: string;
+    DAY_MONTH_YEAR: string;
+};
+/**
+ * Enum used to set the group event logic
+ */
+export declare enum NgxTimelineEventGroup {
+    YEAR = "YEAR",
+    MONTH_YEAR = "MONTH_YEAR",
+    DAY_MONTH_YEAR = "DAY_MONTH_YEAR"
+}
+export declare let fieldsToAddEventGroup: {
+    YEAR: string[];
+    MONTH_YEAR: string[];
+    DAY_MONTH_YEAR: string[];
+};
+export declare let periodKeyDateFormat: {
+    YEAR: NgxDateFormat;
+    MONTH_YEAR: NgxDateFormat;
+    DAY_MONTH_YEAR: NgxDateFormat;
+};
+/**
+ * Enum used to set the change side event logic
+ */
+export declare enum NgxTimelineEventChangeSideInGroup {
+    ALL = "ALL",
+    ON_DIFFERENT_HMS = "ON_DIFFERENT_HMS",
+    ON_DIFFERENT_DAY = "ON_DIFFERENT_DAY",
+    ON_DIFFERENT_MONTH = "ON_DIFFERENT_MONTH"
+}
+export declare let fieldsToCheckEventChangeSideInGroup: {
+    ON_DIFFERENT_MONTH: string[];
+    ON_DIFFERENT_DAY: string[];
+    ON_DIFFERENT_HMS: string[];
+};

package/lib/models/NgxTimelineEvent.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Event to be provided from outside the timeline
+ */
+export interface NgxTimelineEvent {
+    timestamp?: Date;
+    title?: string;
+    description?: string;
+    id?: any;
+}
+export interface NgxTimelinePeriodInfo {
+    periodKey?: string;
+    year?: number;
+    month?: number;
+    day?: number;
+    firstDate?: any;
+}
+/**
+ * Item used inside the timeline
+ */
+export interface NgxTimelineItem {
+    type?: string;
+    position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;
+    periodInfo?: NgxTimelinePeriodInfo;
+    eventInfo?: NgxTimelineEvent;
+}
+export declare enum NgxTimelineItemPosition {
+    ON_LEFT = "ON_LEFT",
+    ON_RIGHT = "ON_RIGHT"
+}

package/{projects/ngx-timeline/src/lib/models/index.ts → lib/models/index.d.ts}

@@ -1,2 +1,2 @@
-export * from './NgxConfigObj';
-export * from './NgxTimelineEvent';
+export * from './NgxConfigObj';
+export * from './NgxTimelineEvent';

package/lib/ngx-timeline.module.d.ts

@@ -0,0 +1,2 @@
+export declare class NgxTimelineModule {
+}

package/{projects/ngx-timeline/src/lib/pipes/index.ts → lib/pipes/index.d.ts}

@@ -1 +1 @@
-export * from './ngx-date-pipe';
+export * from './ngx-date-pipe';

package/lib/pipes/ngx-date-pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+export declare class NgxDatePipe implements PipeTransform {
+    constructor();
+    transform(date: Date | string, dateFormat?: string, langCode?: string): string;
+    private dateFormat;
+    private getDateConfig;
+}

package/package.json

@@ -1,60 +1,31 @@
 {
   "name": "@frxjs/ngx-timeline",
-  "version": "1.0.3",
-  "keywords": ["angular", "timeline"],
+  "version": "1.0.7",
+  "keywords": [
+    "angular",
+    "timeline"
+  ],
   "author": {
     "name": "Emanuele Fricano",
     "email": "emanuelefricano93@gmail.com"
   },
+  "repository": {
+    "url": "https://github.com/emanuelefricano93/frxjs-Ngx-Timeline"
+  },
   "license": "MIT",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "build:prod": "ng build --prod",
-    "watch-lib": "ng build --watch",
-    "start-dev": "npm run link && npm run link-lib && npm run start",
-    "test": "ng test",
-    "lint": "ng lint",
-    "lint:fix": "ng lint --fix",
-    "e2e": "ng e2e",
-    "link": "cd dist/ngx-timeline && npm link",
-    "link-lib": "npm link @frxjs/ngx-timeline",
-    "prepare-github-pages": "ng build demo-app --prod --baseHref=https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/",
-    "publish": "ng build --prod && cd dist/ngx-timeline && npm publish --access public"
+  "peerDependencies": {
+    "@angular/common": "^11.0.9",
+    "@angular/core": "^11.0.9"
   },
-  "private": false,
   "dependencies": {
-    "@angular/animations": "~11.0.1",
-    "@angular/common": "~11.0.1",
-    "@angular/compiler": "~11.0.1",
-    "@angular/core": "~11.0.1",
-    "@angular/forms": "~11.0.1",
-    "@angular/platform-browser": "~11.0.1",
-    "@angular/platform-browser-dynamic": "~11.0.1",
-    "@angular/router": "~11.0.1",
-    "rxjs": "~6.6.0",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "tslib": "^2.0.0"
   },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.7",
-    "@angular/cli": "~11.0.2",
-    "@angular/compiler-cli": "~11.0.1",
-    "@types/jasmine": "~3.6.0",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.1.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^11.0.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.0.2"
-  }
-}
+  "main": "bundles/frxjs-ngx-timeline.umd.js",
+  "module": "fesm2015/frxjs-ngx-timeline.js",
+  "es2015": "fesm2015/frxjs-ngx-timeline.js",
+  "esm2015": "esm2015/frxjs-ngx-timeline.js",
+  "fesm2015": "fesm2015/frxjs-ngx-timeline.js",
+  "typings": "frxjs-ngx-timeline.d.ts",
+  "metadata": "frxjs-ngx-timeline.metadata.json",
+  "sideEffects": false
+}

package/{projects/ngx-timeline/src/public-api.ts → public-api.d.ts}

@@ -1,7 +1,4 @@
-/*
- * Public API Surface of ngx-timeline
- */
-export * from './lib/components';
-export * from './lib/models';
-export * from './lib/pipes/';
-export * from './lib/ngx-timeline.module';
+export * from './lib/components';
+export * from './lib/models';
+export * from './lib/pipes/';
+export * from './lib/ngx-timeline.module';

package/.editorconfig

@@ -1,16 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.github/workflows/main.yml

@@ -1,25 +0,0 @@
-name: npm-publish
-on:
-  push:
-    branches:
-      - master
-jobs:
-  npm-publish:
-    name: npm-publish
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-    - name: Publish if version has been updated
-      uses: pascalgn/npm-publish-action@1.3.8
-      with: #if the version will be updated in package.json to 1.2.3 with the commit message Release 1.2.3 the action will perform a new tag before publishing
-        tag_name: "v%s"
-        tag_message: "v%s"
-        create_tag: "true"
-        commit_pattern: "^Release (\\S+)"
-        workspace: "."
-        publish_command: "yarn"
-        publish_args: "--non-interactive"
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/angular.json

@@ -1,169 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "ngx-timeline": {
-      "projectType": "library",
-      "root": "projects/ngx-timeline",
-      "sourceRoot": "projects/ngx-timeline/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "tsConfig": "projects/ngx-timeline/tsconfig.lib.json",
-            "project": "projects/ngx-timeline/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/ngx-timeline/tsconfig.lib.prod.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/ngx-timeline/src/test.ts",
-            "tsConfig": "projects/ngx-timeline/tsconfig.spec.json",
-            "codeCoverage": true,
-            "karmaConfig": "projects/ngx-timeline/karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/ngx-timeline/tsconfig.lib.json",
-              "projects/ngx-timeline/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "demo-app": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "projects/demo-app",
-      "sourceRoot": "projects/demo-app/src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "docs",
-            "index": "projects/demo-app/src/index.html",
-            "main": "projects/demo-app/src/main.ts",
-            "polyfills": "projects/demo-app/src/polyfills.ts",
-            "tsConfig": "projects/demo-app/tsconfig.app.json",
-            "aot": true,
-            "assets": [
-              "projects/demo-app/src/favicon.ico",
-              "projects/demo-app/src/assets"
-            ],
-            "styles": [
-              "projects/demo-app/src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "projects/demo-app/src/environments/environment.ts",
-                  "with": "projects/demo-app/src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "demo-app:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "demo-app:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "demo-app:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/demo-app/src/test.ts",
-            "polyfills": "projects/demo-app/src/polyfills.ts",
-            "tsConfig": "projects/demo-app/tsconfig.spec.json",
-            "karmaConfig": "projects/demo-app/karma.conf.js",
-            "assets": [
-              "projects/demo-app/src/favicon.ico",
-              "projects/demo-app/src/assets"
-            ],
-            "styles": [
-              "projects/demo-app/src/styles.scss"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/demo-app/tsconfig.app.json",
-              "projects/demo-app/tsconfig.spec.json",
-              "projects/demo-app/e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "projects/demo-app/e2e/protractor.conf.js",
-            "devServerTarget": "demo-app:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "demo-app:serve:production"
-            }
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "ngx-timeline"
-}