@frxjs/ngx-timeline 19.0.2 → 20.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +2 -2
  2. package/fesm2022/frxjs-ngx-timeline.mjs +41 -30
  3. package/fesm2022/frxjs-ngx-timeline.mjs.map +1 -1
  4. package/index.d.ts +250 -3
  5. package/package.json +5 -5
  6. package/lib/components/index.d.ts +0 -2
  7. package/lib/components/ngx-timeline-event/ngx-timeline-event.component.d.ts +0 -50
  8. package/lib/components/ngx-timeline.component.d.ts +0 -109
  9. package/lib/models/NgxConfigObj.d.ts +0 -48
  10. package/lib/models/NgxTimelineEvent.d.ts +0 -29
  11. package/lib/models/index.d.ts +0 -2
  12. package/lib/ngx-timeline.module.d.ts +0 -9
  13. package/lib/pipes/index.d.ts +0 -1
  14. package/lib/pipes/ngx-date-pipe.d.ts +0 -10
  15. package/public-api.d.ts +0 -4
  16. package/style.scss +0 -10
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The main goal of this angular library is to give you the possibility to integrate a timeline in your app.
4
4
  <br>
5
- Version 19.0.2 is compatible with angular 19.
5
+ Version 20.0.2 is compatible with angular 20.
6
6
  <br>
7
7
  Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline
8
8
 
@@ -36,7 +36,7 @@ After installing the library and including NgxTimelineModule in your imports mod
36
36
  | Input name | Explanation | Mandatory | Type/Supported Values | Default value |
37
37
  |--------------------------------|-------------------------------------------------------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------|
38
38
  | events | list of events to be displayed | yes | NgxTimelineEvent | no default |
39
- | langCode | language code use to format dates | no | <ul><li>'en'</li><li>'it'</li><li>'fr'</li><li>'de'</li><li>'es'</li><li>'sl'</li><li>'tr'</li><li>'pl'</li><li>'pt'</li><li>'ru'</li></ul> | 'en' |
39
+ | 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>'no' (Norwegian)</li><li>'pl' (Polish)</li><li>'pt' (Portuguese)</li><li>'ru' (Russian)</li><li>'sl' (Slovenian)</li><li>'tr' (Turkish)</li></ul> | 'en' |
40
40
  | enableAnimation | Boolean used to enable or disable the animations | no | boolean | true |
41
41
  | reverseOrder | Boolean used to reverse sort order (default older first) | no | boolean | false |
42
42
  | virtualScroll | Boolean used to enable or disable the virtual scroll | no | boolean | false |
package/fesm2022/frxjs-ngx-timeline.mjs CHANGED
@@ -2,7 +2,7 @@ import * as i1 from '@angular/cdk/scrolling';
2
2
  import { ScrollingModule } from '@angular/cdk/scrolling';
3
3
  import { DatePipe, NgClass, NgTemplateOutlet, TitleCasePipe, registerLocaleData } from '@angular/common';
4
4
  import * as i0 from '@angular/core';
5
- import { Pipe, input, output, Component, inject, IterableDiffers, NgModule } from '@angular/core';
5
+ import { Pipe, input, output, ChangeDetectionStrategy, Component, inject, IterableDiffers, NgModule } from '@angular/core';
6
6
  import localeDe from '@angular/common/locales/de';
7
7
  import localeEs from '@angular/common/locales/es';
8
8
  import localeFr from '@angular/common/locales/fr';
@@ -12,8 +12,9 @@ import localePt from '@angular/common/locales/pt';
12
12
  import localeRu from '@angular/common/locales/ru';
13
13
  import localeSl from '@angular/common/locales/sl';
14
14
  import localeTr from '@angular/common/locales/tr';
15
+ import localeNo from '@angular/common/locales/nb';
15
16
 
16
- const supportedLanguageCodes = ['en', 'it', 'fr', 'de', 'es', 'sl', 'tr', 'pl', 'pt', 'ru'];
17
+ const supportedLanguageCodes = ['en', 'it', 'fr', 'de', 'es', 'sl', 'tr', 'pl', 'pt', 'ru', 'no'];
17
18
  const defaultSupportedLanguageCode = supportedLanguageCodes[0];
18
19
  const dateConfigMap = {
19
20
  en: {
@@ -96,6 +97,14 @@ const dateConfigMap = {
96
97
  year: 'yyyy',
97
98
  hoursMinutes: 'HH:mm',
98
99
  },
100
+ no: {
101
+ code: 'nb-NO',
102
+ fullDate: 'dd/MM/yyyy H:mm',
103
+ dayMonthYear: 'dd MMMM yyyy',
104
+ monthYear: 'MMMM yyyy',
105
+ year: 'yyyy',
106
+ hoursMinutes: 'HH:mm',
107
+ },
99
108
  };
100
109
  var NgxDateFormat;
101
110
  (function (NgxDateFormat) {
@@ -184,10 +193,10 @@ class NgxDatePipe {
184
193
  const code = langCode ?? defaultSupportedLanguageCode;
185
194
  return dateConfigMap[code];
186
195
  }
187
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
188
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: NgxDatePipe, isStandalone: true, name: "ngxdate" });
196
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
197
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: NgxDatePipe, isStandalone: true, name: "ngxdate" });
189
198
  }
190
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxDatePipe, decorators: [{
199
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxDatePipe, decorators: [{
191
200
  type: Pipe,
192
201
  args: [{
193
202
  name: 'ngxdate',
@@ -248,16 +257,16 @@ class NgxTimelineEventComponent {
248
257
  getLangCode() {
249
258
  return this.langCode();
250
259
  }
251
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
252
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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())\" [ngClass]=\"{'horizontal': orientation() === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation()}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate() || innerEventContainer; context: {event: event()}\"></ng-container>\n </div>\n @if (colSidePosition() === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition() === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate() || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;--ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px rgba(36,74,110,.1333333333));border-left:.5rem solid var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:var(--ngx-timeline-event-background) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:var(--ngx-timeline-event-divider-background)}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
260
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
261
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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())\" [ngClass]=\"{'horizontal': orientation() === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation()}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate() || innerEventContainer; context: {event: event()}\"></ng-container>\n </div>\n @if (colSidePosition() === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition() === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate() || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;--ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px rgba(36,74,110,.1333333333));border-left:.5rem solid var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:var(--ngx-timeline-event-background) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:var(--ngx-timeline-event-divider-background)}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
253
262
  }
254
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
263
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
255
264
  type: Component,
256
265
  args: [{ selector: 'ngx-timeline-event', imports: [
257
266
  NgClass,
258
267
  NgTemplateOutlet,
259
268
  TitleCasePipe,
260
- ], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.emit(event())\" [ngClass]=\"{'horizontal': orientation() === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation()}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate() || innerEventContainer; context: {event: event()}\"></ng-container>\n </div>\n @if (colSidePosition() === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition() === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate() || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;--ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px rgba(36,74,110,.1333333333));border-left:.5rem solid var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:var(--ngx-timeline-event-background) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:var(--ngx-timeline-event-divider-background)}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"] }]
269
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.emit(event())\" [ngClass]=\"{'horizontal': orientation() === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation()}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate() || innerEventContainer; context: {event: event()}\"></ng-container>\n </div>\n @if (colSidePosition() === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition() === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate() || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;--ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px rgba(36,74,110,.1333333333));border-left:.5rem solid var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:var(--ngx-timeline-event-background) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:var(--ngx-timeline-event-divider-background)}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"] }]
261
270
  }] });
262
271
 
263
272
  class NgxTimelineComponent {
@@ -331,8 +340,8 @@ class NgxTimelineComponent {
331
340
  */
332
341
  virtualScrollMinBufferPx = input(100);
333
342
  /**
334
- * Output click event emitter.
335
- */
343
+ * Output click event emitter.
344
+ */
336
345
  clickEmitter = output();
337
346
  groups = {};
338
347
  periods = [];
@@ -425,16 +434,17 @@ class NgxTimelineComponent {
425
434
  }
426
435
  pushEventOnItems(event, onLeft) {
427
436
  this.items.push({
428
- eventInfo: { ...event }, position: onLeft ?
429
- this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,
437
+ eventInfo: { ...event }, position: onLeft
438
+ ? this.ngxTimelineItemPosition.ON_LEFT
439
+ : this.ngxTimelineItemPosition.ON_RIGHT,
430
440
  });
431
441
  }
432
442
  /**
433
443
  * Compare the events inside the same group
434
444
  */
435
445
  compareEvents(prevEvent, event) {
436
- return this.shouldChangeEventsInPeriod() ||
437
- this.compareEventsField(prevEvent, event, ...(fieldsToCheckEventChangeSideInGroup[this.changeSide()] ?? []));
446
+ return this.shouldChangeEventsInPeriod()
447
+ || this.compareEventsField(prevEvent, event, ...(fieldsToCheckEventChangeSideInGroup[this.changeSide()] ?? []));
438
448
  }
439
449
  compareEventsField(prevEvent, event, ...fields) {
440
450
  return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), false);
@@ -456,44 +466,45 @@ class NgxTimelineComponent {
456
466
  return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].includes(this.changeSide());
457
467
  }
458
468
  getPeriodKeyFromEvent(event) {
459
- return fieldsToAddEventGroup[this.groupEvent()].map((field) => event.timestamp[field]()).join(this.separator);
469
+ return fieldsToAddEventGroup[this.groupEvent()].map(field => event.timestamp[field]()).join(this.separator);
460
470
  }
461
471
  getOrientationForVirtualScroll() {
462
472
  return this.orientation().toLowerCase();
463
473
  }
464
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
465
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 [ngClass]=\"{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\" [ngClass]=\"{'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 [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode()}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate() || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode()}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode()\"\r\n [orientation]=\"orientation()\"\r\n [enableAnimation]=\"enableAnimation()\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate()\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate()\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.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{min-height:0}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.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{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { 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"] }] });
474
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
475
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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 [ngClass]=\"{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\" [ngClass]=\"{'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 [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode()}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate() || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode()}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode()\"\r\n [orientation]=\"orientation()\"\r\n [enableAnimation]=\"enableAnimation()\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate()\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate()\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.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{min-height:0}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.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{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
466
476
  }
467
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
477
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxTimelineComponent, decorators: [{
468
478
  type: Component,
469
479
  args: [{ selector: 'ngx-timeline', imports: [
470
480
  NgClass,
471
481
  NgTemplateOutlet,
472
482
  NgxDatePipe,
473
483
  NgxTimelineEventComponent,
474
- ScrollingModule
475
- ], 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 [ngClass]=\"{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\" [ngClass]=\"{'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 [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode()}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate() || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode()}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode()\"\r\n [orientation]=\"orientation()\"\r\n [enableAnimation]=\"enableAnimation()\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate()\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate()\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.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{min-height:0}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.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{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
484
+ ScrollingModule,
485
+ ], 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 [ngClass]=\"{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\" [ngClass]=\"{'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 [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode()}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate() || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode()}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode()\"\r\n [orientation]=\"orientation()\"\r\n [enableAnimation]=\"enableAnimation()\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate()\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate()\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.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{min-height:0}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.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{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
476
486
  }] });
477
487
 
478
- registerLocaleData(localeIt);
479
- registerLocaleData(localeFr);
480
488
  registerLocaleData(localeDe);
481
489
  registerLocaleData(localeEs);
482
- registerLocaleData(localeSl);
483
- registerLocaleData(localeTr);
490
+ registerLocaleData(localeFr);
491
+ registerLocaleData(localeIt);
484
492
  registerLocaleData(localePl);
485
493
  registerLocaleData(localePt);
486
494
  registerLocaleData(localeRu);
495
+ registerLocaleData(localeSl);
496
+ registerLocaleData(localeTr);
497
+ registerLocaleData(localeNo);
487
498
  class NgxTimelineModule {
488
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
489
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineModule, imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent], exports: [NgxDatePipe, NgxTimelineComponent] });
490
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineModule, imports: [NgxTimelineComponent] });
499
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
500
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: NgxTimelineModule, imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent], exports: [NgxDatePipe, NgxTimelineComponent] });
501
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxTimelineModule, imports: [NgxTimelineComponent] });
491
502
  }
492
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineModule, decorators: [{
503
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxTimelineModule, decorators: [{
493
504
  type: NgModule,
494
505
  args: [{
495
- declarations: [],
496
506
  imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent],
507
+ declarations: [],
497
508
  exports: [NgxDatePipe, NgxTimelineComponent],
498
509
  }]
499
510
  }] });
package/fesm2022/frxjs-ngx-timeline.mjs.map CHANGED
@@ -1 +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'] 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};\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 } else if (dateFormat in NgxDateFormat) {\n dateFormatString = this.dateFormat(dateFormat as NgxDateFormat, configDate);\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, NgClass, NgTemplateOutlet, TitleCasePipe} from '@angular/common';\nimport {Component, output, TemplateRef, input} 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 templateUrl: './ngx-timeline-event.component.html',\n styleUrl: './ngx-timeline-event.component.scss',\n imports: [\n NgClass,\n NgTemplateOutlet,\n TitleCasePipe,\n ],\n})\nexport class NgxTimelineEventComponent {\n /**\n * Event to be displayed.\n */\n 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())\" [ngClass]=\"{'horizontal': orientation() === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation()}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate() || innerEventContainer; context: {event: event()}\"></ng-container>\n </div>\n @if (colSidePosition() === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition() === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate() || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n","import {ScrollingModule} from '@angular/cdk/scrolling';\nimport {NgClass, NgTemplateOutlet} from '@angular/common';\nimport {Component, DoCheck, inject, IterableDiffer, IterableDiffers, OnChanges, TemplateRef, input, output} 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 templateUrl: './ngx-timeline.component.html',\n styleUrl: './ngx-timeline.component.scss',\n imports: [\n NgClass,\n NgTemplateOutlet,\n NgxDatePipe,\n NgxTimelineEventComponent,\n ScrollingModule\n ],\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 } else if (index > 0 && this.compareEvents(prevEvent, event)) {\n onLeft = !onLeft;\n }\n this.pushEventOnItems(event, onLeft);\n });\n return onLeft;\n }\n\n protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {\n this.items.push({\n eventInfo: {...event}, position: onLeft ?\n this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,\n });\n }\n\n /**\n * Compare the events inside the same group\n */\n protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {\n return this.shouldChangeEventsInPeriod() ||\n this.compareEventsField(prevEvent, event, ...(fieldsToCheckEventChangeSide[this.changeSide()] ?? []));\n }\n\n protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {\n return fields.reduce((res, field) => res = res || (prevEvent.timestamp[field 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 protected 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 [ngClass]=\"{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\" [ngClass]=\"{'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 [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode()}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate() || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode()}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode()\"\r\n [orientation]=\"orientation()\"\r\n [enableAnimation]=\"enableAnimation()\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate()\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate()\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.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 {NgModule} from '@angular/core';\n\nimport {NgxTimelineComponent, NgxTimelineEventComponent} from './components';\nimport {NgxDatePipe} from './pipes';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePl);\nregisterLocaleData(localePt);\nregisterLocaleData(localeRu);\n\n@NgModule({\n declarations: [],\n imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent],\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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"}
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', 'no'] 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 no: {\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, NgClass, 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 NgClass,\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())\" [ngClass]=\"{'horizontal': orientation() === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition()===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation()}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate() || innerEventContainer; context: {event: event()}\"></ng-container>\n </div>\n @if (colSidePosition() === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition() === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate() || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n","import { 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 [ngClass]=\"{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\" [ngClass]=\"{'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 [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode()}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate() || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode()}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode()\"\r\n [orientation]=\"orientation()\"\r\n [enableAnimation]=\"enableAnimation()\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate()\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate()\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.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/index.d.ts CHANGED
@@ -1,5 +1,252 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { OnChanges, DoCheck, TemplateRef, PipeTransform } from '@angular/core';
3
+
4
+ declare const supportedLanguageCodes: readonly ["en", "it", "fr", "de", "es", "sl", "tr", "pl", "pt", "ru", "no"];
5
+ type SupportedLanguageCode = typeof supportedLanguageCodes[number];
6
+ declare const defaultSupportedLanguageCode: SupportedLanguageCode;
7
+ interface NgxConfigDate {
8
+ code: string;
9
+ dayMonthYear: string;
10
+ fullDate: string;
11
+ hoursMinutes: string;
12
+ monthYear: string;
13
+ year: string;
14
+ }
15
+ declare const dateConfigMap: Record<SupportedLanguageCode, NgxConfigDate>;
16
+ declare enum NgxDateFormat {
17
+ DAY_MONTH_YEAR = "DAY_MONTH_YEAR",
18
+ FULL_DATE = "FULL_DATE",
19
+ HOURS_MINUTES = "HOURS_MINUTES",
20
+ MONTH_YEAR = "MONTH_YEAR",
21
+ YEAR = "YEAR"
22
+ }
23
+ declare const fieldConfigDate: Record<NgxDateFormat, keyof NgxConfigDate>;
1
24
  /**
2
- * Generated bundle index. Do not edit.
25
+ * Enum used to set the group event logic
3
26
  */
4
- /// <amd-module name="@frxjs/ngx-timeline" />
5
- export * from './public-api';
27
+ declare enum NgxTimelineEventGroup {
28
+ YEAR = "YEAR",
29
+ MONTH_YEAR = "MONTH_YEAR",
30
+ DAY_MONTH_YEAR = "DAY_MONTH_YEAR"
31
+ }
32
+ declare const fieldsToAddEventGroup: Record<NgxTimelineEventGroup, string[]>;
33
+ declare const periodKeyDateFormat: Record<NgxTimelineEventGroup, NgxDateFormat>;
34
+ /**
35
+ * Enum used to set the group event logic.
36
+ */
37
+ declare enum NgxTimelineOrientation {
38
+ HORIZONTAL = "HORIZONTAL",
39
+ VERTICAL = "VERTICAL"
40
+ }
41
+ /**
42
+ * Enum used to set the change side event logic.
43
+ */
44
+ declare enum NgxTimelineEventChangeSide {
45
+ ALL = "ALL",
46
+ ALL_IN_GROUP = "ALL_IN_GROUP",
47
+ ON_DIFFERENT_DAY_IN_GROUP = "ON_DIFFERENT_DAY_IN_GROUP",
48
+ ON_DIFFERENT_HMS_IN_GROUP = "ON_DIFFERENT_HMS_IN_GROUP",
49
+ ON_DIFFERENT_MONTH_IN_GROUP = "ON_DIFFERENT_MONTH_IN_GROUP"
50
+ }
51
+ declare const fieldsToCheckEventChangeSideInGroup: Partial<Record<NgxTimelineEventChangeSide, string[]>>;
52
+
53
+ /**
54
+ * Event to be provided from outside the timeline.
55
+ */
56
+ interface NgxTimelineEvent {
57
+ timestamp: Date;
58
+ title?: string;
59
+ description?: string;
60
+ id?: unknown;
61
+ itemPosition?: NgxTimelineItemPosition;
62
+ }
63
+ interface NgxTimelinePeriodInfo {
64
+ periodKey?: string;
65
+ year?: number;
66
+ month?: number;
67
+ day?: number;
68
+ firstDate?: Date;
69
+ }
70
+ /**
71
+ * Item used inside the timeline.
72
+ */
73
+ interface NgxTimelineItem {
74
+ position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;
75
+ periodInfo?: NgxTimelinePeriodInfo;
76
+ eventInfo?: NgxTimelineEvent;
77
+ }
78
+ declare enum NgxTimelineItemPosition {
79
+ ON_LEFT = "ON_LEFT",
80
+ ON_RIGHT = "ON_RIGHT"
81
+ }
82
+
83
+ declare class NgxTimelineComponent implements OnChanges, DoCheck {
84
+ /**
85
+ * List of events to be displayed.
86
+ */
87
+ readonly events: _angular_core.InputSignal<NgxTimelineEvent[]>;
88
+ /**
89
+ * Language code used to show the date formatted.
90
+ */
91
+ readonly langCode: _angular_core.InputSignal<"en" | "it" | "fr" | "de" | "es" | "sl" | "tr" | "pl" | "pt" | "ru" | "no">;
92
+ /**
93
+ * Boolean used to enable or disable the animations.
94
+ */
95
+ readonly enableAnimation: _angular_core.InputSignal<boolean>;
96
+ /**
97
+ * Boolean used to reverse sort order (default older first).
98
+ */
99
+ readonly reverseOrder: _angular_core.InputSignal<boolean>;
100
+ /**
101
+ * Orientation of the timeline.
102
+ */
103
+ readonly orientation: _angular_core.InputSignal<NgxTimelineOrientation>;
104
+ /**
105
+ * Logic to be applied in order to group events.
106
+ */
107
+ readonly groupEvent: _angular_core.InputSignal<NgxTimelineEventGroup>;
108
+ /**
109
+ * Logic to be applied in order to put events on LEFT or RIGHT.
110
+ */
111
+ readonly changeSide: _angular_core.InputSignal<NgxTimelineEventChangeSide>;
112
+ /**
113
+ * Custom Template displayed before a group of events.
114
+ */
115
+ readonly periodCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
116
+ /**
117
+ * Custom Template displayed to show a single event.
118
+ */
119
+ readonly eventCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
120
+ /**
121
+ * Custom Template displayed to show a separator icon.
122
+ */
123
+ readonly centerIconCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
124
+ /**
125
+ * Custom Template displayed to show the side date.
126
+ */
127
+ readonly dateInstantCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
128
+ /**
129
+ * Custom Template displayed to show the inner event.
130
+ */
131
+ readonly innerEventCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
132
+ /**
133
+ * Inner custom template used to display the event description.
134
+ */
135
+ readonly eventDescriptionCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
136
+ /**
137
+ * Enable virtual scrolling, for rendering performance. Useful when rendering thousands of items.
138
+ */
139
+ readonly virtualScroll: _angular_core.InputSignal<boolean>;
140
+ /**
141
+ * The size of the items in the list (in pixels).
142
+ */
143
+ readonly virtualScrollItemSize: _angular_core.InputSignal<number>;
144
+ /**
145
+ * The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.
146
+ */
147
+ readonly virtualScrollMaxBufferPx: _angular_core.InputSignal<number>;
148
+ /**
149
+ * The minimum amount of buffer rendered beyond the viewport (in pixels).
150
+ * If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
151
+ */
152
+ readonly virtualScrollMinBufferPx: _angular_core.InputSignal<number>;
153
+ /**
154
+ * Output click event emitter.
155
+ */
156
+ readonly clickEmitter: _angular_core.OutputEmitterRef<NgxTimelineItem>;
157
+ groups: Record<string, NgxTimelineEvent[]>;
158
+ periods: NgxTimelineItem[];
159
+ items: NgxTimelineItem[];
160
+ ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
161
+ ngxTimelineOrientation: typeof NgxTimelineOrientation;
162
+ ngxDateFormat: typeof NgxDateFormat;
163
+ private differs;
164
+ private iterableDiffer;
165
+ private readonly separator;
166
+ ngOnChanges(): void;
167
+ ngDoCheck(): void;
168
+ getPeriodKeyDateFormat(): string;
169
+ protected clear(): void;
170
+ protected groupEvents(events: NgxTimelineEvent[]): void;
171
+ protected sortEvents(events: NgxTimelineEvent[]): void;
172
+ protected setGroupsAndPeriods(events: NgxTimelineEvent[]): void;
173
+ protected setItems(): void;
174
+ protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean;
175
+ protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void;
176
+ /**
177
+ * Compare the events inside the same group
178
+ */
179
+ protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean;
180
+ protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean;
181
+ protected getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): NgxTimelinePeriodInfo;
182
+ private getPeriodInfo;
183
+ private shouldChangeEventsInPeriod;
184
+ protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string;
185
+ getOrientationForVirtualScroll(): Lowercase<NgxTimelineOrientation.HORIZONTAL | NgxTimelineOrientation.VERTICAL>;
186
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTimelineComponent, never>;
187
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxTimelineComponent, "ngx-timeline", never, { "events": { "alias": "events"; "required": true; "isSignal": true; }; "langCode": { "alias": "langCode"; "required": false; "isSignal": true; }; "enableAnimation": { "alias": "enableAnimation"; "required": false; "isSignal": true; }; "reverseOrder": { "alias": "reverseOrder"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "groupEvent": { "alias": "groupEvent"; "required": false; "isSignal": true; }; "changeSide": { "alias": "changeSide"; "required": false; "isSignal": true; }; "periodCustomTemplate": { "alias": "periodCustomTemplate"; "required": false; "isSignal": true; }; "eventCustomTemplate": { "alias": "eventCustomTemplate"; "required": false; "isSignal": true; }; "centerIconCustomTemplate": { "alias": "centerIconCustomTemplate"; "required": false; "isSignal": true; }; "dateInstantCustomTemplate": { "alias": "dateInstantCustomTemplate"; "required": false; "isSignal": true; }; "innerEventCustomTemplate": { "alias": "innerEventCustomTemplate"; "required": false; "isSignal": true; }; "eventDescriptionCustomTemplate": { "alias": "eventDescriptionCustomTemplate"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "virtualScrollMaxBufferPx": { "alias": "virtualScrollMaxBufferPx"; "required": false; "isSignal": true; }; "virtualScrollMinBufferPx": { "alias": "virtualScrollMinBufferPx"; "required": false; "isSignal": true; }; }, { "clickEmitter": "clickEmitter"; }, never, never, true, never>;
188
+ }
189
+
190
+ declare class NgxTimelineEventComponent {
191
+ /**
192
+ * Event to be displayed.
193
+ */
194
+ readonly event: _angular_core.InputSignal<NgxTimelineItem>;
195
+ /**
196
+ * Event position respect to the vertical line (LEFT or RIGHT).
197
+ */
198
+ readonly colSidePosition: _angular_core.InputSignal<NgxTimelineItemPosition | undefined>;
199
+ /**
200
+ * Language code used to format the dates.
201
+ */
202
+ readonly langCode: _angular_core.InputSignal<"en" | "it" | "fr" | "de" | "es" | "sl" | "tr" | "pl" | "pt" | "ru" | "no">;
203
+ /**
204
+ * Inner custom template used to display the event detail.
205
+ */
206
+ readonly innerEventCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
207
+ /**
208
+ * Inner custom template used to display the event description.
209
+ */
210
+ readonly eventDescriptionCustomTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
211
+ /**
212
+ * Boolean used to enable or disable the animations.
213
+ */
214
+ readonly enableAnimation: _angular_core.InputSignal<boolean>;
215
+ /**
216
+ * Orientation of the timeline.
217
+ */
218
+ readonly orientation: _angular_core.InputSignal<NgxTimelineOrientation>;
219
+ /**
220
+ * Output click event emitter.
221
+ */
222
+ readonly clickEmitter: _angular_core.OutputEmitterRef<NgxTimelineItem>;
223
+ ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
224
+ ngxTimelineOrientation: typeof NgxTimelineOrientation;
225
+ private readonly monthAbbr;
226
+ private readonly dayFormat;
227
+ getDateObj(): {
228
+ day: unknown;
229
+ month: unknown;
230
+ year: unknown;
231
+ };
232
+ protected getLangCode(): SupportedLanguageCode;
233
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTimelineEventComponent, never>;
234
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxTimelineEventComponent, "ngx-timeline-event", never, { "event": { "alias": "event"; "required": true; "isSignal": true; }; "colSidePosition": { "alias": "colSidePosition"; "required": false; "isSignal": true; }; "langCode": { "alias": "langCode"; "required": false; "isSignal": true; }; "innerEventCustomTemplate": { "alias": "innerEventCustomTemplate"; "required": false; "isSignal": true; }; "eventDescriptionCustomTemplate": { "alias": "eventDescriptionCustomTemplate"; "required": false; "isSignal": true; }; "enableAnimation": { "alias": "enableAnimation"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "clickEmitter": "clickEmitter"; }, never, never, true, never>;
235
+ }
236
+
237
+ declare class NgxDatePipe implements PipeTransform {
238
+ transform(date: Date | string, dateFormat?: NgxDateFormat | string, langCode?: SupportedLanguageCode): string | null;
239
+ private dateFormat;
240
+ private getDateConfig;
241
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDatePipe, never>;
242
+ static ɵpipe: _angular_core.ɵɵPipeDeclaration<NgxDatePipe, "ngxdate", true>;
243
+ }
244
+
245
+ declare class NgxTimelineModule {
246
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTimelineModule, never>;
247
+ static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgxTimelineModule, never, [typeof NgxDatePipe, typeof NgxTimelineComponent, typeof NgxTimelineEventComponent], [typeof NgxDatePipe, typeof NgxTimelineComponent]>;
248
+ static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxTimelineModule>;
249
+ }
250
+
251
+ export { NgxDateFormat, NgxDatePipe, NgxTimelineComponent, NgxTimelineEventChangeSide, NgxTimelineEventComponent, NgxTimelineEventGroup, NgxTimelineItemPosition, NgxTimelineModule, NgxTimelineOrientation, dateConfigMap, defaultSupportedLanguageCode, fieldConfigDate, fieldsToAddEventGroup, fieldsToCheckEventChangeSideInGroup, periodKeyDateFormat, supportedLanguageCodes };
252
+ export type { NgxConfigDate, NgxTimelineEvent, NgxTimelineItem, NgxTimelinePeriodInfo, SupportedLanguageCode };
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@frxjs/ngx-timeline",
3
- "version": "19.0.2",
3
+ "version": "20.0.2",
4
+ "type": "module",
4
5
  "keywords": [
5
6
  "angular",
6
7
  "timeline"
@@ -14,10 +15,9 @@
14
15
  },
15
16
  "license": "MIT",
16
17
  "peerDependencies": {
17
- "@angular/common": "^19.0.0",
18
- "@angular/compiler": "^19.0.0",
19
- "@angular/core": "^19.0.0",
20
- "@angular/cdk": "^19.0.0"
18
+ "@angular/common": "^20.0.2",
19
+ "@angular/core": "^20.0.2",
20
+ "@angular/cdk": "^20.0.2"
21
21
  },
22
22
  "dependencies": {
23
23
  "tslib": "^2.3.0"
package/lib/components/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './ngx-timeline.component';
2
- export * from './ngx-timeline-event/ngx-timeline-event.component';
package/lib/components/ngx-timeline-event/ngx-timeline-event.component.d.ts DELETED
@@ -1,50 +0,0 @@
1
- import { TemplateRef } from '@angular/core';
2
- import { NgxTimelineOrientation, SupportedLanguageCode } from '../../models';
3
- import { NgxTimelineItem, NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';
4
- import * as i0 from "@angular/core";
5
- export declare class NgxTimelineEventComponent {
6
- /**
7
- * Event to be displayed.
8
- */
9
- readonly event: import("@angular/core").InputSignal<NgxTimelineItem>;
10
- /**
11
- * Event position respect to the vertical line (LEFT or RIGHT).
12
- */
13
- readonly colSidePosition: import("@angular/core").InputSignal<NgxTimelineItemPosition | undefined>;
14
- /**
15
- * Language code used to format the dates.
16
- */
17
- readonly langCode: import("@angular/core").InputSignal<"en" | "it" | "fr" | "de" | "es" | "sl" | "tr" | "pl" | "pt" | "ru">;
18
- /**
19
- * Inner custom template used to display the event detail.
20
- */
21
- readonly innerEventCustomTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
22
- /**
23
- * Inner custom template used to display the event description.
24
- */
25
- readonly eventDescriptionCustomTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
26
- /**
27
- * Boolean used to enable or disable the animations.
28
- */
29
- readonly enableAnimation: import("@angular/core").InputSignal<boolean>;
30
- /**
31
- * Orientation of the timeline.
32
- */
33
- readonly orientation: import("@angular/core").InputSignal<NgxTimelineOrientation>;
34
- /**
35
- * Output click event emitter.
36
- */
37
- readonly clickEmitter: import("@angular/core").OutputEmitterRef<NgxTimelineItem>;
38
- ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
39
- ngxTimelineOrientation: typeof NgxTimelineOrientation;
40
- private readonly monthAbbr;
41
- private readonly dayFormat;
42
- getDateObj(): {
43
- day: unknown;
44
- month: unknown;
45
- year: unknown;
46
- };
47
- protected getLangCode(): SupportedLanguageCode;
48
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxTimelineEventComponent, never>;
49
- static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimelineEventComponent, "ngx-timeline-event", never, { "event": { "alias": "event"; "required": true; "isSignal": true; }; "colSidePosition": { "alias": "colSidePosition"; "required": false; "isSignal": true; }; "langCode": { "alias": "langCode"; "required": false; "isSignal": true; }; "innerEventCustomTemplate": { "alias": "innerEventCustomTemplate"; "required": false; "isSignal": true; }; "eventDescriptionCustomTemplate": { "alias": "eventDescriptionCustomTemplate"; "required": false; "isSignal": true; }; "enableAnimation": { "alias": "enableAnimation"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "clickEmitter": "clickEmitter"; }, never, never, true, never>;
50
- }
package/lib/components/ngx-timeline.component.d.ts DELETED
@@ -1,109 +0,0 @@
1
- import { DoCheck, OnChanges, TemplateRef } from '@angular/core';
2
- import { NgxTimelineEvent, NgxTimelineItem, NgxTimelineItemPosition, NgxTimelineOrientation, NgxTimelinePeriodInfo, NgxDateFormat, NgxTimelineEventGroup, NgxTimelineEventChangeSide } from '../models';
3
- import * as i0 from "@angular/core";
4
- export declare class NgxTimelineComponent implements OnChanges, DoCheck {
5
- /**
6
- * List of events to be displayed.
7
- */
8
- readonly events: import("@angular/core").InputSignal<NgxTimelineEvent[]>;
9
- /**
10
- * Language code used to show the date formatted.
11
- */
12
- readonly langCode: import("@angular/core").InputSignal<"en" | "it" | "fr" | "de" | "es" | "sl" | "tr" | "pl" | "pt" | "ru">;
13
- /**
14
- * Boolean used to enable or disable the animations.
15
- */
16
- readonly enableAnimation: import("@angular/core").InputSignal<boolean>;
17
- /**
18
- * Boolean used to reverse sort order (default older first).
19
- */
20
- readonly reverseOrder: import("@angular/core").InputSignal<boolean>;
21
- /**
22
- * Orientation of the timeline.
23
- */
24
- readonly orientation: import("@angular/core").InputSignal<NgxTimelineOrientation>;
25
- /**
26
- * Logic to be applied in order to group events.
27
- */
28
- readonly groupEvent: import("@angular/core").InputSignal<NgxTimelineEventGroup>;
29
- /**
30
- * Logic to be applied in order to put events on LEFT or RIGHT.
31
- */
32
- readonly changeSide: import("@angular/core").InputSignal<NgxTimelineEventChangeSide>;
33
- /**
34
- * Custom Template displayed before a group of events.
35
- */
36
- readonly periodCustomTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
37
- /**
38
- * Custom Template displayed to show a single event.
39
- */
40
- readonly eventCustomTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
41
- /**
42
- * Custom Template displayed to show a separator icon.
43
- */
44
- readonly centerIconCustomTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
45
- /**
46
- * Custom Template displayed to show the side date.
47
- */
48
- readonly dateInstantCustomTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
49
- /**
50
- * Custom Template displayed to show the inner event.
51
- */
52
- readonly innerEventCustomTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
53
- /**
54
- * Inner custom template used to display the event description.
55
- */
56
- readonly eventDescriptionCustomTemplate: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
57
- /**
58
- * Enable virtual scrolling, for rendering performance. Useful when rendering thousands of items.
59
- */
60
- readonly virtualScroll: import("@angular/core").InputSignal<boolean>;
61
- /**
62
- * The size of the items in the list (in pixels).
63
- */
64
- readonly virtualScrollItemSize: import("@angular/core").InputSignal<number>;
65
- /**
66
- * The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.
67
- */
68
- readonly virtualScrollMaxBufferPx: import("@angular/core").InputSignal<number>;
69
- /**
70
- * The minimum amount of buffer rendered beyond the viewport (in pixels).
71
- * If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
72
- */
73
- readonly virtualScrollMinBufferPx: import("@angular/core").InputSignal<number>;
74
- /**
75
- * Output click event emitter.
76
- */
77
- readonly clickEmitter: import("@angular/core").OutputEmitterRef<NgxTimelineItem>;
78
- groups: Record<string, NgxTimelineEvent[]>;
79
- periods: NgxTimelineItem[];
80
- items: NgxTimelineItem[];
81
- ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
82
- ngxTimelineOrientation: typeof NgxTimelineOrientation;
83
- ngxDateFormat: typeof NgxDateFormat;
84
- private differs;
85
- private iterableDiffer;
86
- private readonly separator;
87
- ngOnChanges(): void;
88
- ngDoCheck(): void;
89
- getPeriodKeyDateFormat(): string;
90
- protected clear(): void;
91
- protected groupEvents(events: NgxTimelineEvent[]): void;
92
- protected sortEvents(events: NgxTimelineEvent[]): void;
93
- protected setGroupsAndPeriods(events: NgxTimelineEvent[]): void;
94
- protected setItems(): void;
95
- protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean;
96
- protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void;
97
- /**
98
- * Compare the events inside the same group
99
- */
100
- protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean;
101
- protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean;
102
- protected getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): NgxTimelinePeriodInfo;
103
- private getPeriodInfo;
104
- private shouldChangeEventsInPeriod;
105
- protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string;
106
- protected getOrientationForVirtualScroll(): Lowercase<NgxTimelineOrientation.HORIZONTAL | NgxTimelineOrientation.VERTICAL>;
107
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxTimelineComponent, never>;
108
- static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimelineComponent, "ngx-timeline", never, { "events": { "alias": "events"; "required": true; "isSignal": true; }; "langCode": { "alias": "langCode"; "required": false; "isSignal": true; }; "enableAnimation": { "alias": "enableAnimation"; "required": false; "isSignal": true; }; "reverseOrder": { "alias": "reverseOrder"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "groupEvent": { "alias": "groupEvent"; "required": false; "isSignal": true; }; "changeSide": { "alias": "changeSide"; "required": false; "isSignal": true; }; "periodCustomTemplate": { "alias": "periodCustomTemplate"; "required": false; "isSignal": true; }; "eventCustomTemplate": { "alias": "eventCustomTemplate"; "required": false; "isSignal": true; }; "centerIconCustomTemplate": { "alias": "centerIconCustomTemplate"; "required": false; "isSignal": true; }; "dateInstantCustomTemplate": { "alias": "dateInstantCustomTemplate"; "required": false; "isSignal": true; }; "innerEventCustomTemplate": { "alias": "innerEventCustomTemplate"; "required": false; "isSignal": true; }; "eventDescriptionCustomTemplate": { "alias": "eventDescriptionCustomTemplate"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "virtualScrollMaxBufferPx": { "alias": "virtualScrollMaxBufferPx"; "required": false; "isSignal": true; }; "virtualScrollMinBufferPx": { "alias": "virtualScrollMinBufferPx"; "required": false; "isSignal": true; }; }, { "clickEmitter": "clickEmitter"; }, never, never, true, never>;
109
- }
package/lib/models/NgxConfigObj.d.ts DELETED
@@ -1,48 +0,0 @@
1
- export declare const supportedLanguageCodes: readonly ["en", "it", "fr", "de", "es", "sl", "tr", "pl", "pt", "ru"];
2
- export type SupportedLanguageCode = typeof supportedLanguageCodes[number];
3
- export declare const defaultSupportedLanguageCode: SupportedLanguageCode;
4
- export interface NgxConfigDate {
5
- code: string;
6
- dayMonthYear: string;
7
- fullDate: string;
8
- hoursMinutes: string;
9
- monthYear: string;
10
- year: string;
11
- }
12
- export declare const dateConfigMap: Record<SupportedLanguageCode, NgxConfigDate>;
13
- export declare enum NgxDateFormat {
14
- DAY_MONTH_YEAR = "DAY_MONTH_YEAR",
15
- FULL_DATE = "FULL_DATE",
16
- HOURS_MINUTES = "HOURS_MINUTES",
17
- MONTH_YEAR = "MONTH_YEAR",
18
- YEAR = "YEAR"
19
- }
20
- export declare const fieldConfigDate: Record<NgxDateFormat, keyof NgxConfigDate>;
21
- /**
22
- * Enum used to set the group event logic
23
- */
24
- export declare enum NgxTimelineEventGroup {
25
- YEAR = "YEAR",
26
- MONTH_YEAR = "MONTH_YEAR",
27
- DAY_MONTH_YEAR = "DAY_MONTH_YEAR"
28
- }
29
- export declare const fieldsToAddEventGroup: Record<NgxTimelineEventGroup, string[]>;
30
- export declare const periodKeyDateFormat: Record<NgxTimelineEventGroup, NgxDateFormat>;
31
- /**
32
- * Enum used to set the group event logic.
33
- */
34
- export declare enum NgxTimelineOrientation {
35
- HORIZONTAL = "HORIZONTAL",
36
- VERTICAL = "VERTICAL"
37
- }
38
- /**
39
- * Enum used to set the change side event logic.
40
- */
41
- export declare enum NgxTimelineEventChangeSide {
42
- ALL = "ALL",
43
- ALL_IN_GROUP = "ALL_IN_GROUP",
44
- ON_DIFFERENT_DAY_IN_GROUP = "ON_DIFFERENT_DAY_IN_GROUP",
45
- ON_DIFFERENT_HMS_IN_GROUP = "ON_DIFFERENT_HMS_IN_GROUP",
46
- ON_DIFFERENT_MONTH_IN_GROUP = "ON_DIFFERENT_MONTH_IN_GROUP"
47
- }
48
- export declare const fieldsToCheckEventChangeSideInGroup: Partial<Record<NgxTimelineEventChangeSide, string[]>>;
package/lib/models/NgxTimelineEvent.d.ts DELETED
@@ -1,29 +0,0 @@
1
- /**
2
- * Event to be provided from outside the timeline.
3
- */
4
- export interface NgxTimelineEvent {
5
- timestamp: Date;
6
- title?: string;
7
- description?: string;
8
- id?: unknown;
9
- itemPosition?: NgxTimelineItemPosition;
10
- }
11
- export interface NgxTimelinePeriodInfo {
12
- periodKey?: string;
13
- year?: number;
14
- month?: number;
15
- day?: number;
16
- firstDate?: Date;
17
- }
18
- /**
19
- * Item used inside the timeline.
20
- */
21
- export interface NgxTimelineItem {
22
- position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;
23
- periodInfo?: NgxTimelinePeriodInfo;
24
- eventInfo?: NgxTimelineEvent;
25
- }
26
- export declare enum NgxTimelineItemPosition {
27
- ON_LEFT = "ON_LEFT",
28
- ON_RIGHT = "ON_RIGHT"
29
- }
package/lib/models/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './NgxConfigObj';
2
- export * from './NgxTimelineEvent';
package/lib/ngx-timeline.module.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./pipes/ngx-date-pipe";
3
- import * as i2 from "./components/ngx-timeline.component";
4
- import * as i3 from "./components/ngx-timeline-event/ngx-timeline-event.component";
5
- export declare class NgxTimelineModule {
6
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxTimelineModule, never>;
7
- static ɵmod: i0.ɵɵNgModuleDeclaration<NgxTimelineModule, never, [typeof i1.NgxDatePipe, typeof i2.NgxTimelineComponent, typeof i3.NgxTimelineEventComponent], [typeof i1.NgxDatePipe, typeof i2.NgxTimelineComponent]>;
8
- static ɵinj: i0.ɵɵInjectorDeclaration<NgxTimelineModule>;
9
- }
package/lib/pipes/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './ngx-date-pipe';
package/lib/pipes/ngx-date-pipe.d.ts DELETED
@@ -1,10 +0,0 @@
1
- import { PipeTransform } from '@angular/core';
2
- import { NgxDateFormat, SupportedLanguageCode } from '../models';
3
- import * as i0 from "@angular/core";
4
- export declare class NgxDatePipe implements PipeTransform {
5
- transform(date: Date | string, dateFormat?: NgxDateFormat | string, langCode?: SupportedLanguageCode): string | null;
6
- private dateFormat;
7
- private getDateConfig;
8
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxDatePipe, never>;
9
- static ɵpipe: i0.ɵɵPipeDeclaration<NgxDatePipe, "ngxdate", true>;
10
- }
package/public-api.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export * from './lib/components';
2
- export * from './lib/models';
3
- export * from './lib/pipes/';
4
- export * from './lib/ngx-timeline.module';
package/style.scss DELETED
@@ -1,10 +0,0 @@
1
- ::ng-deep :root {
2
- --ngx-timeline-period-inner-container: orange;
3
- --ngx-timeline-icon: orange;
4
- --ngx-timeline-line-background: #464646;
5
- --ngx-timeline-flex-display-col: 49 49 0;
6
- --ngx-timeline-flex-display-col-center: 2 2 0;
7
- --ngx-timeline-event-background: white;
8
- --ngx-timeline-event-divider-background: #e9e9e9;
9
- --ngx-timeline-event-text-color: black;
10
- }