@frxjs/ngx-timeline 18.0.6 → 19.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 The main goal of this angular library is to give you the possibility to integrate a timeline in your app.
 <br>
-Version 18.0.6 is compatible with angular 18.
+Version 19.0.0 is compatible with angular 18.
 <br>
 Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline 
 

package/fesm2022/frxjs-ngx-timeline.mjs

@@ -201,16 +201,16 @@ class NgxTimelineEventComponent {
     getLangCode() {
         return this.langCode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: "event", colSidePosition: "colSidePosition", langCode: "langCode", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate", enableAnimation: "enableAnimation", orientation: "orientation" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n  @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n    <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n  </div>\n  @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n    <div class=\"arrow right\"></div>\n  }\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        <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr>\n    </div>\n\n    @if (getDateObj(); as dateObj) {\n      <div class=\"event-date-container\">\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    }\n  </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n  <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.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 var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);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:var(--ngx-timeline-event-background) 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 .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-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:var(--ngx-timeline-event-divider-background)}.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: "event", colSidePosition: "colSidePosition", langCode: "langCode", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate", enableAnimation: "enableAnimation", orientation: "orientation" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n  @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n    <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n  </div>\n  @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n    <div class=\"arrow right\"></div>\n  }\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        <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr>\n    </div>\n\n    @if (getDateObj(); as dateObj) {\n      <div class=\"event-date-container\">\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    }\n  </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n  <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;--ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.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 var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);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:var(--ngx-timeline-event-background) 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 .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-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:var(--ngx-timeline-event-divider-background)}.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-timeline-event', standalone: true, imports: [
                         NgClass,
                         NgTemplateOutlet,
                         TitleCasePipe,
-                    ], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n  @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n    <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n  </div>\n  @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n    <div class=\"arrow right\"></div>\n  }\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        <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr>\n    </div>\n\n    @if (getDateObj(); as dateObj) {\n      <div class=\"event-date-container\">\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    }\n  </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n  <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.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 var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);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:var(--ngx-timeline-event-background) 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 .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-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:var(--ngx-timeline-event-divider-background)}.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"] }]
+                    ], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n  @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n    <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n  </div>\n  @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n    <div class=\"arrow right\"></div>\n  }\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        <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr>\n    </div>\n\n    @if (getDateObj(); as dateObj) {\n      <div class=\"event-date-container\">\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    }\n  </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n  <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;--ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.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 var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);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:var(--ngx-timeline-event-background) 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 .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-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:var(--ngx-timeline-event-divider-background)}.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: () => [], propDecorators: { event: [{
                 type: Input
             }], colSidePosition: [{
@@ -247,10 +247,10 @@ class NgxDatePipe {
         const code = langCode ?? defaultSupportedLanguageCode;
         return dateConfigMap[code];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: NgxDatePipe, isStandalone: true, name: "ngxdate", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: NgxDatePipe, isStandalone: true, name: "ngxdate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ngxdate',
@@ -413,17 +413,17 @@ class NgxTimelineComponent {
     getPeriodKeyFromEvent(event) {
         return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n  <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n    @for (item of items; track item; let index = $index) {\r\n      <div class=\"row\">\r\n        <!-- DESKTOP -->\r\n        <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"hour left\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"hour right\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <!-- MOBILE -->\r\n        <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"hour left\">\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          }\r\n        </div>\r\n        <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo; ) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo; ) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\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 #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n  <div class=\"period-container\">\r\n    <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n  <div class=\"period-inner-container\">\r\n    <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n  </div>\r\n</ng-template>\r\n\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    [orientation]=\"orientation\"\r\n    [enableAnimation]=\"enableAnimation\"\r\n    [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n    [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n    [colSidePosition]=\"colSidePosition\"\r\n    (clickEmitter)=\"clickEmitter.next($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-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}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.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}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 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{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n  <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n    @for (item of items; track item; let index = $index) {\r\n      <div class=\"row\">\r\n        <!-- DESKTOP -->\r\n        <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"hour left\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"hour right\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <!-- MOBILE -->\r\n        <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"hour left\">\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          }\r\n        </div>\r\n        <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo; ) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo; ) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\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 #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n  <div class=\"period-container\">\r\n    <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n  <div class=\"period-inner-container\">\r\n    <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n  </div>\r\n</ng-template>\r\n\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    [orientation]=\"orientation\"\r\n    [enableAnimation]=\"enableAnimation\"\r\n    [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n    [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n    [colSidePosition]=\"colSidePosition\"\r\n    (clickEmitter)=\"clickEmitter.next($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;--ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-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}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.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}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 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{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-timeline', standalone: true, imports: [
                         NgClass,
                         NgTemplateOutlet,
                         NgxDatePipe,
                         NgxTimelineEventComponent,
-                    ], template: "<div class=\"main-container\">\r\n  <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n    @for (item of items; track item; let index = $index) {\r\n      <div class=\"row\">\r\n        <!-- DESKTOP -->\r\n        <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"hour left\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"hour right\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <!-- MOBILE -->\r\n        <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"hour left\">\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          }\r\n        </div>\r\n        <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo; ) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo; ) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\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 #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n  <div class=\"period-container\">\r\n    <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n  <div class=\"period-inner-container\">\r\n    <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n  </div>\r\n</ng-template>\r\n\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    [orientation]=\"orientation\"\r\n    [enableAnimation]=\"enableAnimation\"\r\n    [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n    [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n    [colSidePosition]=\"colSidePosition\"\r\n    (clickEmitter)=\"clickEmitter.next($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-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}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.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}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 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{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
+                    ], template: "<div class=\"main-container\">\r\n  <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n    @for (item of items; track item; let index = $index) {\r\n      <div class=\"row\">\r\n        <!-- DESKTOP -->\r\n        <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"hour left\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"hour right\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <!-- MOBILE -->\r\n        <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"hour left\">\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          }\r\n        </div>\r\n        <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo; ) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo; ) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\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 #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n  <div class=\"period-container\">\r\n    <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n  <div class=\"period-inner-container\">\r\n    <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n  </div>\r\n</ng-template>\r\n\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    [orientation]=\"orientation\"\r\n    [enableAnimation]=\"enableAnimation\"\r\n    [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n    [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n    [colSidePosition]=\"colSidePosition\"\r\n    (clickEmitter)=\"clickEmitter.next($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;--ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-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}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.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}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 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{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
         }], propDecorators: { events: [{
                 type: Input
             }], langCode: [{
@@ -464,11 +464,11 @@ registerLocaleData(localePl);
 registerLocaleData(localePt);
 registerLocaleData(localeRu);
 class NgxTimelineModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule, NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe], exports: [NgxTimelineComponent, NgxDatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule, NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe], exports: [NgxTimelineComponent, NgxDatePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],

package/fesm2022/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', 'pl', 'pt', 'ru'] as const;\nexport type SupportedLanguageCode = typeof supportedLanguageCodes[number];\nexport const defaultSupportedLanguageCode: SupportedLanguageCode = supportedLanguageCodes[0];\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 type NgxDateObjMap = {\n  [key in SupportedLanguageCode]: 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  pl: {\n    code: 'pl',\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  ru: {\n    code: 'ru-RU',\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\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineOrientation {\n  HORIZONTAL = 'HORIZONTAL',\n  VERTICAL = 'VERTICAL',\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 NgxTimelineEventChangeSide {\n  ALL = 'ALL',\n  ALL_IN_GROUP = 'ALL_IN_GROUP',\n  ON_DIFFERENT_DAY_IN_GROUP = 'ON_DIFFERENT_DAY_IN_GROUP',\n  ON_DIFFERENT_HMS_IN_GROUP = 'ON_DIFFERENT_HMS_IN_GROUP',\n  ON_DIFFERENT_MONTH_IN_GROUP = 'ON_DIFFERENT_MONTH_IN_GROUP'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n  ON_DIFFERENT_DAY_IN_GROUP: ['getFullYear', 'getMonth', 'getDate'],\n  ON_DIFFERENT_MONTH_IN_GROUP: ['getFullYear', 'getMonth'],\n  ON_DIFFERENT_HMS_IN_GROUP: ['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 {DatePipe, NgClass, NgTemplateOutlet, TitleCasePipe} from '@angular/common';\nimport {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {BehaviorSubject} from 'rxjs';\n\nimport {defaultSupportedLanguageCode, NgxTimelineOrientation, SupportedLanguageCode} from '../../models';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\n\n@Component({\n  selector: 'ngx-timeline-event',\n  standalone: true,\n  templateUrl: './ngx-timeline-event.component.html',\n  styleUrl: './ngx-timeline-event.component.scss',\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    TitleCasePipe,\n  ],\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: SupportedLanguageCode = defaultSupportedLanguageCode;\n  /**\n   * Inner custom template used to display the event detail\n   */\n  @Input() innerEventCustomTemplate?: TemplateRef<any>;\n  /**\n   * Inner custom template used to display the event description\n   */\n  @Input() eventDescriptionCustomTemplate?: TemplateRef<any>;\n  /**\n   * Boolean used to enable or disable the animations\n   */\n  @Input() enableAnimation = true;\n  /**\n   * Orientation of the timeline\n   */\n  @Input() orientation: NgxTimelineOrientation = NgxTimelineOrientation.VERTICAL;\n  /**\n   * Output click event emitter\n   */\n  @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n  ngxTimelineItemPosition = NgxTimelineItemPosition;\n  ngxTimelineOrientation = NgxTimelineOrientation;\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(): SupportedLanguageCode {\n    return this.langCode;\n  }\n}\n","<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n  @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n    <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n  </div>\n  @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n    <div class=\"arrow right\"></div>\n  }\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        <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr>\n    </div>\n\n    @if (getDateObj(); as dateObj) {\n      <div class=\"event-date-container\">\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    }\n  </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n  <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\n\nimport {dateConfigMap, defaultSupportedLanguageCode, fieldConfigDate, NgxConfigDate, SupportedLanguageCode} from '../models';\n\n@Pipe({\n  name: 'ngxdate',\n  standalone: true,\n  pure: false,\n})\nexport class NgxDatePipe implements PipeTransform {\n  constructor() {\n  }\n\n  transform(date: Date | string, dateFormat?: string, langCode?: SupportedLanguageCode): 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?: SupportedLanguageCode): NgxConfigDate {\n    const code: SupportedLanguageCode = langCode ?? defaultSupportedLanguageCode;\n    return dateConfigMap[code];\n  }\n}\n","import {NgClass, NgTemplateOutlet} from '@angular/common';\nimport {Component, DoCheck, inject, Input, IterableDiffer, IterableDiffers, OnChanges, OnInit, Output, TemplateRef} from '@angular/core';\nimport {BehaviorSubject} from 'rxjs';\n\nimport {NgxTimelineEventComponent} from './ngx-timeline-event/ngx-timeline-event.component';\nimport {\n  NgxTimelineEvent,\n  NgxTimelineItem,\n  NgxTimelineItemPosition,\n  NgxTimelineOrientation,\n  NgxTimelinePeriodInfo,\n  NgxDateFormat,\n  NgxTimelineEventGroup,\n  NgxTimelineEventChangeSide,\n  periodKeyDateFormat,\n  fieldsToCheckEventChangeSideInGroup as fieldsToCheckEventChangeSide,\n  fieldsToAddEventGroup, SupportedLanguageCode, defaultSupportedLanguageCode,\n} from '../models';\nimport {NgxDatePipe} from '../pipes';\n\n\n@Component({\n  selector: 'ngx-timeline',\n  standalone: true,\n  templateUrl: './ngx-timeline.component.html',\n  styleUrl: './ngx-timeline.component.scss',\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    NgxDatePipe,\n    NgxTimelineEventComponent,\n  ],\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges, DoCheck {\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: SupportedLanguageCode = defaultSupportedLanguageCode;\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   * Orientation of the timeline\n   */\n  @Input() orientation: NgxTimelineOrientation = NgxTimelineOrientation.VERTICAL;\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 events on LEFT or RIGHT\n   */\n  @Input() changeSide: NgxTimelineEventChangeSide = NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP;\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   * Inner custom template used to display the event description\n   */\n  @Input() eventDescriptionCustomTemplate?: 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  ngxTimelineOrientation = NgxTimelineOrientation;\n  ngxDateFormat = NgxDateFormat;\n\n  private differs: IterableDiffers = inject(IterableDiffers);\n  private iterableDiffer: IterableDiffer<any> = this.differs.find([]).create();\n  private readonly separator = '/';\n\n  ngOnInit(): void {\n    this.groupEvents(this.events);\n  }\n\n  ngOnChanges() {\n    this.groupEvents(this.events);\n  }\n\n  ngDoCheck() {\n    const changes = this.iterableDiffer.diff(this.events);\n    if (changes) {\n      this.groupEvents(this.events);\n    }\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.setGroupsAndPeriods(events);\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 setGroupsAndPeriods(events: NgxTimelineEvent[]): void {\n    this.periods = [];\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        this.periods.push(this.getPeriodInfoFromPeriodKey(periodKey, event))\n      }\n      this.groups[periodKey].push(event);\n    });\n  }\n\n  protected setItems(): void {\n    let isLastItemOnLeft = false;\n    this.periods.forEach((p) => {\n      // insert first the period\n      this.items.push(p);\n      // in each period putting items on left\n      let onLeft = true;\n      if (this.changeSide === NgxTimelineEventChangeSide.ALL) {\n        onLeft = !isLastItemOnLeft;\n      }\n      const periodInfo = p.periodInfo;\n      // insert then all the events in this period\n      isLastItemOnLeft = this.addPeriodEvents(periodInfo, onLeft);\n      // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n    });\n  }\n\n  protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean {\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.shouldChangeEventsInPeriod() ||\n      this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSide[this.changeSide]);\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 getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): { periodInfo: NgxTimelinePeriodInfo } {\n      const split = periodKey.split(this.separator);\n      return this.getPeriodInfo(split, periodKey, firstGroupEvent);\n  }\n\n  private getPeriodInfo(split: string[], periodKey: string, firstGroupEvent: NgxTimelineEvent): { 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: firstGroupEvent.timestamp as Date,\n      },\n    };\n  }\n\n  private shouldChangeEventsInPeriod() {\n    return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].indexOf(this.changeSide) != -1;\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\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n    @for (item of items; track item; let index = $index) {\r\n      <div class=\"row\">\r\n        <!-- DESKTOP -->\r\n        <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"hour left\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"hour right\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <!-- MOBILE -->\r\n        <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"hour left\">\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          }\r\n        </div>\r\n        <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo; ) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo; ) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\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 #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n  <div class=\"period-container\">\r\n    <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n  <div class=\"period-inner-container\">\r\n    <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n  </div>\r\n</ng-template>\r\n\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    [orientation]=\"orientation\"\r\n    [enableAnimation]=\"enableAnimation\"\r\n    [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n    [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n    [colSidePosition]=\"colSidePosition\"\r\n    (clickEmitter)=\"clickEmitter.next($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import {CommonModule, registerLocaleData} from '@angular/common';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\nimport localeFr from '@angular/common/locales/fr';\nimport localeIt from '@angular/common/locales/it';\nimport localePl from '@angular/common/locales/pl';\nimport localePt from '@angular/common/locales/pt';\nimport localeRu from '@angular/common/locales/ru';\nimport localeSl from '@angular/common/locales/sl';\nimport localeTr from '@angular/common/locales/tr';\nimport {NgModule} from '@angular/core';\n\nimport {NgxTimelineEventComponent, NgxTimelineComponent} from './components';\nimport {NgxDatePipe} from './pipes';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePl);\nregisterLocaleData(localePt);\nregisterLocaleData(localeRu);\n\n@NgModule({\n  declarations: [],\n  imports: [CommonModule, NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\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":["fieldsToCheckEventChangeSide"],"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', 'pl', 'pt', 'ru'] as const;\nexport type SupportedLanguageCode = typeof supportedLanguageCodes[number];\nexport const defaultSupportedLanguageCode: SupportedLanguageCode = supportedLanguageCodes[0];\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 type NgxDateObjMap = {\n  [key in SupportedLanguageCode]: 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  pl: {\n    code: 'pl',\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  ru: {\n    code: 'ru-RU',\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\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineOrientation {\n  HORIZONTAL = 'HORIZONTAL',\n  VERTICAL = 'VERTICAL',\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 NgxTimelineEventChangeSide {\n  ALL = 'ALL',\n  ALL_IN_GROUP = 'ALL_IN_GROUP',\n  ON_DIFFERENT_DAY_IN_GROUP = 'ON_DIFFERENT_DAY_IN_GROUP',\n  ON_DIFFERENT_HMS_IN_GROUP = 'ON_DIFFERENT_HMS_IN_GROUP',\n  ON_DIFFERENT_MONTH_IN_GROUP = 'ON_DIFFERENT_MONTH_IN_GROUP'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n  ON_DIFFERENT_DAY_IN_GROUP: ['getFullYear', 'getMonth', 'getDate'],\n  ON_DIFFERENT_MONTH_IN_GROUP: ['getFullYear', 'getMonth'],\n  ON_DIFFERENT_HMS_IN_GROUP: ['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 {DatePipe, NgClass, NgTemplateOutlet, TitleCasePipe} from '@angular/common';\nimport {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {BehaviorSubject} from 'rxjs';\n\nimport {defaultSupportedLanguageCode, NgxTimelineOrientation, SupportedLanguageCode} from '../../models';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\n\n@Component({\n    selector: 'ngx-timeline-event',\n    templateUrl: './ngx-timeline-event.component.html',\n    styleUrl: './ngx-timeline-event.component.scss',\n    standalone: true,\n    imports: [\n        NgClass,\n        NgTemplateOutlet,\n        TitleCasePipe,\n    ]\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: SupportedLanguageCode = defaultSupportedLanguageCode;\n  /**\n   * Inner custom template used to display the event detail\n   */\n  @Input() innerEventCustomTemplate?: TemplateRef<any>;\n  /**\n   * Inner custom template used to display the event description\n   */\n  @Input() eventDescriptionCustomTemplate?: TemplateRef<any>;\n  /**\n   * Boolean used to enable or disable the animations\n   */\n  @Input() enableAnimation = true;\n  /**\n   * Orientation of the timeline\n   */\n  @Input() orientation: NgxTimelineOrientation = NgxTimelineOrientation.VERTICAL;\n  /**\n   * Output click event emitter\n   */\n  @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n  ngxTimelineItemPosition = NgxTimelineItemPosition;\n  ngxTimelineOrientation = NgxTimelineOrientation;\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(): SupportedLanguageCode {\n    return this.langCode;\n  }\n}\n","<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n  @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n    <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n  </div>\n  @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n    <div class=\"arrow right\"></div>\n  }\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        <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr>\n    </div>\n\n    @if (getDateObj(); as dateObj) {\n      <div class=\"event-date-container\">\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    }\n  </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n  <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\n\nimport {dateConfigMap, defaultSupportedLanguageCode, fieldConfigDate, NgxConfigDate, SupportedLanguageCode} from '../models';\n\n@Pipe({\n  name: 'ngxdate',\n  standalone: true,\n  pure: false,\n})\nexport class NgxDatePipe implements PipeTransform {\n  constructor() {\n  }\n\n  transform(date: Date | string, dateFormat?: string, langCode?: SupportedLanguageCode): 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?: SupportedLanguageCode): NgxConfigDate {\n    const code: SupportedLanguageCode = langCode ?? defaultSupportedLanguageCode;\n    return dateConfigMap[code];\n  }\n}\n","import {NgClass, NgTemplateOutlet} from '@angular/common';\nimport {Component, DoCheck, inject, Input, IterableDiffer, IterableDiffers, OnChanges, OnInit, Output, TemplateRef} from '@angular/core';\nimport {BehaviorSubject} from 'rxjs';\n\nimport {NgxTimelineEventComponent} from './ngx-timeline-event/ngx-timeline-event.component';\nimport {\n  NgxTimelineEvent,\n  NgxTimelineItem,\n  NgxTimelineItemPosition,\n  NgxTimelineOrientation,\n  NgxTimelinePeriodInfo,\n  NgxDateFormat,\n  NgxTimelineEventGroup,\n  NgxTimelineEventChangeSide,\n  periodKeyDateFormat,\n  fieldsToCheckEventChangeSideInGroup as fieldsToCheckEventChangeSide,\n  fieldsToAddEventGroup, SupportedLanguageCode, defaultSupportedLanguageCode,\n} from '../models';\nimport {NgxDatePipe} from '../pipes';\n\n\n@Component({\n    selector: 'ngx-timeline',\n    templateUrl: './ngx-timeline.component.html',\n    styleUrl: './ngx-timeline.component.scss',\n    standalone: true,\n    imports: [\n        NgClass,\n        NgTemplateOutlet,\n        NgxDatePipe,\n        NgxTimelineEventComponent,\n    ]\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges, DoCheck {\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: SupportedLanguageCode = defaultSupportedLanguageCode;\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   * Orientation of the timeline\n   */\n  @Input() orientation: NgxTimelineOrientation = NgxTimelineOrientation.VERTICAL;\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 events on LEFT or RIGHT\n   */\n  @Input() changeSide: NgxTimelineEventChangeSide = NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP;\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   * Inner custom template used to display the event description\n   */\n  @Input() eventDescriptionCustomTemplate?: 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  ngxTimelineOrientation = NgxTimelineOrientation;\n  ngxDateFormat = NgxDateFormat;\n\n  private differs: IterableDiffers = inject(IterableDiffers);\n  private iterableDiffer: IterableDiffer<any> = this.differs.find([]).create();\n  private readonly separator = '/';\n\n  ngOnInit(): void {\n    this.groupEvents(this.events);\n  }\n\n  ngOnChanges(): void {\n    this.groupEvents(this.events);\n  }\n\n  ngDoCheck(): void {\n    const changes = this.iterableDiffer.diff(this.events);\n    if (changes) {\n      this.groupEvents(this.events);\n    }\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.setGroupsAndPeriods(events);\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 setGroupsAndPeriods(events: NgxTimelineEvent[]): void {\n    this.periods = [];\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        this.periods.push(this.getPeriodInfoFromPeriodKey(periodKey, event))\n      }\n      this.groups[periodKey].push(event);\n    });\n  }\n\n  protected setItems(): void {\n    let isLastItemOnLeft = false;\n    this.periods.forEach((p) => {\n      // insert first the period\n      this.items.push(p);\n      // in each period putting items on left\n      let onLeft = true;\n      if (this.changeSide === NgxTimelineEventChangeSide.ALL) {\n        onLeft = !isLastItemOnLeft;\n      }\n      const periodInfo = p.periodInfo;\n      // insert then all the events in this period\n      isLastItemOnLeft = this.addPeriodEvents(periodInfo, onLeft);\n      // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n    });\n  }\n\n  protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean {\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.shouldChangeEventsInPeriod() ||\n      this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSide[this.changeSide]);\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 getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): { periodInfo: NgxTimelinePeriodInfo } {\n      const split = periodKey.split(this.separator);\n      return this.getPeriodInfo(split, periodKey, firstGroupEvent);\n  }\n\n  private getPeriodInfo(split: string[], periodKey: string, firstGroupEvent: NgxTimelineEvent): { 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: firstGroupEvent.timestamp as Date,\n      },\n    };\n  }\n\n  private shouldChangeEventsInPeriod(): boolean {\n    return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].indexOf(this.changeSide) != -1;\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\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n    @for (item of items; track item; let index = $index) {\r\n      <div class=\"row\">\r\n        <!-- DESKTOP -->\r\n        <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"hour left\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n            <div class=\"hour right\">\r\n              <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <!-- MOBILE -->\r\n        <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"hour left\">\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          }\r\n        </div>\r\n        <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.periodInfo; ) {\r\n            <div class=\"center-inner\">\r\n              <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n            </div>\r\n          }\r\n          @if (!item.periodInfo; ) {\r\n            <div class=\"center-inner no-period-key\">\r\n              <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n          @if (item.eventInfo) {\r\n            <div class=\"event-outer-container\">\r\n              <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\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 #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n  <div class=\"period-container\">\r\n    <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n  <div class=\"period-inner-container\">\r\n    <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n  </div>\r\n</ng-template>\r\n\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    [orientation]=\"orientation\"\r\n    [enableAnimation]=\"enableAnimation\"\r\n    [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n    [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n    [colSidePosition]=\"colSidePosition\"\r\n    (clickEmitter)=\"clickEmitter.next($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import {CommonModule, registerLocaleData} from '@angular/common';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\nimport localeFr from '@angular/common/locales/fr';\nimport localeIt from '@angular/common/locales/it';\nimport localePl from '@angular/common/locales/pl';\nimport localePt from '@angular/common/locales/pt';\nimport localeRu from '@angular/common/locales/ru';\nimport localeSl from '@angular/common/locales/sl';\nimport localeTr from '@angular/common/locales/tr';\nimport {NgModule} from '@angular/core';\n\nimport {NgxTimelineEventComponent, NgxTimelineComponent} from './components';\nimport {NgxDatePipe} from './pipes';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePl);\nregisterLocaleData(localePt);\nregisterLocaleData(localeRu);\n\n@NgModule({\n  declarations: [],\n  imports: [CommonModule, NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\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":["fieldsToCheckEventChangeSide"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frxjs/ngx-timeline",
-  "version": "18.0.6",
+  "version": "19.0.0",
   "keywords": [
     "angular",
     "timeline"
@@ -14,9 +14,9 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0"
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"
@@ -30,8 +30,6 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/frxjs-ngx-timeline.mjs",
-      "esm": "./esm2022/frxjs-ngx-timeline.mjs",
       "default": "./fesm2022/frxjs-ngx-timeline.mjs"
     }
   },

package/style.scss

@@ -6,5 +6,5 @@
     --ngx-timeline-flex-display-col-center: 2 2 0;
     --ngx-timeline-event-background: white;
     --ngx-timeline-event-divider-background: #e9e9e9;
-    ---ngx-timeline-event-text-color: black;
+    --ngx-timeline-event-text-color: black;
   }

package/esm2022/frxjs-ngx-timeline.mjs

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJ4anMtbmd4LXRpbWVsaW5lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvbmd4LXRpbWVsaW5lL3NyYy9mcnhqcy1uZ3gtdGltZWxpbmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/esm2022/lib/components/index.mjs

@@ -1,3 +0,0 @@
-export * from './ngx-timeline.component';
-export * from './ngx-timeline-event/ngx-timeline-event.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdGltZWxpbmUvc3JjL2xpYi9jb21wb25lbnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxtREFBbUQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbmd4LXRpbWVsaW5lLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL25neC10aW1lbGluZS1ldmVudC9uZ3gtdGltZWxpbmUtZXZlbnQuY29tcG9uZW50JztcbiJdfQ==