@frxjs/ngx-timeline 1.0.12 → 1.2.1

package/fesm2020/frxjs-ngx-timeline.mjs

@@ -0,0 +1,375 @@
+import * as i0 from '@angular/core';
+import { Component, Input, Output, Pipe, NgModule } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import * as i1 from '@angular/common';
+import { DatePipe, registerLocaleData, CommonModule } from '@angular/common';
+import localeIt from '@angular/common/locales/it';
+import localeFr from '@angular/common/locales/fr';
+import localeDe from '@angular/common/locales/de';
+import localeEs from '@angular/common/locales/es';
+
+const supportedLanguageCodes = ['en', 'it', 'fr', 'de', 'es'];
+const dateConfigMap = {
+    en: {
+        code: 'en-US',
+        fullDate: 'MM/dd/yyyy h:mm a',
+        dayMonthYear: 'dd MMMM yyyy',
+        monthYear: 'MMMM yyyy',
+        year: 'yyyy',
+        hoursMinutes: 'hh:mm a',
+    },
+    it: {
+        code: 'it-IT',
+        fullDate: 'dd/MM/yyyy H:mm',
+        dayMonthYear: 'dd MMMM yyyy',
+        monthYear: 'MMMM yyyy',
+        year: 'yyyy',
+        hoursMinutes: 'HH:mm',
+    },
+    fr: {
+        code: 'fr-FR',
+        fullDate: 'dd/MM/yyyy H:mm',
+        dayMonthYear: 'dd MMMM yyyy',
+        monthYear: 'MMMM yyyy',
+        year: 'yyyy',
+        hoursMinutes: 'HH:mm',
+    },
+    de: {
+        code: 'de',
+        fullDate: 'dd/MM/yyyy H:mm',
+        dayMonthYear: 'dd MMMM yyyy',
+        monthYear: 'MMMM yyyy',
+        year: 'yyyy',
+        hoursMinutes: 'HH:mm',
+    },
+    es: {
+        code: 'es',
+        fullDate: 'dd/MM/yyyy H:mm',
+        dayMonthYear: 'dd MMMM yyyy',
+        monthYear: 'MMMM yyyy',
+        year: 'yyyy',
+        hoursMinutes: 'HH:mm',
+    },
+};
+var NgxDateFormat;
+(function (NgxDateFormat) {
+    NgxDateFormat["DAY_MONTH_YEAR"] = "DAY_MONTH_YEAR";
+    NgxDateFormat["FULL_DATE"] = "FULL_DATE";
+    NgxDateFormat["MONTH_YEAR"] = "MONTH_YEAR";
+    NgxDateFormat["HOURS_MINUTES"] = "HOURS_MINUTES";
+    NgxDateFormat["YEAR"] = "YEAR";
+})(NgxDateFormat || (NgxDateFormat = {}));
+const fieldConfigDate = {
+    MONTH_YEAR: 'monthYear',
+    YEAR: 'year',
+    HOURS_MINUTES: 'hoursMinutes',
+    FULL_DATE: 'fullDate',
+    DAY_MONTH_YEAR: 'dayMonthYear',
+};
+/**
+ * Enum used to set the group event logic
+ */
+var NgxTimelineEventGroup;
+(function (NgxTimelineEventGroup) {
+    NgxTimelineEventGroup["YEAR"] = "YEAR";
+    NgxTimelineEventGroup["MONTH_YEAR"] = "MONTH_YEAR";
+    NgxTimelineEventGroup["DAY_MONTH_YEAR"] = "DAY_MONTH_YEAR";
+})(NgxTimelineEventGroup || (NgxTimelineEventGroup = {}));
+const fieldsToAddEventGroup = {
+    YEAR: ['getFullYear'],
+    MONTH_YEAR: ['getFullYear', 'getMonth'],
+    DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],
+};
+const periodKeyDateFormat = {
+    YEAR: NgxDateFormat.YEAR,
+    MONTH_YEAR: NgxDateFormat.MONTH_YEAR,
+    DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,
+};
+/**
+ * Enum used to set the change side event logic
+ */
+var NgxTimelineEventChangeSideInGroup;
+(function (NgxTimelineEventChangeSideInGroup) {
+    NgxTimelineEventChangeSideInGroup["ALL"] = "ALL";
+    NgxTimelineEventChangeSideInGroup["ON_DIFFERENT_HMS"] = "ON_DIFFERENT_HMS";
+    NgxTimelineEventChangeSideInGroup["ON_DIFFERENT_DAY"] = "ON_DIFFERENT_DAY";
+    NgxTimelineEventChangeSideInGroup["ON_DIFFERENT_MONTH"] = "ON_DIFFERENT_MONTH";
+})(NgxTimelineEventChangeSideInGroup || (NgxTimelineEventChangeSideInGroup = {}));
+const fieldsToCheckEventChangeSideInGroup = {
+    ON_DIFFERENT_MONTH: ['getFullYear', 'getMonth'],
+    ON_DIFFERENT_DAY: ['getFullYear', 'getMonth', 'getDate'],
+    ON_DIFFERENT_HMS: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],
+};
+
+var NgxTimelineItemPosition;
+(function (NgxTimelineItemPosition) {
+    NgxTimelineItemPosition["ON_LEFT"] = "ON_LEFT";
+    NgxTimelineItemPosition["ON_RIGHT"] = "ON_RIGHT";
+})(NgxTimelineItemPosition || (NgxTimelineItemPosition = {}));
+
+class NgxTimelineEventComponent {
+    constructor() {
+        /**
+         * Boolean used to enable or disable the animations
+         */
+        this.enableAnimation = true;
+        /**
+         * Output click event emitter
+         */
+        this.clickEmitter = new BehaviorSubject(null);
+        this.ngxTimelineItemPosition = NgxTimelineItemPosition;
+        this.monthAbbr = 'MMM';
+        this.dayFormat = 'dd';
+    }
+    getDateObj() {
+        let day;
+        let month;
+        let year;
+        const dateTimestamp = this.event?.eventInfo?.timestamp;
+        if (dateTimestamp) {
+            const timestamp = new Date(dateTimestamp);
+            const langCode = this.getLangCode();
+            month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);
+            day = new DatePipe(langCode).transform(timestamp, this.dayFormat);
+            year = timestamp.getFullYear();
+        }
+        return { day, month, year };
+    }
+    getLangCode() {
+        return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];
+    }
+}
+NgxTimelineEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: { event: "event", colSidePosition: "colSidePosition", langCode: "langCode", innerEventCustomTemplate: "innerEventCustomTemplate", enableAnimation: "enableAnimation" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, 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    >\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 0px 0px #244a6e22);border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px #244a6e22);border-right:.5rem solid white}.event{background:white;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:#ffffff 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.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 .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-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}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "titlecase": i1.TitleCasePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
+            type: Component,
+            args: [{ 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    >\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 0px 0px #244a6e22);border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px #244a6e22);border-right:.5rem solid white}.event{background:white;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:#ffffff 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.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 .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { event: [{
+                type: Input
+            }], colSidePosition: [{
+                type: Input
+            }], langCode: [{
+                type: Input
+            }], innerEventCustomTemplate: [{
+                type: Input
+            }], enableAnimation: [{
+                type: Input
+            }], clickEmitter: [{
+                type: Output
+            }] } });
+
+class NgxDatePipe {
+    constructor() {
+    }
+    transform(date, dateFormat, langCode) {
+        let transformedDate = null;
+        if (date) {
+            const objDate = this.getDateConfig(langCode);
+            transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));
+        }
+        return transformedDate;
+    }
+    dateFormat(dateFormat, configDate) {
+        return configDate[fieldConfigDate[dateFormat]];
+    }
+    getDateConfig(langCode) {
+        const code = langCode || supportedLanguageCodes[0];
+        const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];
+        return configDate;
+    }
+}
+NgxDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NgxDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxDatePipe, name: "ngxdate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxDatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ngxdate', pure: false }]
+        }], ctorParameters: function () { return []; } });
+
+class NgxTimelineComponent {
+    constructor() {
+        /**
+         * Boolean used to enable or disable the animations
+         */
+        this.enableAnimation = true;
+        /**
+         * Boolean used to reverse sort order (default older first)
+         */
+        this.reverseOrder = false;
+        /**
+         * Logic to be applied in order to group events
+         */
+        this.groupEvent = NgxTimelineEventGroup.MONTH_YEAR;
+        /**
+         * Logic to be applied in order to put evetns on LEFT or RIGHT
+         */
+        this.changeSideInGroup = NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY;
+        /**
+         * Output click event emitter
+         */
+        this.clickEmitter = new BehaviorSubject(null);
+        this.groups = {};
+        this.periods = [];
+        this.items = [];
+        this.ngxTimelineItemPosition = NgxTimelineItemPosition;
+        this.ngxDateFormat = NgxDateFormat;
+        this.separator = '/';
+    }
+    ngOnInit() {
+        this.groupEvents(this.events);
+    }
+    ngOnChanges(changes) {
+        this.groupEvents(this.events);
+    }
+    getPeriodKeyDateFormat() {
+        return periodKeyDateFormat[this.groupEvent];
+    }
+    clear() {
+        this.groups = {};
+        this.periods = [];
+        this.items = [];
+    }
+    groupEvents(events) {
+        if (events) {
+            this.clear();
+            this.sortEvents(events);
+            this.setGroups(events);
+            this.setPeriods();
+            this.setItems();
+        }
+    }
+    sortEvents(events) {
+        events.sort((a, b) => {
+            const aTime = a.timestamp.getTime();
+            const bTime = b.timestamp.getTime();
+            return this.reverseOrder ? bTime - aTime : aTime - bTime;
+        });
+    }
+    setGroups(events) {
+        events.forEach((event) => {
+            // conversion from string to actual Date
+            event.timestamp = new Date(event.timestamp);
+            const periodKey = this.getPeriodKeyFromEvent(event);
+            if (!this.groups[periodKey]) {
+                this.groups[periodKey] = [];
+            }
+            this.groups[periodKey].push(event);
+        });
+    }
+    setItems() {
+        this.periods.forEach((p) => {
+            // insert first the period
+            this.items.push(p);
+            // in each period putting items on left
+            const onLeft = true;
+            const periodInfo = p.periodInfo;
+            // insert then all the events in this period
+            this.addPeriodEvents(periodInfo, onLeft);
+            // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);
+        });
+    }
+    addPeriodEvents(periodInfo, onLeft) {
+        this.groups[periodInfo.periodKey].forEach((event, index) => {
+            const prevEvent = this.groups[periodInfo.periodKey][index - 1];
+            if (index > 0 && this.compareEvents(prevEvent, event)) {
+                onLeft = !onLeft;
+            }
+            this.pushEventOnItems(event, onLeft);
+        });
+        // return onLeft;
+    }
+    pushEventOnItems(event, onLeft) {
+        this.items.push({
+            eventInfo: { ...event }, position: onLeft ?
+                this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,
+        });
+    }
+    /**
+     * Compare the events inside the same group
+     */
+    compareEvents(prevEvent, event) {
+        return this.changeSideInGroup === NgxTimelineEventChangeSideInGroup.ALL ||
+            this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSideInGroup]);
+    }
+    compareEventsField(prevEvent, event, ...fields) {
+        return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);
+    }
+    setPeriods() {
+        this.periods = Object.keys(this.groups).map((periodKey) => {
+            const split = periodKey.split(this.separator);
+            return this.getPeriodInfo(split, periodKey);
+        });
+    }
+    getPeriodInfo(split, periodKey) {
+        return {
+            periodInfo: {
+                year: Number(split[0]),
+                month: Number(split[1]),
+                day: Number(split[2]),
+                periodKey,
+                firstDate: this.groups[periodKey][0].timestamp,
+            },
+        };
+    }
+    getPeriodKeyFromEvent(event) {
+        return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);
+    }
+}
+NgxTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", groupEvent: "groupEvent", changeSideInGroup: "changeSideInGroup", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, 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;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.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: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:white}.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{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;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}}\n"], components: [{ type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "ngxdate": NgxDatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ 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;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.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: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:white}.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{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;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}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { events: [{
+                type: Input
+            }], langCode: [{
+                type: Input
+            }], enableAnimation: [{
+                type: Input
+            }], reverseOrder: [{
+                type: Input
+            }], groupEvent: [{
+                type: Input
+            }], changeSideInGroup: [{
+                type: Input
+            }], periodCustomTemplate: [{
+                type: Input
+            }], eventCustomTemplate: [{
+                type: Input
+            }], centerIconCustomTemplate: [{
+                type: Input
+            }], dateInstantCustomTemplate: [{
+                type: Input
+            }], innerEventCustomTemplate: [{
+                type: Input
+            }], clickEmitter: [{
+                type: Output
+            }] } });
+
+registerLocaleData(localeIt);
+registerLocaleData(localeFr);
+registerLocaleData(localeDe);
+registerLocaleData(localeEs);
+class NgxTimelineModule {
+}
+NgxTimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxTimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineModule, declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe], imports: [CommonModule], exports: [NgxTimelineComponent, NgxDatePipe] });
+NgxTimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],
+                    imports: [CommonModule],
+                    exports: [NgxTimelineComponent, NgxDatePipe],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-timeline
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxDateFormat, NgxDatePipe, NgxTimelineComponent, NgxTimelineEventChangeSideInGroup, NgxTimelineEventComponent, NgxTimelineEventGroup, NgxTimelineItemPosition, NgxTimelineModule, dateConfigMap, fieldConfigDate, fieldsToAddEventGroup, fieldsToCheckEventChangeSideInGroup, periodKeyDateFormat, supportedLanguageCodes };
+//# sourceMappingURL=frxjs-ngx-timeline.mjs.map

package/fesm2020/frxjs-ngx-timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frxjs-ngx-timeline.mjs","sources":["../../../projects/ngx-timeline/src/lib/models/NgxConfigObj.ts","../../../projects/ngx-timeline/src/lib/models/NgxTimelineEvent.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.html","../../../projects/ngx-timeline/src/lib/pipes/ngx-date-pipe.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline.component.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline.component.html","../../../projects/ngx-timeline/src/lib/ngx-timeline.module.ts","../../../projects/ngx-timeline/src/public-api.ts","../../../projects/ngx-timeline/src/frxjs-ngx-timeline.ts"],"sourcesContent":["export const supportedLanguageCodes = ['en', 'it', 'fr', 'de', 'es'];\n\nexport interface NgxConfigDate {\n  code: string;\n  dayMonthYear: string;\n  fullDate: string;\n  hoursMinutes: string;\n  monthYear: string;\n  year: string;\n}\n\nexport interface NgxDateObjMap {\n  [key: string]: NgxConfigDate;\n}\n\nexport const dateConfigMap: NgxDateObjMap = {\n  en: {\n    code: 'en-US',\n    fullDate: 'MM/dd/yyyy h:mm a',\n    dayMonthYear: 'dd MMMM yyyy',\n    monthYear: 'MMMM yyyy',\n    year: 'yyyy',\n    hoursMinutes: 'hh:mm a',\n  },\n  it: {\n    code: 'it-IT',\n    fullDate: 'dd/MM/yyyy H:mm',\n    dayMonthYear: 'dd MMMM yyyy',\n    monthYear: 'MMMM yyyy',\n    year: 'yyyy',\n    hoursMinutes: 'HH:mm',\n  },\n  fr: {\n    code: 'fr-FR',\n    fullDate: 'dd/MM/yyyy H:mm',\n    dayMonthYear: 'dd MMMM yyyy',\n    monthYear: 'MMMM yyyy',\n    year: 'yyyy',\n    hoursMinutes: 'HH:mm',\n  },\n  de: {\n    code: 'de',\n    fullDate: 'dd/MM/yyyy H:mm',\n    dayMonthYear: 'dd MMMM yyyy',\n    monthYear: 'MMMM yyyy',\n    year: 'yyyy',\n    hoursMinutes: 'HH:mm',\n  },\n  es: {\n    code: 'es',\n    fullDate: 'dd/MM/yyyy H:mm',\n    dayMonthYear: 'dd MMMM yyyy',\n    monthYear: 'MMMM yyyy',\n    year: 'yyyy',\n    hoursMinutes: 'HH:mm',\n  },\n};\n\nexport enum NgxDateFormat {\n  DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n  FULL_DATE = 'FULL_DATE',\n  MONTH_YEAR = 'MONTH_YEAR',\n  HOURS_MINUTES = 'HOURS_MINUTES',\n  YEAR = 'YEAR'\n}\n\nexport const fieldConfigDate = {\n  MONTH_YEAR: 'monthYear',\n  YEAR: 'year',\n  HOURS_MINUTES: 'hoursMinutes',\n  FULL_DATE: 'fullDate',\n  DAY_MONTH_YEAR: 'dayMonthYear',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n  YEAR = 'YEAR',\n  MONTH_YEAR = 'MONTH_YEAR',\n  DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'\n}\n\nexport const fieldsToAddEventGroup = {\n  YEAR: ['getFullYear'],\n  MONTH_YEAR: ['getFullYear', 'getMonth'],\n  DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat = {\n  YEAR: NgxDateFormat.YEAR,\n  MONTH_YEAR: NgxDateFormat.MONTH_YEAR,\n  DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,\n};\n\n/**\n * Enum used to set the change side event logic\n */\nexport enum NgxTimelineEventChangeSideInGroup {\n  ALL = 'ALL',\n  ON_DIFFERENT_HMS = 'ON_DIFFERENT_HMS',\n  ON_DIFFERENT_DAY = 'ON_DIFFERENT_DAY',\n  ON_DIFFERENT_MONTH = 'ON_DIFFERENT_MONTH'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n  ON_DIFFERENT_MONTH: ['getFullYear', 'getMonth'],\n  ON_DIFFERENT_DAY: ['getFullYear', 'getMonth', 'getDate'],\n  ON_DIFFERENT_HMS: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],\n};\n","/**\n * Event to be provided from outside the timeline\n */\nexport interface NgxTimelineEvent {\n  timestamp?: Date;\n  title?: string;\n  description?: string;\n  id?: any;\n}\n\nexport interface NgxTimelinePeriodInfo {\n  periodKey?: string;\n  year?: number;\n  month?: number;\n  day?: number;\n  firstDate?: any;\n}\n\n/**\n * Item used inside the timeline\n */\nexport interface NgxTimelineItem {\n  type?: string;\n  position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;\n  periodInfo?: NgxTimelinePeriodInfo;\n  eventInfo?: NgxTimelineEvent;\n}\n\nexport enum NgxTimelineItemPosition {\n  ON_LEFT = 'ON_LEFT',\n  ON_RIGHT = 'ON_RIGHT'\n}\n","import {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\nimport {DatePipe} from '@angular/common';\nimport {BehaviorSubject} from 'rxjs';\nimport {supportedLanguageCodes} from '../../models';\n\n@Component({\n  selector: 'ngx-timeline-event',\n  templateUrl: './ngx-timeline-event.component.html',\n  styleUrls: ['./ngx-timeline-event.component.scss'],\n})\nexport class NgxTimelineEventComponent {\n  /**\n   * Event to be displayed\n   */\n  @Input() event: NgxTimelineItem;\n  /**\n   * Event position respect to the vertical line (LEFT or RIGHT)\n   */\n  @Input() colSidePosition: NgxTimelineItemPosition;\n  /**\n   * Language code used to format the dates\n   */\n  @Input() langCode?: string;\n  /**\n   * Inner custom template used to display the event detail\n   */\n  @Input() innerEventCustomTemplate?: TemplateRef<any>;\n  /**\n   * Boolean used to enable or disable the animations\n   */\n  @Input() enableAnimation = true;\n  /**\n   * Output click event emitter\n   */\n  @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n  ngxTimelineItemPosition = NgxTimelineItemPosition;\n\n  private readonly monthAbbr = 'MMM';\n  private readonly dayFormat = 'dd';\n\n  constructor() { }\n\n  getDateObj(): any {\n    let day;\n    let month;\n    let year;\n    const dateTimestamp = this.event?.eventInfo?.timestamp;\n    if (dateTimestamp) {\n      const timestamp = new Date(dateTimestamp);\n      const langCode = this.getLangCode();\n      month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);\n      day = new DatePipe(langCode).transform(timestamp, this.dayFormat);\n      year = timestamp.getFullYear();\n    }\n\n    return {day, month, year};\n  }\n\n  protected getLangCode(): string {\n    return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];\n  }\n}\n","<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    >\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","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\nimport {NgxConfigDate, NgxDateObjMap, NgxDateFormat, supportedLanguageCodes, fieldConfigDate, dateConfigMap} from '../models';\n\n@Pipe({name: 'ngxdate', pure: false})\nexport class NgxDatePipe implements PipeTransform {\n  constructor() {\n  }\n\n  transform(date: Date | string, dateFormat?: string, langCode?: string): string {\n    let transformedDate = null;\n    if (date) {\n      const objDate = this.getDateConfig(langCode);\n      transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));\n    }\n    return transformedDate;\n  }\n\n  private dateFormat(dateFormat: string, configDate: NgxConfigDate): string {\n    return configDate[fieldConfigDate[dateFormat]];\n  }\n\n  private getDateConfig(langCode: string): NgxConfigDate {\n    const code = langCode || supportedLanguageCodes[0];\n    const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];\n    return configDate;\n  }\n}\n","import {Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output} from '@angular/core';\nimport {\n  NgxTimelineEvent,\n  NgxTimelineItem,\n  NgxTimelineItemPosition,\n  NgxTimelinePeriodInfo,\n  NgxDateFormat,\n  NgxTimelineEventGroup,\n  NgxTimelineEventChangeSideInGroup,\n  periodKeyDateFormat,\n  fieldsToCheckEventChangeSideInGroup,\n  fieldsToAddEventGroup} from '../models';\nimport {BehaviorSubject} from 'rxjs';\n\n@Component({\n  selector: 'ngx-timeline',\n  templateUrl: './ngx-timeline.component.html',\n  styleUrls: ['./ngx-timeline.scss'],\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges {\n  /**\n   * List of events to be displayed\n   */\n  @Input() events: NgxTimelineEvent[];\n  /**\n   * Language code used to show the date formatted\n   */\n  @Input() langCode?: string;\n  /**\n   * Boolean used to enable or disable the animations\n   */\n  @Input() enableAnimation = true;\n  /**\n   * Boolean used to reverse sort order (default older first)\n   */\n  @Input() reverseOrder = false;\n  /**\n   * Logic to be applied in order to group events\n   */\n  @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;\n  /**\n   * Logic to be applied in order to put evetns on LEFT or RIGHT\n   */\n  @Input() changeSideInGroup?: NgxTimelineEventChangeSideInGroup = NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY;\n  /**\n   * Custom Template displayed before a group of events\n   */\n  @Input() periodCustomTemplate: TemplateRef<any>;\n  /**\n   * Custom Template displayed to show a single event\n   */\n  @Input() eventCustomTemplate: TemplateRef<any>;\n  /**\n   * Custom Template displayed to show an separator icon\n   */\n  @Input() centerIconCustomTemplate: TemplateRef<any>;\n  /**\n   * Custom Template displayed to show the side date\n   */\n  @Input() dateInstantCustomTemplate: TemplateRef<any>;\n  /**\n   * Custom Template displayed to show the inner event\n   */\n  @Input() innerEventCustomTemplate: TemplateRef<any>;\n  /**\n   * Output click event emitter\n   */\n  @Output()\n    clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n  groups: { [key: string]: NgxTimelineEvent[] } = {};\n  periods: NgxTimelineItem[] = [];\n  items: NgxTimelineItem[] = [];\n  ngxTimelineItemPosition = NgxTimelineItemPosition;\n  ngxDateFormat = NgxDateFormat;\n\n  private readonly separator = '/';\n\n  constructor() {}\n\n\n  ngOnInit(): void {\n    this.groupEvents(this.events);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    this.groupEvents(this.events);\n  }\n\n  getPeriodKeyDateFormat(): string {\n    return periodKeyDateFormat[this.groupEvent];\n  }\n\n  protected clear(): void {\n    this.groups = {};\n    this.periods = [];\n    this.items = [];\n  }\n\n  protected groupEvents(events: NgxTimelineEvent[]): void {\n    if (events) {\n      this.clear();\n      this.sortEvents(events);\n      this.setGroups(events);\n      this.setPeriods();\n      this.setItems();\n    }\n  }\n\n  protected sortEvents(events: NgxTimelineEvent[]): void {\n    events.sort((a, b) => {\n      const aTime = a.timestamp.getTime();\n      const bTime = b.timestamp.getTime();\n      return this.reverseOrder ? bTime - aTime : aTime - bTime;});\n  }\n\n  protected setGroups(events: NgxTimelineEvent[]): void {\n    events.forEach((event) => {\n      // conversion from string to actual Date\n      event.timestamp = new Date(event.timestamp);\n      const periodKey = this.getPeriodKeyFromEvent(event);\n      if (!this.groups[periodKey]) {\n        this.groups[periodKey] = [];\n      }\n      this.groups[periodKey].push(event);\n    });\n  }\n\n  protected setItems(): void {\n    this.periods.forEach((p) => {\n      // insert first the period\n      this.items.push(p);\n      // in each period putting items on left\n      const onLeft = true;\n      const periodInfo = p.periodInfo;\n      // insert then all the events in this period\n      this.addPeriodEvents(periodInfo, onLeft);\n      // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n    });\n  }\n\n  protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void {\n    this.groups[periodInfo.periodKey].forEach((event, index) => {\n      const prevEvent = this.groups[periodInfo.periodKey][index - 1];\n      if (index > 0 && this.compareEvents(prevEvent, event)) {\n        onLeft = !onLeft;\n      }\n      this.pushEventOnItems(event, onLeft);\n    });\n    // return onLeft;\n  }\n\n  protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {\n    this.items.push({\n      eventInfo: {...event}, position: onLeft ?\n        this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,\n    });\n  }\n\n  /**\n   * Compare the events inside the same group\n   */\n  protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {\n    return this.changeSideInGroup === NgxTimelineEventChangeSideInGroup.ALL ||\n      this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSideInGroup]);\n  }\n\n  protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {\n    return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);\n  }\n\n  protected setPeriods(): void {\n    this.periods = Object.keys(this.groups).map((periodKey) => {\n      const split = periodKey.split(this.separator);\n      return this.getPeriodInfo(split, periodKey);\n    });\n  }\n\n  private getPeriodInfo(split: string[], periodKey: string): { periodInfo: NgxTimelinePeriodInfo } {\n    return {\n      periodInfo: {\n        year: Number(split[0]),\n        month: Number(split[1]),\n        day: Number(split[2]),\n        periodKey,\n        firstDate: this.groups[periodKey][0].timestamp as Date,\n      },\n    };\n  }\n\n  protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n    return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);\n  }\n}\n","<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","import {NgModule} from '@angular/core';\nimport {NgxTimelineComponent} from './components/ngx-timeline.component';\nimport {NgxTimelineEventComponent} \n  from './components/ngx-timeline-event/ngx-timeline-event.component';\nimport {CommonModule, registerLocaleData} from '@angular/common';\nimport {NgxDatePipe} from './pipes/ngx-date-pipe';\nimport localeIt from '@angular/common/locales/it';\nimport localeFr from '@angular/common/locales/fr';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\n\n@NgModule({\n  declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\n  imports: [CommonModule],\n  exports: [NgxTimelineComponent, NgxDatePipe],\n})\nexport class NgxTimelineModule { }\n","/*\n * Public API Surface of ngx-timeline\n */\nexport * from './lib/components';\nexport * from './lib/models';\nexport * from './lib/pipes/';\nexport * from './lib/ngx-timeline.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/frxjs-ngx-timeline.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@frxjs/ngx-timeline" />
+export * from './public-api';

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

@@ -0,0 +1,38 @@
+import { TemplateRef } from '@angular/core';
+import { NgxTimelineItem, NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxTimelineEventComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimelineEventComponent, "ngx-timeline-event", never, { "event": "event"; "colSidePosition": "colSidePosition"; "langCode": "langCode"; "innerEventCustomTemplate": "innerEventCustomTemplate"; "enableAnimation": "enableAnimation"; }, { "clickEmitter": "clickEmitter"; }, never, never>;
+}

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

@@ -0,0 +1,83 @@
+import { OnInit, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
+import { NgxTimelineEvent, NgxTimelineItem, NgxTimelineItemPosition, NgxTimelinePeriodInfo, NgxDateFormat, NgxTimelineEventGroup, NgxTimelineEventChangeSideInGroup } from '../models';
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+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;
+    /**
+     * Boolean used to reverse sort order (default older first)
+     */
+    reverseOrder: 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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxTimelineComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimelineComponent, "ngx-timeline", never, { "events": "events"; "langCode": "langCode"; "enableAnimation": "enableAnimation"; "reverseOrder": "reverseOrder"; "groupEvent": "groupEvent"; "changeSideInGroup": "changeSideInGroup"; "periodCustomTemplate": "periodCustomTemplate"; "eventCustomTemplate": "eventCustomTemplate"; "centerIconCustomTemplate": "centerIconCustomTemplate"; "dateInstantCustomTemplate": "dateInstantCustomTemplate"; "innerEventCustomTemplate": "innerEventCustomTemplate"; }, { "clickEmitter": "clickEmitter"; }, never, never>;
+}