@frxjs/ngx-timeline 21.0.1 → 22.0.1

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 21.0.1 is compatible with angular 20.
+Version 22.0.0 is compatible with angular 22.
 <br>
 Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline 
 
@@ -33,25 +33,25 @@ After installing the library and including NgxTimelineModule in your imports mod
 
 ### Input
 
-| Input name                     | Explanation                                                 | Mandatory | Type/Supported Values                                                                                                                       | Default value                                        |
-|--------------------------------|-------------------------------------------------------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------|
-| events                         | list of events to be displayed                              | yes       | NgxTimelineEvent                                                                                                                            | no default                                           |
+| Input name                     | Explanation                                                 | Mandatory | Type/Supported Values                                                                                                                                                                                                                                                      | Default value                                        |
+|--------------------------------|-------------------------------------------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------|
+| events                         | list of events to be displayed                              | yes       | NgxTimelineEvent                                                                                                                                                                                                                                                           | no default                                           |
 | langCode                       | language code use to format dates                           | no        | <ul><li>'de' (German)</li><li>'en' (English)</li><li>'es' (Spanish)</li><li>'fr' (French)</li><li>'it' (Italian)</li><li>'nb' (Norwegian)</li><li>'pl' (Polish)</li><li>'pt' (Portuguese)</li><li>'ru' (Russian)</li><li>'sl' (Slovenian)</li><li>'tr' (Turkish)</li></ul> | 'en'                                                 |
-| enableAnimation                | Boolean used to enable or disable the animations            | no        | boolean                                                                                                                                     | true                                                 |
-| reverseOrder                   | Boolean used to reverse sort order (default older first)    | no        | boolean                                                                                                                                     | false                                                |
-| virtualScroll                  | Boolean used to enable or disable the virtual scroll        | no        | boolean                                                                                                                                     | false                                                |
-| virtualScrollItemSize          | Number of pixels of a single item used for virtual scroll   | no        | number                                                                                                                                      | 100                                                  |
-| virtualScrollMaxBufferPx       | Number of max pixels the buffer for the virtual scroll has  | no        | number                                                                                                                                      | 200                                                  |
-| virtualScrollMinBufferPx       | Minimum ammount of the buffer rendered beyond the viewport  | no        | number                                                                                                                                      | 100                                                  |
-| groupEvent                     | Logic to be applied in order to group events                | no        | enum NgxTimelineEventGroup                                                                                                                  | NgxTimelineEventGroup.MONTH_YEAR                     |
-| orientation                    | Orientation of the timeline                                 | no        | enum NgxTimelineOrientation                                                                                                                 | NgxTimelineOrientation.VERTICAL                      |
-| changeSide                     | Logic to be applied in order to put events on LEFT or RIGHT | no        | enum NgxTimelineEventChangeSide                                                                                                             | NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP |
-| periodCustomTemplate           | Custom Template displayed before a group of events          | no        | `TemplateRef<unknown>`                                                                                                                      | no default                                           |
-| eventCustomTemplate            | Custom Template displayed to show a single event            | no        | `TemplateRef<unknown>`                                                                                                                      | no default                                           |
-| centerIconCustomTemplate       | Custom Template displayed to show an separator icon         | no        | `TemplateRef<unknown>`                                                                                                                      | no default                                           |
-| dateInstantCustomTemplate      | Custom Template displayed to show the side date             | no        | `TemplateRef<unknown>`                                                                                                                      | no default                                           |
-| innerEventCustomTemplate       | Custom Template displayed to show the inner event           | no        | `TemplateRef<unknown>`                                                                                                                      | no default                                           |
-| eventDescriptionCustomTemplate | Custom Template displayed to show the description           | no        | `TemplateRef<unknown>`                                                                                                                      | no default                                           |
+| enableAnimation                | Boolean used to enable or disable the animations            | no        | boolean                                                                                                                                                                                                                                                                    | true                                                 |
+| reverseOrder                   | Boolean used to reverse sort order (default older first)    | no        | boolean                                                                                                                                                                                                                                                                    | false                                                |
+| virtualScroll                  | Boolean used to enable or disable the virtual scroll        | no        | boolean                                                                                                                                                                                                                                                                    | false                                                |
+| virtualScrollItemSize          | Number of pixels of a single item used for virtual scroll   | no        | number                                                                                                                                                                                                                                                                     | 100                                                  |
+| virtualScrollMaxBufferPx       | Number of max pixels the buffer for the virtual scroll has  | no        | number                                                                                                                                                                                                                                                                     | 200                                                  |
+| virtualScrollMinBufferPx       | Minimum amount of the buffer rendered beyond the viewport   | no        | number                                                                                                                                                                                                                                                                     | 100                                                  |
+| groupEvent                     | Logic to be applied in order to group events                | no        | enum NgxTimelineEventGroup                                                                                                                                                                                                                                                 | NgxTimelineEventGroup.MONTH_YEAR                     |
+| orientation                    | Orientation of the timeline                                 | no        | enum NgxTimelineOrientation                                                                                                                                                                                                                                                | NgxTimelineOrientation.VERTICAL                      |
+| changeSide                     | Logic to be applied in order to put events on LEFT or RIGHT | no        | enum NgxTimelineEventChangeSide                                                                                                                                                                                                                                            | NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP |
+| periodCustomTemplate           | Custom Template displayed before a group of events          | no        | `TemplateRef<unknown>`                                                                                                                                                                                                                                                     | no default                                           |
+| eventCustomTemplate            | Custom Template displayed to show a single event            | no        | `TemplateRef<unknown>`                                                                                                                                                                                                                                                     | no default                                           |
+| centerIconCustomTemplate       | Custom Template displayed to show an separator icon         | no        | `TemplateRef<unknown>`                                                                                                                                                                                                                                                     | no default                                           |
+| dateInstantCustomTemplate      | Custom Template displayed to show the side date             | no        | `TemplateRef<unknown>`                                                                                                                                                                                                                                                     | no default                                           |
+| innerEventCustomTemplate       | Custom Template displayed to show the inner event           | no        | `TemplateRef<unknown>`                                                                                                                                                                                                                                                     | no default                                           |
+| eventDescriptionCustomTemplate | Custom Template displayed to show the description           | no        | `TemplateRef<unknown>`                                                                                                                                                                                                                                                     | no default                                           |
 
 ### Output
 

package/fesm2022/frxjs-ngx-timeline.mjs

@@ -2,7 +2,7 @@ import * as i1 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { DatePipe, NgTemplateOutlet, TitleCasePipe, NgClass, registerLocaleData } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, input, output, ChangeDetectionStrategy, Component, inject, IterableDiffers, NgModule } from '@angular/core';
+import { Pipe, input, output, computed, ChangeDetectionStrategy, Component, inject, IterableDiffers, NgModule } from '@angular/core';
 import localeDe from '@angular/common/locales/de';
 import localeEs from '@angular/common/locales/es';
 import localeFr from '@angular/common/locales/fr';
@@ -172,7 +172,6 @@ var NgxTimelineItemPosition;
 })(NgxTimelineItemPosition || (NgxTimelineItemPosition = {}));
 
 class NgxDatePipe {
-    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
     transform(date, dateFormat, langCode) {
         const configDate = this.getDateConfig(langCode);
         let dateFormatString = 'yyyy';
@@ -194,10 +193,10 @@ class NgxDatePipe {
         const code = langCode ?? defaultSupportedLanguageCode;
         return dateConfigMap[code];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: NgxDatePipe, isStandalone: true, name: "ngxdate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: NgxDatePipe, isStandalone: true, name: "ngxdate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ngxdate',
@@ -208,37 +207,46 @@ class NgxTimelineEventComponent {
     /**
      * Event to be displayed.
      */
-    event = input.required({ ...(ngDevMode ? { debugName: "event" } : {}) });
+    event = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "event" }] : /* istanbul ignore next */ []));
     /**
      * Event position respect to the vertical line (LEFT or RIGHT).
      */
-    colSidePosition = input(undefined, { ...(ngDevMode ? { debugName: "colSidePosition" } : {}) });
+    colSidePosition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "colSidePosition" }] : /* istanbul ignore next */ []));
     /**
      * Language code used to format the dates.
      */
-    langCode = input(defaultSupportedLanguageCode, { ...(ngDevMode ? { debugName: "langCode" } : {}) });
+    langCode = input(defaultSupportedLanguageCode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "langCode" }] : /* istanbul ignore next */ []));
     /**
      * Inner custom template used to display the event detail.
      */
-    innerEventCustomTemplate = input(undefined, { ...(ngDevMode ? { debugName: "innerEventCustomTemplate" } : {}) });
+    innerEventCustomTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "innerEventCustomTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Inner custom template used to display the event description.
      */
-    eventDescriptionCustomTemplate = input(undefined, { ...(ngDevMode ? { debugName: "eventDescriptionCustomTemplate" } : {}) });
+    eventDescriptionCustomTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "eventDescriptionCustomTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Boolean used to enable or disable the animations.
      */
-    enableAnimation = input(true, { ...(ngDevMode ? { debugName: "enableAnimation" } : {}) });
+    enableAnimation = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableAnimation" }] : /* istanbul ignore next */ []));
     /**
      * Orientation of the timeline.
      */
-    orientation = input(NgxTimelineOrientation.VERTICAL, { ...(ngDevMode ? { debugName: "orientation" } : {}) });
+    orientation = input(NgxTimelineOrientation.VERTICAL, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /**
      * Output click event emitter.
      */
     clickEmitter = output();
     ngxTimelineItemPosition = NgxTimelineItemPosition;
     ngxTimelineOrientation = NgxTimelineOrientation;
+    dateObjSignal = computed(() => !this.event() ? null : this.getDateObj(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateObjSignal" }] : /* istanbul ignore next */ []));
     monthAbbr = 'MMM';
     dayFormat = 'dd';
     getDateObj() {
@@ -258,87 +266,104 @@ class NgxTimelineEventComponent {
     getLangCode() {
         return this.langCode();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: true, transformFunction: null }, colSidePosition: { classPropertyName: "colSidePosition", publicName: "colSidePosition", isSignal: true, isRequired: false, transformFunction: null }, langCode: { classPropertyName: "langCode", publicName: "langCode", isSignal: true, isRequired: false, transformFunction: null }, innerEventCustomTemplate: { classPropertyName: "innerEventCustomTemplate", publicName: "innerEventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventDescriptionCustomTemplate: { classPropertyName: "eventDescriptionCustomTemplate", publicName: "eventDescriptionCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, enableAnimation: { classPropertyName: "enableAnimation", publicName: "enableAnimation", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.emit(event())\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\n  @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [class.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\" [class.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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: true, transformFunction: null }, colSidePosition: { classPropertyName: "colSidePosition", publicName: "colSidePosition", isSignal: true, isRequired: false, transformFunction: null }, langCode: { classPropertyName: "langCode", publicName: "langCode", isSignal: true, isRequired: false, transformFunction: null }, innerEventCustomTemplate: { classPropertyName: "innerEventCustomTemplate", publicName: "innerEventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventDescriptionCustomTemplate: { classPropertyName: "eventDescriptionCustomTemplate", publicName: "eventDescriptionCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, enableAnimation: { classPropertyName: "enableAnimation", publicName: "enableAnimation", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.emit(event())\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\n  @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [class.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\" [class.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 (dateObjSignal(); 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-timeline-event', imports: [
                         NgTemplateOutlet,
                         TitleCasePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.emit(event())\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\n  @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [class.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\" [class.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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.emit(event())\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\n  @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [class.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\" [class.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 (dateObjSignal(); 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"] }]
         }], propDecorators: { event: [{ type: i0.Input, args: [{ isSignal: true, alias: "event", required: true }] }], colSidePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSidePosition", required: false }] }], langCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "langCode", required: false }] }], innerEventCustomTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerEventCustomTemplate", required: false }] }], eventDescriptionCustomTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventDescriptionCustomTemplate", required: false }] }], enableAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAnimation", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], clickEmitter: [{ type: i0.Output, args: ["clickEmitter"] }] } });
 
 class NgxTimelineComponent {
     /**
      * List of events to be displayed.
      */
-    events = input.required({ ...(ngDevMode ? { debugName: "events" } : {}) });
+    events = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
     /**
      * Language code used to show the date formatted.
      */
-    langCode = input(defaultSupportedLanguageCode, { ...(ngDevMode ? { debugName: "langCode" } : {}) });
+    langCode = input(defaultSupportedLanguageCode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "langCode" }] : /* istanbul ignore next */ []));
     /**
      * Boolean used to enable or disable the animations.
      */
-    enableAnimation = input(true, { ...(ngDevMode ? { debugName: "enableAnimation" } : {}) });
+    enableAnimation = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableAnimation" }] : /* istanbul ignore next */ []));
     /**
      * Boolean used to reverse sort order (default older first).
      */
-    reverseOrder = input(false, { ...(ngDevMode ? { debugName: "reverseOrder" } : {}) });
+    reverseOrder = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reverseOrder" }] : /* istanbul ignore next */ []));
     /**
      * Orientation of the timeline.
      */
-    orientation = input(NgxTimelineOrientation.VERTICAL, { ...(ngDevMode ? { debugName: "orientation" } : {}) });
+    orientation = input(NgxTimelineOrientation.VERTICAL, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /**
      * Logic to be applied in order to group events.
      */
-    groupEvent = input(NgxTimelineEventGroup.MONTH_YEAR, { ...(ngDevMode ? { debugName: "groupEvent" } : {}) });
+    groupEvent = input(NgxTimelineEventGroup.MONTH_YEAR, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupEvent" }] : /* istanbul ignore next */ []));
     /**
      * Logic to be applied in order to put events on LEFT or RIGHT.
      */
-    changeSide = input(NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP, { ...(ngDevMode ? { debugName: "changeSide" } : {}) });
+    changeSide = input(NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "changeSide" }] : /* istanbul ignore next */ []));
     /**
      * Custom Template displayed before a group of events.
      */
-    periodCustomTemplate = input(undefined, { ...(ngDevMode ? { debugName: "periodCustomTemplate" } : {}) });
+    periodCustomTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "periodCustomTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Custom Template displayed to show a single event.
      */
-    eventCustomTemplate = input(undefined, { ...(ngDevMode ? { debugName: "eventCustomTemplate" } : {}) });
+    eventCustomTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "eventCustomTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Custom Template displayed to show a separator icon.
      */
-    centerIconCustomTemplate = input(undefined, { ...(ngDevMode ? { debugName: "centerIconCustomTemplate" } : {}) });
+    centerIconCustomTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "centerIconCustomTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Custom Template displayed to show the side date.
      */
-    dateInstantCustomTemplate = input(undefined, { ...(ngDevMode ? { debugName: "dateInstantCustomTemplate" } : {}) });
+    dateInstantCustomTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dateInstantCustomTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Custom Template displayed to show the inner event.
      */
-    innerEventCustomTemplate = input(undefined, { ...(ngDevMode ? { debugName: "innerEventCustomTemplate" } : {}) });
+    innerEventCustomTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "innerEventCustomTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Inner custom template used to display the event description.
      */
-    eventDescriptionCustomTemplate = input(undefined, { ...(ngDevMode ? { debugName: "eventDescriptionCustomTemplate" } : {}) });
+    eventDescriptionCustomTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "eventDescriptionCustomTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Enable virtual scrolling, for rendering performance. Useful when rendering thousands of items.
      */
-    virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : {}) });
+    virtualScroll = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
     /**
      * The size of the items in the list (in pixels).
      */
-    virtualScrollItemSize = input(100, { ...(ngDevMode ? { debugName: "virtualScrollItemSize" } : {}) });
+    virtualScrollItemSize = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
     /**
      * The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.
      */
-    virtualScrollMaxBufferPx = input(200, { ...(ngDevMode ? { debugName: "virtualScrollMaxBufferPx" } : {}) });
+    virtualScrollMaxBufferPx = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScrollMaxBufferPx" }] : /* istanbul ignore next */ []));
     /**
      * The minimum amount of buffer rendered beyond the viewport (in pixels).
      * If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
      */
-    virtualScrollMinBufferPx = input(100, { ...(ngDevMode ? { debugName: "virtualScrollMinBufferPx" } : {}) });
+    virtualScrollMinBufferPx = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScrollMinBufferPx" }] : /* istanbul ignore next */ []));
     /**
      * Output click event emitter.
      */
@@ -447,7 +472,7 @@ class NgxTimelineComponent {
             || this.compareEventsField(prevEvent, event, ...(fieldsToCheckEventChangeSideInGroup[this.changeSide()] ?? []));
     }
     compareEventsField(prevEvent, event, ...fields) {
-        return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), false);
+        return fields.reduce((res, field) => res || prevEvent.timestamp[field]() !== event.timestamp[field](), false);
     }
     getPeriodInfoFromPeriodKey(periodKey, firstGroupEvent) {
         const split = periodKey.split(this.separator);
@@ -471,10 +496,10 @@ class NgxTimelineComponent {
     getOrientationForVirtualScroll() {
         return this.orientation().toLowerCase();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: true, transformFunction: null }, langCode: { classPropertyName: "langCode", publicName: "langCode", isSignal: true, isRequired: false, transformFunction: null }, enableAnimation: { classPropertyName: "enableAnimation", publicName: "enableAnimation", isSignal: true, isRequired: false, transformFunction: null }, reverseOrder: { classPropertyName: "reverseOrder", publicName: "reverseOrder", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupEvent: { classPropertyName: "groupEvent", publicName: "groupEvent", isSignal: true, isRequired: false, transformFunction: null }, changeSide: { classPropertyName: "changeSide", publicName: "changeSide", isSignal: true, isRequired: false, transformFunction: null }, periodCustomTemplate: { classPropertyName: "periodCustomTemplate", publicName: "periodCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventCustomTemplate: { classPropertyName: "eventCustomTemplate", publicName: "eventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerIconCustomTemplate: { classPropertyName: "centerIconCustomTemplate", publicName: "centerIconCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateInstantCustomTemplate: { classPropertyName: "dateInstantCustomTemplate", publicName: "dateInstantCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, innerEventCustomTemplate: { classPropertyName: "innerEventCustomTemplate", publicName: "innerEventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventDescriptionCustomTemplate: { classPropertyName: "eventDescriptionCustomTemplate", publicName: "eventDescriptionCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"virtualScroll() ? 'virtual-scroll-container' : 'main-container'\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      class=\"items-container\"\r\n      [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\"\r\n      [orientation]=\"getOrientationForVirtualScroll()\"\r\n      [itemSize]=\"virtualScrollItemSize()\"\r\n      [maxBufferPx]=\"virtualScrollMaxBufferPx()\"\r\n      [minBufferPx]=\"virtualScrollMinBufferPx()\"\r\n    >\r\n      <div *cdkVirtualFor=\"let item of items\">\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item }\"\r\n        ></ng-template>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div class=\"items-container\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\r\n      @for (item of items; track item; let index = $index) {\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: index }\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #rowTemplate let-item=\"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</ng-template>\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 [class.transparent]=\"index === items.length - 1\" [class.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.emit($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,.virtual-scroll-container{display:flex;justify-content:center;width:100%}.virtual-scroll-container{height:100%}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.virtual-scroll-container>.horizontal{min-height:0}.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: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:not(.col-period){min-height:10rem}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.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: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: true, transformFunction: null }, langCode: { classPropertyName: "langCode", publicName: "langCode", isSignal: true, isRequired: false, transformFunction: null }, enableAnimation: { classPropertyName: "enableAnimation", publicName: "enableAnimation", isSignal: true, isRequired: false, transformFunction: null }, reverseOrder: { classPropertyName: "reverseOrder", publicName: "reverseOrder", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupEvent: { classPropertyName: "groupEvent", publicName: "groupEvent", isSignal: true, isRequired: false, transformFunction: null }, changeSide: { classPropertyName: "changeSide", publicName: "changeSide", isSignal: true, isRequired: false, transformFunction: null }, periodCustomTemplate: { classPropertyName: "periodCustomTemplate", publicName: "periodCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventCustomTemplate: { classPropertyName: "eventCustomTemplate", publicName: "eventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerIconCustomTemplate: { classPropertyName: "centerIconCustomTemplate", publicName: "centerIconCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateInstantCustomTemplate: { classPropertyName: "dateInstantCustomTemplate", publicName: "dateInstantCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, innerEventCustomTemplate: { classPropertyName: "innerEventCustomTemplate", publicName: "innerEventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventDescriptionCustomTemplate: { classPropertyName: "eventDescriptionCustomTemplate", publicName: "eventDescriptionCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"virtualScroll() ? 'virtual-scroll-container' : 'main-container'\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      class=\"items-container\"\r\n      [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\"\r\n      [orientation]=\"getOrientationForVirtualScroll()\"\r\n      [itemSize]=\"virtualScrollItemSize()\"\r\n      [maxBufferPx]=\"virtualScrollMaxBufferPx()\"\r\n      [minBufferPx]=\"virtualScrollMinBufferPx()\"\r\n    >\r\n      <div *cdkVirtualFor=\"let item of items\">\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item }\"\r\n        ></ng-template>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div class=\"items-container\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\r\n      @for (item of items; track item; let index = $index) {\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: index }\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #rowTemplate let-item=\"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      } @else {\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      } @else {\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</ng-template>\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 [class.transparent]=\"index === items.length - 1\" [class.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.emit($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,.virtual-scroll-container{display:flex;justify-content:center;width:100%}.virtual-scroll-container{height:100%}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.virtual-scroll-container>.horizontal{min-height:0}.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: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:not(.col-period){min-height:10rem}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.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: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-timeline', imports: [
                         NgClass,
@@ -482,7 +507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         NgxDatePipe,
                         NgxTimelineEventComponent,
                         ScrollingModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"virtualScroll() ? 'virtual-scroll-container' : 'main-container'\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      class=\"items-container\"\r\n      [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\"\r\n      [orientation]=\"getOrientationForVirtualScroll()\"\r\n      [itemSize]=\"virtualScrollItemSize()\"\r\n      [maxBufferPx]=\"virtualScrollMaxBufferPx()\"\r\n      [minBufferPx]=\"virtualScrollMinBufferPx()\"\r\n    >\r\n      <div *cdkVirtualFor=\"let item of items\">\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item }\"\r\n        ></ng-template>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div class=\"items-container\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\r\n      @for (item of items; track item; let index = $index) {\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: index }\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #rowTemplate let-item=\"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</ng-template>\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 [class.transparent]=\"index === items.length - 1\" [class.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.emit($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,.virtual-scroll-container{display:flex;justify-content:center;width:100%}.virtual-scroll-container{height:100%}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.virtual-scroll-container>.horizontal{min-height:0}.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: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:not(.col-period){min-height:10rem}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"virtualScroll() ? 'virtual-scroll-container' : 'main-container'\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      class=\"items-container\"\r\n      [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\"\r\n      [orientation]=\"getOrientationForVirtualScroll()\"\r\n      [itemSize]=\"virtualScrollItemSize()\"\r\n      [maxBufferPx]=\"virtualScrollMaxBufferPx()\"\r\n      [minBufferPx]=\"virtualScrollMinBufferPx()\"\r\n    >\r\n      <div *cdkVirtualFor=\"let item of items\">\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item }\"\r\n        ></ng-template>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div class=\"items-container\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\r\n      @for (item of items; track item; let index = $index) {\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: index }\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #rowTemplate let-item=\"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      } @else {\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      } @else {\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</ng-template>\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 [class.transparent]=\"index === items.length - 1\" [class.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.emit($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,.virtual-scroll-container{display:flex;justify-content:center;width:100%}.virtual-scroll-container{height:100%}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.virtual-scroll-container>.horizontal{min-height:0}.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: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:not(.col-period){min-height:10rem}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.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: i0.Input, args: [{ isSignal: true, alias: "events", required: true }] }], langCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "langCode", required: false }] }], enableAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAnimation", required: false }] }], reverseOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseOrder", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupEvent", required: false }] }], changeSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeSide", required: false }] }], periodCustomTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodCustomTemplate", required: false }] }], eventCustomTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventCustomTemplate", required: false }] }], centerIconCustomTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerIconCustomTemplate", required: false }] }], dateInstantCustomTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateInstantCustomTemplate", required: false }] }], innerEventCustomTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerEventCustomTemplate", required: false }] }], eventDescriptionCustomTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventDescriptionCustomTemplate", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], virtualScrollMaxBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollMaxBufferPx", required: false }] }], virtualScrollMinBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollMinBufferPx", required: false }] }], clickEmitter: [{ type: i0.Output, args: ["clickEmitter"] }] } });
 
 registerLocaleData(localeDe);
@@ -496,11 +521,11 @@ registerLocaleData(localeSl);
 registerLocaleData(localeTr);
 registerLocaleData(localeNo);
 class NgxTimelineModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: NgxTimelineModule, imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent], exports: [NgxDatePipe, NgxTimelineComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxTimelineModule, imports: [NgxTimelineComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: NgxTimelineModule, imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent], exports: [NgxDatePipe, NgxTimelineComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxTimelineModule, imports: [NgxTimelineComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NgxTimelineModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent],

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/pipes/ngx-date-pipe.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/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', 'nb'] 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 const dateConfigMap: Record<SupportedLanguageCode, NgxConfigDate> = {\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  nb: {\n    code: 'nb-NO',\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  HOURS_MINUTES = 'HOURS_MINUTES',\n  MONTH_YEAR = 'MONTH_YEAR',\n  YEAR = 'YEAR',\n}\n\nexport const fieldConfigDate: Record<NgxDateFormat, keyof NgxConfigDate> = {\n  DAY_MONTH_YEAR: 'dayMonthYear',\n  FULL_DATE: 'fullDate',\n  HOURS_MINUTES: 'hoursMinutes',\n  MONTH_YEAR: 'monthYear',\n  YEAR: 'year',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n  YEAR = 'YEAR',\n  MONTH_YEAR = 'MONTH_YEAR',\n  DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n}\n\nexport const fieldsToAddEventGroup: Record<NgxTimelineEventGroup, string[]> = {\n  YEAR: ['getFullYear'],\n  MONTH_YEAR: ['getFullYear', 'getMonth'],\n  DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat: Record<NgxTimelineEventGroup, NgxDateFormat> = {\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 group event logic.\n */\nexport enum NgxTimelineOrientation {\n  HORIZONTAL = 'HORIZONTAL',\n  VERTICAL = 'VERTICAL',\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: Partial<Record<NgxTimelineEventChangeSide, string[]>> = {\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?: unknown;\n  itemPosition?: NgxTimelineItemPosition;\n}\n\nexport interface NgxTimelinePeriodInfo {\n  periodKey?: string;\n  year?: number;\n  month?: number;\n  day?: number;\n  firstDate?: Date;\n}\n\n/**\n * Item used inside the timeline.\n */\nexport interface NgxTimelineItem {\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 } from '@angular/common';\nimport { Pipe, PipeTransform } from '@angular/core';\n\nimport { dateConfigMap, defaultSupportedLanguageCode, fieldConfigDate, NgxConfigDate, NgxDateFormat, SupportedLanguageCode } from '../models';\n\n@Pipe({\n  name: 'ngxdate',\n})\nexport class NgxDatePipe implements PipeTransform {\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n  transform(date: Date | string, dateFormat?: NgxDateFormat | string, langCode?: SupportedLanguageCode): string | null {\n    const configDate = this.getDateConfig(langCode);\n    let dateFormatString = 'yyyy';\n    if (dateFormat === undefined) {\n      console.warn('frxjs-ngx-timeline: no date format defined.');\n    }\n    else if (dateFormat in NgxDateFormat) {\n      dateFormatString = this.dateFormat(dateFormat as NgxDateFormat, configDate);\n    }\n    else if (typeof dateFormat === 'string') {\n      dateFormatString = dateFormat;\n    }\n    return new DatePipe(configDate.code).transform(new Date(date), dateFormatString);\n  }\n\n  private dateFormat(dateFormat: NgxDateFormat, 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 { DatePipe, NgTemplateOutlet, TitleCasePipe } from '@angular/common';\nimport { Component, output, TemplateRef, input, ChangeDetectionStrategy } from '@angular/core';\n\nimport { defaultSupportedLanguageCode, NgxTimelineOrientation, SupportedLanguageCode } from '../../models';\nimport { NgxTimelineItem, NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';\n\n@Component({\n  selector: 'ngx-timeline-event',\n  imports: [\n    NgTemplateOutlet,\n    TitleCasePipe,\n  ],\n  templateUrl: './ngx-timeline-event.component.html',\n  styleUrl: './ngx-timeline-event.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgxTimelineEventComponent {\n  /**\n   * Event to be displayed.\n   */\n  readonly event = input.required<NgxTimelineItem>();\n  /**\n   * Event position respect to the vertical line (LEFT or RIGHT).\n   */\n  readonly colSidePosition = input<NgxTimelineItemPosition>();\n  /**\n   * Language code used to format the dates.\n   */\n  readonly langCode = input<SupportedLanguageCode>(defaultSupportedLanguageCode);\n  /**\n   * Inner custom template used to display the event detail.\n   */\n  readonly innerEventCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Inner custom template used to display the event description.\n   */\n  readonly eventDescriptionCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Boolean used to enable or disable the animations.\n   */\n  readonly enableAnimation = input(true);\n  /**\n   * Orientation of the timeline.\n   */\n  readonly orientation = input<NgxTimelineOrientation>(NgxTimelineOrientation.VERTICAL);\n  /**\n   * Output click event emitter.\n   */\n  readonly clickEmitter = output<NgxTimelineItem>();\n\n  ngxTimelineItemPosition = NgxTimelineItemPosition;\n  ngxTimelineOrientation = NgxTimelineOrientation;\n\n  private readonly monthAbbr = 'MMM';\n  private readonly dayFormat = 'dd';\n\n  getDateObj(): { day: unknown; month: unknown; year: unknown } {\n    let day = undefined;\n    let month = undefined;\n    let year = undefined;\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.emit(event())\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\n  @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [class.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\" [class.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 { ScrollingModule } from '@angular/cdk/scrolling';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { Component, DoCheck, inject, IterableDiffer, IterableDiffers, OnChanges, TemplateRef, input, output, ChangeDetectionStrategy } from '@angular/core';\n\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';\nimport { NgxTimelineEventComponent } from './ngx-timeline-event/ngx-timeline-event.component';\n\n@Component({\n  selector: 'ngx-timeline',\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    NgxDatePipe,\n    NgxTimelineEventComponent,\n    ScrollingModule,\n  ],\n  templateUrl: './ngx-timeline.component.html',\n  styleUrl: './ngx-timeline.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgxTimelineComponent implements OnChanges, DoCheck {\n  /**\n   * List of events to be displayed.\n   */\n  readonly events = input.required<NgxTimelineEvent[]>();\n  /**\n   * Language code used to show the date formatted.\n   */\n  readonly langCode = input<SupportedLanguageCode>(defaultSupportedLanguageCode);\n  /**\n   * Boolean used to enable or disable the animations.\n   */\n  readonly enableAnimation = input<boolean>(true);\n  /**\n   * Boolean used to reverse sort order (default older first).\n   */\n  readonly reverseOrder = input<boolean>(false);\n  /**\n   * Orientation of the timeline.\n   */\n  readonly orientation = input<NgxTimelineOrientation>(NgxTimelineOrientation.VERTICAL);\n  /**\n   * Logic to be applied in order to group events.\n   */\n  readonly groupEvent = input<NgxTimelineEventGroup>(NgxTimelineEventGroup.MONTH_YEAR);\n  /**\n   * Logic to be applied in order to put events on LEFT or RIGHT.\n   */\n  readonly changeSide = input<NgxTimelineEventChangeSide>(NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP);\n  /**\n   * Custom Template displayed before a group of events.\n   */\n  readonly periodCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Custom Template displayed to show a single event.\n   */\n  readonly eventCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Custom Template displayed to show a separator icon.\n   */\n  readonly centerIconCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Custom Template displayed to show the side date.\n   */\n  readonly dateInstantCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Custom Template displayed to show the inner event.\n   */\n  readonly innerEventCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Inner custom template used to display the event description.\n   */\n  readonly eventDescriptionCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Enable virtual scrolling, for rendering performance. Useful when rendering thousands of items.\n   */\n  readonly virtualScroll = input<boolean>(false);\n  /**\n   * The size of the items in the list (in pixels).\n   */\n  readonly virtualScrollItemSize = input<number>(100);\n  /**\n   * The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.\n   */\n  readonly virtualScrollMaxBufferPx = input<number>(200);\n  /**\n   * The minimum amount of buffer rendered beyond the viewport (in pixels).\n   * If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.\n   */\n  readonly virtualScrollMinBufferPx = input<number>(100);\n  /**\n   * Output click event emitter.\n   */\n  readonly clickEmitter = output<NgxTimelineItem>();\n\n  groups: Record<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<unknown> = this.differs.find([]).create();\n  private readonly separator = '/';\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: number = a.timestamp.getTime();\n      const bTime: number = b.timestamp.getTime();\n      return this.reverseOrder() ? bTime - aTime : aTime - bTime;\n    });\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({ periodInfo: 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: NgxTimelinePeriodInfo | undefined = p.periodInfo;\n      if (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\n  protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean {\n    const periodKey = periodInfo?.periodKey;\n    if (periodKey == undefined) {\n      return onLeft;\n    }\n    this.groups[periodKey].forEach((event: NgxTimelineEvent, index: number) => {\n      const prevEvent = this.groups[periodKey][index - 1];\n      if (event.itemPosition) {\n        onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;\n      }\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\n        : 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 as keyof Date] as () => number)() !== (event.timestamp[field as keyof Date] as () => number)(), false);\n  }\n\n  protected getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): 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): NgxTimelinePeriodInfo {\n    return {\n      year: Number(split[0]),\n      month: Number(split[1]),\n      day: Number(split[2]),\n      periodKey,\n      firstDate: firstGroupEvent.timestamp,\n    };\n  }\n\n  private shouldChangeEventsInPeriod(): boolean {\n    return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].includes(this.changeSide());\n  }\n\n  protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n    return fieldsToAddEventGroup[this.groupEvent()].map(field => (event.timestamp[field as keyof Date] as () => number)()).join(this.separator);\n  }\n\n  getOrientationForVirtualScroll(): Lowercase<NgxTimelineOrientation.HORIZONTAL | NgxTimelineOrientation.VERTICAL> {\n    return this.orientation().toLowerCase() as Lowercase<NgxTimelineOrientation>;\n  }\n}\n","<div [ngClass]=\"virtualScroll() ? 'virtual-scroll-container' : 'main-container'\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      class=\"items-container\"\r\n      [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\"\r\n      [orientation]=\"getOrientationForVirtualScroll()\"\r\n      [itemSize]=\"virtualScrollItemSize()\"\r\n      [maxBufferPx]=\"virtualScrollMaxBufferPx()\"\r\n      [minBufferPx]=\"virtualScrollMinBufferPx()\"\r\n    >\r\n      <div *cdkVirtualFor=\"let item of items\">\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item }\"\r\n        ></ng-template>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div class=\"items-container\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\r\n      @for (item of items; track item; let index = $index) {\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: index }\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #rowTemplate let-item=\"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</ng-template>\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 [class.transparent]=\"index === items.length - 1\" [class.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.emit($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import { 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 localeNo from '@angular/common/locales/nb';\nimport { NgModule } from '@angular/core';\n\nimport { NgxTimelineComponent, NgxTimelineEventComponent } from './components';\nimport { NgxDatePipe } from './pipes';\n\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeIt);\nregisterLocaleData(localePl);\nregisterLocaleData(localePt);\nregisterLocaleData(localeRu);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localeNo);\n\n@NgModule({\n  imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent],\n  declarations: [],\n  exports: [NgxDatePipe, NgxTimelineComponent],\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/pipes/ngx-date-pipe.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/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', 'nb'] 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 const dateConfigMap: Record<SupportedLanguageCode, NgxConfigDate> = {\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  nb: {\n    code: 'nb-NO',\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  HOURS_MINUTES = 'HOURS_MINUTES',\n  MONTH_YEAR = 'MONTH_YEAR',\n  YEAR = 'YEAR',\n}\n\nexport const fieldConfigDate: Record<NgxDateFormat, keyof NgxConfigDate> = {\n  DAY_MONTH_YEAR: 'dayMonthYear',\n  FULL_DATE: 'fullDate',\n  HOURS_MINUTES: 'hoursMinutes',\n  MONTH_YEAR: 'monthYear',\n  YEAR: 'year',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n  YEAR = 'YEAR',\n  MONTH_YEAR = 'MONTH_YEAR',\n  DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n}\n\nexport const fieldsToAddEventGroup: Record<NgxTimelineEventGroup, string[]> = {\n  YEAR: ['getFullYear'],\n  MONTH_YEAR: ['getFullYear', 'getMonth'],\n  DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat: Record<NgxTimelineEventGroup, NgxDateFormat> = {\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 group event logic.\n */\nexport enum NgxTimelineOrientation {\n  HORIZONTAL = 'HORIZONTAL',\n  VERTICAL = 'VERTICAL',\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: Partial<Record<NgxTimelineEventChangeSide, string[]>> = {\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?: unknown;\n  itemPosition?: NgxTimelineItemPosition;\n}\n\nexport interface NgxTimelinePeriodInfo {\n  periodKey?: string;\n  year?: number;\n  month?: number;\n  day?: number;\n  firstDate?: Date;\n}\n\n/**\n * Item used inside the timeline.\n */\nexport interface NgxTimelineItem {\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 } from '@angular/common';\nimport { Pipe, PipeTransform } from '@angular/core';\n\nimport { dateConfigMap, defaultSupportedLanguageCode, fieldConfigDate, NgxConfigDate, NgxDateFormat, SupportedLanguageCode } from '../models';\n\n@Pipe({\n  name: 'ngxdate',\n})\nexport class NgxDatePipe implements PipeTransform {\n  transform(date: Date | string, dateFormat?: NgxDateFormat | string, langCode?: SupportedLanguageCode): string | null {\n    const configDate = this.getDateConfig(langCode);\n    let dateFormatString = 'yyyy';\n    if (dateFormat === undefined) {\n      console.warn('frxjs-ngx-timeline: no date format defined.');\n    }\n    else if (dateFormat in NgxDateFormat) {\n      dateFormatString = this.dateFormat(dateFormat as NgxDateFormat, configDate);\n    }\n    else if (typeof dateFormat === 'string') {\n      dateFormatString = dateFormat;\n    }\n    return new DatePipe(configDate.code).transform(new Date(date), dateFormatString);\n  }\n\n  private dateFormat(dateFormat: NgxDateFormat, 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 { DatePipe, NgTemplateOutlet, TitleCasePipe } from '@angular/common';\nimport { Component, output, TemplateRef, input, ChangeDetectionStrategy, computed } from '@angular/core';\n\nimport { defaultSupportedLanguageCode, NgxTimelineOrientation, SupportedLanguageCode } from '../../models';\nimport { NgxTimelineItem, NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';\n\n@Component({\n  selector: 'ngx-timeline-event',\n  imports: [\n    NgTemplateOutlet,\n    TitleCasePipe,\n  ],\n  templateUrl: './ngx-timeline-event.component.html',\n  styleUrl: './ngx-timeline-event.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgxTimelineEventComponent {\n  /**\n   * Event to be displayed.\n   */\n  readonly event = input.required<NgxTimelineItem>();\n  /**\n   * Event position respect to the vertical line (LEFT or RIGHT).\n   */\n  readonly colSidePosition = input<NgxTimelineItemPosition>();\n  /**\n   * Language code used to format the dates.\n   */\n  readonly langCode = input<SupportedLanguageCode>(defaultSupportedLanguageCode);\n  /**\n   * Inner custom template used to display the event detail.\n   */\n  readonly innerEventCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Inner custom template used to display the event description.\n   */\n  readonly eventDescriptionCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Boolean used to enable or disable the animations.\n   */\n  readonly enableAnimation = input(true);\n  /**\n   * Orientation of the timeline.\n   */\n  readonly orientation = input<NgxTimelineOrientation>(NgxTimelineOrientation.VERTICAL);\n  /**\n   * Output click event emitter.\n   */\n  readonly clickEmitter = output<NgxTimelineItem>();\n\n  ngxTimelineItemPosition = NgxTimelineItemPosition;\n  ngxTimelineOrientation = NgxTimelineOrientation;\n  readonly dateObjSignal = computed(() => !this.event() ? null : this.getDateObj());\n\n  private readonly monthAbbr = 'MMM';\n  private readonly dayFormat = 'dd';\n\n  getDateObj(): { day: unknown; month: unknown; year: unknown } {\n    let day = undefined;\n    let month = undefined;\n    let year = undefined;\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.emit(event())\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\n  @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n    <div class=\"arrow left\"></div>\n  }\n  <div class=\"event\" [class.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\" [class.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 (dateObjSignal(); 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 { ScrollingModule } from '@angular/cdk/scrolling';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { Component, DoCheck, inject, IterableDiffer, IterableDiffers, OnChanges, TemplateRef, input, output, ChangeDetectionStrategy } from '@angular/core';\n\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';\nimport { NgxTimelineEventComponent } from './ngx-timeline-event/ngx-timeline-event.component';\n\n@Component({\n  selector: 'ngx-timeline',\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    NgxDatePipe,\n    NgxTimelineEventComponent,\n    ScrollingModule,\n  ],\n  templateUrl: './ngx-timeline.component.html',\n  styleUrl: './ngx-timeline.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgxTimelineComponent implements OnChanges, DoCheck {\n  /**\n   * List of events to be displayed.\n   */\n  readonly events = input.required<NgxTimelineEvent[]>();\n  /**\n   * Language code used to show the date formatted.\n   */\n  readonly langCode = input<SupportedLanguageCode>(defaultSupportedLanguageCode);\n  /**\n   * Boolean used to enable or disable the animations.\n   */\n  readonly enableAnimation = input<boolean>(true);\n  /**\n   * Boolean used to reverse sort order (default older first).\n   */\n  readonly reverseOrder = input<boolean>(false);\n  /**\n   * Orientation of the timeline.\n   */\n  readonly orientation = input<NgxTimelineOrientation>(NgxTimelineOrientation.VERTICAL);\n  /**\n   * Logic to be applied in order to group events.\n   */\n  readonly groupEvent = input<NgxTimelineEventGroup>(NgxTimelineEventGroup.MONTH_YEAR);\n  /**\n   * Logic to be applied in order to put events on LEFT or RIGHT.\n   */\n  readonly changeSide = input<NgxTimelineEventChangeSide>(NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP);\n  /**\n   * Custom Template displayed before a group of events.\n   */\n  readonly periodCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Custom Template displayed to show a single event.\n   */\n  readonly eventCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Custom Template displayed to show a separator icon.\n   */\n  readonly centerIconCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Custom Template displayed to show the side date.\n   */\n  readonly dateInstantCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Custom Template displayed to show the inner event.\n   */\n  readonly innerEventCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Inner custom template used to display the event description.\n   */\n  readonly eventDescriptionCustomTemplate = input<TemplateRef<unknown>>();\n  /**\n   * Enable virtual scrolling, for rendering performance. Useful when rendering thousands of items.\n   */\n  readonly virtualScroll = input<boolean>(false);\n  /**\n   * The size of the items in the list (in pixels).\n   */\n  readonly virtualScrollItemSize = input<number>(100);\n  /**\n   * The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.\n   */\n  readonly virtualScrollMaxBufferPx = input<number>(200);\n  /**\n   * The minimum amount of buffer rendered beyond the viewport (in pixels).\n   * If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.\n   */\n  readonly virtualScrollMinBufferPx = input<number>(100);\n  /**\n   * Output click event emitter.\n   */\n  readonly clickEmitter = output<NgxTimelineItem>();\n\n  groups: Record<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<unknown> = this.differs.find([]).create();\n  private readonly separator = '/';\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: number = a.timestamp.getTime();\n      const bTime: number = b.timestamp.getTime();\n      return this.reverseOrder() ? bTime - aTime : aTime - bTime;\n    });\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({ periodInfo: 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: NgxTimelinePeriodInfo | undefined = p.periodInfo;\n      if (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\n  protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean {\n    const periodKey = periodInfo?.periodKey;\n    if (periodKey == undefined) {\n      return onLeft;\n    }\n    this.groups[periodKey].forEach((event: NgxTimelineEvent, index: number) => {\n      const prevEvent = this.groups[periodKey][index - 1];\n      if (event.itemPosition) {\n        onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;\n      }\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\n        : 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 || (prevEvent.timestamp[field as keyof Date] as () => number)() !== (event.timestamp[field as keyof Date] as () => number)(), false);\n  }\n\n  protected getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): 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): NgxTimelinePeriodInfo {\n    return {\n      year: Number(split[0]),\n      month: Number(split[1]),\n      day: Number(split[2]),\n      periodKey,\n      firstDate: firstGroupEvent.timestamp,\n    };\n  }\n\n  private shouldChangeEventsInPeriod(): boolean {\n    return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].includes(this.changeSide());\n  }\n\n  protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n    return fieldsToAddEventGroup[this.groupEvent()].map(field => (event.timestamp[field as keyof Date] as () => number)()).join(this.separator);\n  }\n\n  getOrientationForVirtualScroll(): Lowercase<NgxTimelineOrientation.HORIZONTAL | NgxTimelineOrientation.VERTICAL> {\n    return this.orientation().toLowerCase() as Lowercase<NgxTimelineOrientation>;\n  }\n}\n","<div [ngClass]=\"virtualScroll() ? 'virtual-scroll-container' : 'main-container'\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      class=\"items-container\"\r\n      [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\"\r\n      [orientation]=\"getOrientationForVirtualScroll()\"\r\n      [itemSize]=\"virtualScrollItemSize()\"\r\n      [maxBufferPx]=\"virtualScrollMaxBufferPx()\"\r\n      [minBufferPx]=\"virtualScrollMinBufferPx()\"\r\n    >\r\n      <div *cdkVirtualFor=\"let item of items\">\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item }\"\r\n        ></ng-template>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div class=\"items-container\" [class.horizontal]=\"orientation() === ngxTimelineOrientation.HORIZONTAL\">\r\n      @for (item of items; track item; let index = $index) {\r\n        <ng-template\r\n          *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: index }\"\r\n        ></ng-template>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #rowTemplate let-item=\"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      } @else {\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      } @else {\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</ng-template>\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 [class.transparent]=\"index === items.length - 1\" [class.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.emit($event)\">\r\n  </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import { 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 localeNo from '@angular/common/locales/nb';\nimport { NgModule } from '@angular/core';\n\nimport { NgxTimelineComponent, NgxTimelineEventComponent } from './components';\nimport { NgxDatePipe } from './pipes';\n\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeIt);\nregisterLocaleData(localePl);\nregisterLocaleData(localePt);\nregisterLocaleData(localeRu);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localeNo);\n\n@NgModule({\n  imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent],\n  declarations: [],\n  exports: [NgxDatePipe, NgxTimelineComponent],\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": "21.0.1",
+  "version": "22.0.1",
   "type": "module",
   "keywords": [
     "angular",
@@ -15,9 +15,9 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/cdk": "^21.0.1",
-    "@angular/common": "^21.0.1",
-    "@angular/core": "^21.0.1"
+    "@angular/cdk": "^22.0.1",
+    "@angular/common": "^22.0.1",
+    "@angular/core": "^22.0.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/types/frxjs-ngx-timeline.d.ts

@@ -222,6 +222,11 @@ declare class NgxTimelineEventComponent {
     readonly clickEmitter: _angular_core.OutputEmitterRef<NgxTimelineItem>;
     ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
     ngxTimelineOrientation: typeof NgxTimelineOrientation;
+    readonly dateObjSignal: _angular_core.Signal<{
+        day: unknown;
+        month: unknown;
+        year: unknown;
+    } | null>;
     private readonly monthAbbr;
     private readonly dayFormat;
     getDateObj(): {