@frxjs/ngx-timeline 1.2.7 → 2.0.0

package/README.md

@@ -2,9 +2,9 @@
 
 The main goal of this angular library is to give you the possibility to integrate a timeline in your app.
 <br/>
-Version 1.2.0 is compatible with angular 13.
+Version 2.0.0 is compatible with angular 14.
 <br/>
-Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline 
+Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline
 
 ![image](https://user-images.githubusercontent.com/26500344/130092921-8338496a-31df-46fa-b75f-40989eb53d33.png)
 <p align = "center">
@@ -83,49 +83,49 @@ enum NgxTimelineEventChangeSideInGroup {
 }
 ```
 <br/>
-  
+
 ### Examples with contexts of custom templates
 ```html
   <ng-template #periodCustomTemplate let-period=period let-index=index let-event=event>
-    <div [ngClass]="{'transparent first-line': !index}" class="line"></div>
-    <div class="period-container">
-      <p>
-        {{index}} - {{period | json  }}
-      </p>
-    </div>
-    <div class="line"></div>
-  </ng-template>
+  <div [ngClass]="{'transparent first-line': !index}" class="line"></div>
+  <div class="period-container">
+    <p>
+      {{index}} - {{period | json  }}
+    </p>
+  </div>
+  <div class="line"></div>
+</ng-template>
 ```  
 ```html
   <ng-template #centerIconCustomTemplate let-index=index let-event=event>
-    <div class="icon-container">
-      <img src="assets/image.png"/>
-    </div>
-  </ng-template>
+  <div class="icon-container">
+    <img src="assets/image.png"/>
+  </div>
+</ng-template>
 ```
 ```html
   <ng-template #innerEventCustomTemplate let-event=event>
-    <div class="event" (click)="handleClick(event)">
-      {{event | json}}
-    </div>
-  </ng-template>
+  <div class="event" (click)="handleClick(event)">
+    {{event | json}}
+  </div>
+</ng-template>
 ```
 ```html
   <ng-template #eventCustomTemplate let-event=event let-colSidePosition=colSidePosition>
-    <div class="event" (click)="handleClick(event)">
-      {{event | json}}
-    </div>
-  </ng-template>
+  <div class="event" (click)="handleClick(event)">
+    {{event | json}}
+  </div>
+</ng-template>
 ```
 ```html
   <ng-template #dateInstantCustomTemplate let-item=item>
     <span>
       {{item | json}}
     </span>
-  </ng-template>
+</ng-template>
 ```    
 <br/><br/>
-  
+
 ## How to contribute
 First of all, in order to track everything, open an issue describing the problem or a missing functionality you would like to add to the lib.
 

package/esm2020/lib/components/ngx-timeline-event/ngx-timeline-event.component.mjs

@@ -37,11 +37,11 @@ export class NgxTimelineEventComponent {
         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: [{
+NgxTimelineEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 rgba(36,74,110,.1333333333));border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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"] }]
+            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 rgba(36,74,110,.1333333333));border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));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: [{

package/esm2020/lib/components/ngx-timeline.component.mjs

@@ -2,8 +2,8 @@ import { Component, Input, Output } from '@angular/core';
 import { NgxTimelineItemPosition, NgxDateFormat, NgxTimelineEventGroup, NgxTimelineEventChangeSideInGroup, periodKeyDateFormat, fieldsToCheckEventChangeSideInGroup, fieldsToAddEventGroup } from '../models';
 import { BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
-import * as i1 from "./ngx-timeline-event/ngx-timeline-event.component";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./ngx-timeline-event/ngx-timeline-event.component";
 import * as i3 from "../pipes/ngx-date-pipe";
 export class NgxTimelineComponent {
     constructor() {
@@ -137,9 +137,9 @@ export class NgxTimelineComponent {
         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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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: i1.NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "ngxdate": i3.NgxDatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
+NgxTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: i3.NgxDatePipe, name: "ngxdate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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: [{

package/esm2020/lib/ngx-timeline.module.mjs

@@ -20,10 +20,10 @@ registerLocaleData(localeTr);
 registerLocaleData(localePt);
 export 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: [{
+NgxTimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxTimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe], imports: [CommonModule], exports: [NgxTimelineComponent, NgxDatePipe] });
+NgxTimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],
@@ -31,4 +31,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                     exports: [NgxTimelineComponent, NgxDatePipe],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRpbWVsaW5lLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aW1lbGluZS9zcmMvbGliL25neC10aW1lbGluZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsb0JBQW9CLEVBQUMsTUFBTSxxQ0FBcUMsQ0FBQztBQUN6RSxPQUFPLEVBQUMseUJBQXlCLEVBQUMsTUFDM0IsOERBQThELENBQUM7QUFDdEUsT0FBTyxFQUFDLFlBQVksRUFBRSxrQkFBa0IsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ2pFLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSx1QkFBdUIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQzs7QUFFbEQsa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFPN0IsTUFBTSxPQUFPLGlCQUFpQjs7OEdBQWpCLGlCQUFpQjsrR0FBakIsaUJBQWlCLGlCQUpiLG9CQUFvQixFQUFFLHlCQUF5QixFQUFFLFdBQVcsYUFDakUsWUFBWSxhQUNaLG9CQUFvQixFQUFFLFdBQVc7K0dBRWhDLGlCQUFpQixZQUhuQixDQUFDLFlBQVksQ0FBQzsyRkFHWixpQkFBaUI7a0JBTDdCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsb0JBQW9CLEVBQUUseUJBQXlCLEVBQUUsV0FBVyxDQUFDO29CQUM1RSxPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7b0JBQ3ZCLE9BQU8sRUFBRSxDQUFDLG9CQUFvQixFQUFFLFdBQVcsQ0FBQztpQkFDN0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge05nTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Tmd4VGltZWxpbmVDb21wb25lbnR9IGZyb20gJy4vY29tcG9uZW50cy9uZ3gtdGltZWxpbmUuY29tcG9uZW50JztcbmltcG9ydCB7Tmd4VGltZWxpbmVFdmVudENvbXBvbmVudH1cbiAgZnJvbSAnLi9jb21wb25lbnRzL25neC10aW1lbGluZS1ldmVudC9uZ3gtdGltZWxpbmUtZXZlbnQuY29tcG9uZW50JztcbmltcG9ydCB7Q29tbW9uTW9kdWxlLCByZWdpc3RlckxvY2FsZURhdGF9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge05neERhdGVQaXBlfSBmcm9tICcuL3BpcGVzL25neC1kYXRlLXBpcGUnO1xuaW1wb3J0IGxvY2FsZUl0IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9sb2NhbGVzL2l0JztcbmltcG9ydCBsb2NhbGVGciBmcm9tICdAYW5ndWxhci9jb21tb24vbG9jYWxlcy9mcic7XG5pbXBvcnQgbG9jYWxlRGUgZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2xvY2FsZXMvZGUnO1xuaW1wb3J0IGxvY2FsZUVzIGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9sb2NhbGVzL2VzJztcbmltcG9ydCBsb2NhbGVTbCBmcm9tICdAYW5ndWxhci9jb21tb24vbG9jYWxlcy9zbCc7XG5pbXBvcnQgbG9jYWxlVHIgZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2xvY2FsZXMvdHInO1xuaW1wb3J0IGxvY2FsZVB0IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9sb2NhbGVzL3B0JztcblxucmVnaXN0ZXJMb2NhbGVEYXRhKGxvY2FsZUl0KTtcbnJlZ2lzdGVyTG9jYWxlRGF0YShsb2NhbGVGcik7XG5yZWdpc3RlckxvY2FsZURhdGEobG9jYWxlRGUpO1xucmVnaXN0ZXJMb2NhbGVEYXRhKGxvY2FsZUVzKTtcbnJlZ2lzdGVyTG9jYWxlRGF0YShsb2NhbGVTbCk7XG5yZWdpc3RlckxvY2FsZURhdGEobG9jYWxlVHIpO1xucmVnaXN0ZXJMb2NhbGVEYXRhKGxvY2FsZVB0KTtcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbTmd4VGltZWxpbmVDb21wb25lbnQsIE5neFRpbWVsaW5lRXZlbnRDb21wb25lbnQsIE5neERhdGVQaXBlXSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIGV4cG9ydHM6IFtOZ3hUaW1lbGluZUNvbXBvbmVudCwgTmd4RGF0ZVBpcGVdLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hUaW1lbGluZU1vZHVsZSB7IH1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRpbWVsaW5lLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aW1lbGluZS9zcmMvbGliL25neC10aW1lbGluZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsb0JBQW9CLEVBQUMsTUFBTSxxQ0FBcUMsQ0FBQztBQUN6RSxPQUFPLEVBQUMseUJBQXlCLEVBQUMsTUFDM0IsOERBQThELENBQUM7QUFDdEUsT0FBTyxFQUFDLFlBQVksRUFBRSxrQkFBa0IsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ2pFLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSx1QkFBdUIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQztBQUNsRCxPQUFPLFFBQVEsTUFBTSw0QkFBNEIsQ0FBQzs7QUFFbEQsa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFDN0Isa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7QUFPN0IsTUFBTSxPQUFPLGlCQUFpQjs7OEdBQWpCLGlCQUFpQjsrR0FBakIsaUJBQWlCLGlCQUpiLG9CQUFvQixFQUFFLHlCQUF5QixFQUFFLFdBQVcsYUFDakUsWUFBWSxhQUNaLG9CQUFvQixFQUFFLFdBQVc7K0dBRWhDLGlCQUFpQixZQUhsQixZQUFZOzJGQUdYLGlCQUFpQjtrQkFMN0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxvQkFBb0IsRUFBRSx5QkFBeUIsRUFBRSxXQUFXLENBQUM7b0JBQzVFLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQztvQkFDdkIsT0FBTyxFQUFFLENBQUMsb0JBQW9CLEVBQUUsV0FBVyxDQUFDO2lCQUM3QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOZ3hUaW1lbGluZUNvbXBvbmVudH0gZnJvbSAnLi9jb21wb25lbnRzL25neC10aW1lbGluZS5jb21wb25lbnQnO1xuaW1wb3J0IHtOZ3hUaW1lbGluZUV2ZW50Q29tcG9uZW50fVxuICBmcm9tICcuL2NvbXBvbmVudHMvbmd4LXRpbWVsaW5lLWV2ZW50L25neC10aW1lbGluZS1ldmVudC5jb21wb25lbnQnO1xuaW1wb3J0IHtDb21tb25Nb2R1bGUsIHJlZ2lzdGVyTG9jYWxlRGF0YX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7Tmd4RGF0ZVBpcGV9IGZyb20gJy4vcGlwZXMvbmd4LWRhdGUtcGlwZSc7XG5pbXBvcnQgbG9jYWxlSXQgZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2xvY2FsZXMvaXQnO1xuaW1wb3J0IGxvY2FsZUZyIGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9sb2NhbGVzL2ZyJztcbmltcG9ydCBsb2NhbGVEZSBmcm9tICdAYW5ndWxhci9jb21tb24vbG9jYWxlcy9kZSc7XG5pbXBvcnQgbG9jYWxlRXMgZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2xvY2FsZXMvZXMnO1xuaW1wb3J0IGxvY2FsZVNsIGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9sb2NhbGVzL3NsJztcbmltcG9ydCBsb2NhbGVUciBmcm9tICdAYW5ndWxhci9jb21tb24vbG9jYWxlcy90cic7XG5pbXBvcnQgbG9jYWxlUHQgZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2xvY2FsZXMvcHQnO1xuXG5yZWdpc3RlckxvY2FsZURhdGEobG9jYWxlSXQpO1xucmVnaXN0ZXJMb2NhbGVEYXRhKGxvY2FsZUZyKTtcbnJlZ2lzdGVyTG9jYWxlRGF0YShsb2NhbGVEZSk7XG5yZWdpc3RlckxvY2FsZURhdGEobG9jYWxlRXMpO1xucmVnaXN0ZXJMb2NhbGVEYXRhKGxvY2FsZVNsKTtcbnJlZ2lzdGVyTG9jYWxlRGF0YShsb2NhbGVUcik7XG5yZWdpc3RlckxvY2FsZURhdGEobG9jYWxlUHQpO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtOZ3hUaW1lbGluZUNvbXBvbmVudCwgTmd4VGltZWxpbmVFdmVudENvbXBvbmVudCwgTmd4RGF0ZVBpcGVdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgZXhwb3J0czogW05neFRpbWVsaW5lQ29tcG9uZW50LCBOZ3hEYXRlUGlwZV0sXG59KVxuZXhwb3J0IGNsYXNzIE5neFRpbWVsaW5lTW9kdWxlIHsgfVxuIl19

package/esm2020/lib/pipes/ngx-date-pipe.mjs

@@ -22,9 +22,9 @@ export class NgxDatePipe {
         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: [{
+NgxDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NgxDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, name: "ngxdate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxdate', pure: false }]
         }], ctorParameters: function () { return []; } });

package/fesm2015/frxjs-ngx-timeline.mjs

@@ -167,11 +167,11 @@ class NgxTimelineEventComponent {
         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: [{
+NgxTimelineEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 rgba(36,74,110,.1333333333));border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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"] }]
+            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 rgba(36,74,110,.1333333333));border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));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: [{
@@ -206,9 +206,9 @@ class NgxDatePipe {
         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: [{
+NgxDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NgxDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, name: "ngxdate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxdate', pure: false }]
         }], ctorParameters: function () { return []; } });
@@ -345,9 +345,9 @@ class NgxTimelineComponent {
         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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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: [{
+NgxTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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: [{
@@ -385,10 +385,10 @@ registerLocaleData(localeTr);
 registerLocaleData(localePt);
 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: [{
+NgxTimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxTimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe], imports: [CommonModule], exports: [NgxTimelineComponent, NgxDatePipe] });
+NgxTimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],

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

@@ -1 +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', 'sl', 'tr', 'pt'];\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  sl: {\n    code: 'sl-SL',\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  tr: {\n    code: 'tr',\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  pt: {\n    code: 'pt',\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  itemPosition?: NgxTimelineItemPosition;\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, 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 (event.itemPosition) {\n        onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;\n      } else 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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';\nimport localeSl from '@angular/common/locales/sl';\nimport localeTr from '@angular/common/locales/tr';\nimport localePt from '@angular/common/locales/pt';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePt);\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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"}
+{"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', 'sl', 'tr', 'pt'];\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  sl: {\n    code: 'sl-SL',\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  tr: {\n    code: 'tr',\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  pt: {\n    code: 'pt',\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  itemPosition?: NgxTimelineItemPosition;\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, 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 (event.itemPosition) {\n        onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;\n      } else 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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';\nimport localeSl from '@angular/common/locales/sl';\nimport localeTr from '@angular/common/locales/tr';\nimport localePt from '@angular/common/locales/pt';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePt);\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":["i2.NgxTimelineEventComponent","i3.NgxDatePipe"],"mappings":"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"}

package/fesm2020/frxjs-ngx-timeline.mjs

@@ -166,11 +166,11 @@ class NgxTimelineEventComponent {
         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: [{
+NgxTimelineEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 rgba(36,74,110,.1333333333));border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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"] }]
+            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 rgba(36,74,110,.1333333333));border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));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: [{
@@ -205,9 +205,9 @@ class NgxDatePipe {
         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: [{
+NgxDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NgxDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, name: "ngxdate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxDatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'ngxdate', pure: false }]
         }], ctorParameters: function () { return []; } });
@@ -344,9 +344,9 @@ class NgxTimelineComponent {
         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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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: [{
+NgxTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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:relative;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: [{
@@ -384,10 +384,10 @@ registerLocaleData(localeTr);
 registerLocaleData(localePt);
 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: [{
+NgxTimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxTimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe], imports: [CommonModule], exports: [NgxTimelineComponent, NgxDatePipe] });
+NgxTimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],

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

@@ -1 +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', 'sl', 'tr', 'pt'];\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  sl: {\n    code: 'sl-SL',\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  tr: {\n    code: 'tr',\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  pt: {\n    code: 'pt',\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  itemPosition?: NgxTimelineItemPosition;\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, 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 (event.itemPosition) {\n        onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;\n      } else 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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';\nimport localeSl from '@angular/common/locales/sl';\nimport localeTr from '@angular/common/locales/tr';\nimport localePt from '@angular/common/locales/pt';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePt);\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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"}
+{"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', 'sl', 'tr', 'pt'];\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  sl: {\n    code: 'sl-SL',\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  tr: {\n    code: 'tr',\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  pt: {\n    code: 'pt',\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  itemPosition?: NgxTimelineItemPosition;\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, 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 (event.itemPosition) {\n        onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;\n      } else 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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, event: item}\"></ng-container>\r\n        </div>\r\n        <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n          <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, 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 let-event=event>\r\n  <div class=\"line\"></div>\r\n  <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></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 let-index=index let-event=event>\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 let-event=event>\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';\nimport localeSl from '@angular/common/locales/sl';\nimport localeTr from '@angular/common/locales/tr';\nimport localePt from '@angular/common/locales/pt';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePt);\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":["i2.NgxTimelineEventComponent","i3.NgxDatePipe"],"mappings":"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"}

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

@@ -34,5 +34,5 @@ export declare class NgxTimelineEventComponent {
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimelineEventComponent, "ngx-timeline-event", never, { "event": "event"; "colSidePosition": "colSidePosition"; "langCode": "langCode"; "innerEventCustomTemplate": "innerEventCustomTemplate"; "enableAnimation": "enableAnimation"; }, { "clickEmitter": "clickEmitter"; }, never, never, false>;
 }

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

@@ -79,5 +79,5 @@ export declare class NgxTimelineComponent implements OnInit, OnChanges {
     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>;
+    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, false>;
 }

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

@@ -6,5 +6,5 @@ export declare class NgxDatePipe implements PipeTransform {
     private dateFormat;
     private getDateConfig;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxDatePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<NgxDatePipe, "ngxdate">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<NgxDatePipe, "ngxdate", false>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frxjs/ngx-timeline",
-  "version": "1.2.7",
+  "version": "2.0.0",
   "keywords": [
     "angular",
     "timeline"
@@ -14,9 +14,9 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "~13.2.1",
-    "@angular/compiler": "~13.2.1",
-    "@angular/core": "~13.2.1"
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"
@@ -26,13 +26,13 @@
   "esm2020": "esm2020/frxjs-ngx-timeline.mjs",
   "fesm2020": "fesm2020/frxjs-ngx-timeline.mjs",
   "fesm2015": "fesm2015/frxjs-ngx-timeline.mjs",
-  "typings": "frxjs-ngx-timeline.d.ts",
+  "typings": "index.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./frxjs-ngx-timeline.d.ts",
+      "types": "./index.d.ts",
       "esm2020": "./esm2020/frxjs-ngx-timeline.mjs",
       "es2020": "./fesm2020/frxjs-ngx-timeline.mjs",
       "es2015": "./fesm2015/frxjs-ngx-timeline.mjs",