@frxjs/ngx-timeline 17.0.8 → 17.0.9

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 (5) hide show
  1. package/README.md +1 -1
  2. package/esm2022/lib/components/ngx-timeline.component.mjs +2 -2
  3. package/fesm2022/frxjs-ngx-timeline.mjs +2 -2
  4. package/fesm2022/frxjs-ngx-timeline.mjs.map +1 -1
  5. package/package.json +1 -1
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 17.0.8 is compatible with angular 17.
5
+ Version 17.0.9 is compatible with angular 17.
6
6
  <br>
7
7
  Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline
8
8
 
package/esm2022/lib/components/ngx-timeline.component.mjs CHANGED
@@ -156,11 +156,11 @@ export class NgxTimelineComponent {
156
156
  return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);
157
157
  }
158
158
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
159
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row;min-width:250px}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: i3.NgxDatePipe, name: "ngxdate" }] }); }
159
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row;min-width:250px}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: i3.NgxDatePipe, name: "ngxdate" }] }); }
160
160
  }
161
161
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineComponent, decorators: [{
162
162
  type: Component,
163
- args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row;min-width:250px}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
163
+ args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row;min-width:250px}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
164
164
  }], propDecorators: { events: [{
165
165
  type: Input
166
166
  }], langCode: [{
package/fesm2022/frxjs-ngx-timeline.mjs CHANGED
@@ -399,11 +399,11 @@ class NgxTimelineComponent {
399
399
  return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);
400
400
  }
401
401
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
402
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row;min-width:250px}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }] }); }
402
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row;min-width:250px}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }] }); }
403
403
  }
404
404
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineComponent, decorators: [{
405
405
  type: Component,
406
- args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row;min-width:250px}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
406
+ args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row;min-width:250px}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
407
407
  }], propDecorators: { events: [{
408
408
  type: Input
409
409
  }], langCode: [{
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/components/ngx-timeline-event/ngx-timeline-event.component.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.html","../../../projects/ngx-timeline/src/lib/pipes/ngx-date-pipe.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline.component.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline.component.html","../../../projects/ngx-timeline/src/lib/ngx-timeline.module.ts","../../../projects/ngx-timeline/src/public-api.ts","../../../projects/ngx-timeline/src/frxjs-ngx-timeline.ts"],"sourcesContent":["export const supportedLanguageCodes = ['en', 'it', 'fr', 'de', 'es', 'sl', 'tr', 'pl', 'pt', 'ru'];\n\nexport interface NgxConfigDate {\n code: string;\n dayMonthYear: string;\n fullDate: string;\n hoursMinutes: string;\n monthYear: string;\n year: string;\n}\n\nexport interface NgxDateObjMap {\n [key: string]: NgxConfigDate;\n}\n\nexport const dateConfigMap: NgxDateObjMap = {\n en: {\n code: 'en-US',\n fullDate: 'MM/dd/yyyy h:mm a',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'hh:mm a',\n },\n it: {\n code: 'it-IT',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n fr: {\n code: 'fr-FR',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n de: {\n code: 'de',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n es: {\n code: 'es',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n sl: {\n code: 'sl-SL',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n tr: {\n code: 'tr',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n pl: {\n code: 'pl',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n pt: {\n code: 'pt',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n ru: {\n code: 'ru-RU',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n }\n};\n\nexport enum NgxDateFormat {\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n FULL_DATE = 'FULL_DATE',\n MONTH_YEAR = 'MONTH_YEAR',\n HOURS_MINUTES = 'HOURS_MINUTES',\n YEAR = 'YEAR'\n}\n\nexport const fieldConfigDate = {\n MONTH_YEAR: 'monthYear',\n YEAR: 'year',\n HOURS_MINUTES: 'hoursMinutes',\n FULL_DATE: 'fullDate',\n DAY_MONTH_YEAR: 'dayMonthYear',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n YEAR = 'YEAR',\n MONTH_YEAR = 'MONTH_YEAR',\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'\n}\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineOrientation {\n HORIZONTAL = 'HORIZONTAL',\n VERTICAL = 'VERTICAL',\n}\n\nexport const fieldsToAddEventGroup = {\n YEAR: ['getFullYear'],\n MONTH_YEAR: ['getFullYear', 'getMonth'],\n DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat = {\n YEAR: NgxDateFormat.YEAR,\n MONTH_YEAR: NgxDateFormat.MONTH_YEAR,\n DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,\n};\n\n/**\n * Enum used to set the change side event logic\n */\nexport enum NgxTimelineEventChangeSide {\n ALL = 'ALL',\n ALL_IN_GROUP = 'ALL_IN_GROUP',\n ON_DIFFERENT_DAY_IN_GROUP = 'ON_DIFFERENT_DAY_IN_GROUP',\n ON_DIFFERENT_HMS_IN_GROUP = 'ON_DIFFERENT_HMS_IN_GROUP',\n ON_DIFFERENT_MONTH_IN_GROUP = 'ON_DIFFERENT_MONTH_IN_GROUP'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n ON_DIFFERENT_DAY_IN_GROUP: ['getFullYear', 'getMonth', 'getDate'],\n ON_DIFFERENT_MONTH_IN_GROUP: ['getFullYear', 'getMonth'],\n ON_DIFFERENT_HMS_IN_GROUP: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],\n};\n","/**\n * Event to be provided from outside the timeline\n */\nexport interface NgxTimelineEvent {\n timestamp?: Date;\n title?: string;\n description?: string;\n id?: any;\n itemPosition?: NgxTimelineItemPosition;\n}\n\nexport interface NgxTimelinePeriodInfo {\n periodKey?: string;\n year?: number;\n month?: number;\n day?: number;\n firstDate?: any;\n}\n\n/**\n * Item used inside the timeline\n */\nexport interface NgxTimelineItem {\n type?: string;\n position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;\n periodInfo?: NgxTimelinePeriodInfo;\n eventInfo?: NgxTimelineEvent;\n}\n\nexport enum NgxTimelineItemPosition {\n ON_LEFT = 'ON_LEFT',\n ON_RIGHT = 'ON_RIGHT'\n}\n","import {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\nimport {DatePipe} from '@angular/common';\nimport {BehaviorSubject} from 'rxjs';\nimport {NgxTimelineOrientation, supportedLanguageCodes} from '../../models';\n\n@Component({\n selector: 'ngx-timeline-event',\n templateUrl: './ngx-timeline-event.component.html',\n styleUrls: ['./ngx-timeline-event.component.scss'],\n})\nexport class NgxTimelineEventComponent {\n /**\n * Event to be displayed\n */\n @Input() event: NgxTimelineItem;\n /**\n * Event position respect to the vertical line (LEFT or RIGHT)\n */\n @Input() colSidePosition: NgxTimelineItemPosition;\n /**\n * Language code used to format the dates\n */\n @Input() langCode?: string;\n /**\n * Inner custom template used to display the event detail\n */\n @Input() innerEventCustomTemplate?: TemplateRef<any>;\n /**\n * Inner custom template used to display the event description\n */\n @Input() eventDescriptionCustomTemplate?: TemplateRef<any>;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Orientation of the timeline\n */\n @Input() orientation: NgxTimelineOrientation = NgxTimelineOrientation.VERTICAL;\n /**\n * Output click event emitter\n */\n @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n ngxTimelineOrientation = NgxTimelineOrientation;\n\n private readonly monthAbbr = 'MMM';\n private readonly dayFormat = 'dd';\n\n constructor() { }\n\n getDateObj(): any {\n let day;\n let month;\n let year;\n const dateTimestamp = this.event?.eventInfo?.timestamp;\n if (dateTimestamp) {\n const timestamp = new Date(dateTimestamp);\n const langCode = this.getLangCode();\n month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);\n day = new DatePipe(langCode).transform(timestamp, this.dayFormat);\n year = timestamp.getFullYear();\n }\n\n return {day, month, year};\n }\n\n protected getLangCode(): string {\n return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];\n }\n}\n","<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <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 <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\nimport {NgxConfigDate, supportedLanguageCodes, fieldConfigDate, dateConfigMap} from '../models';\n\n@Pipe({name: 'ngxdate', pure: false})\nexport class NgxDatePipe implements PipeTransform {\n constructor() {\n }\n\n transform(date: Date | string, dateFormat?: string, langCode?: string): string {\n let transformedDate = null;\n if (date) {\n const objDate = this.getDateConfig(langCode);\n transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));\n }\n return transformedDate;\n }\n\n private dateFormat(dateFormat: string, configDate: NgxConfigDate): string {\n return configDate[fieldConfigDate[dateFormat]];\n }\n\n private getDateConfig(langCode: string): NgxConfigDate {\n const code = langCode || supportedLanguageCodes[0];\n const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];\n return configDate;\n }\n}\n","import {Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output, IterableDiffers, IterableDiffer, DoCheck, inject} from '@angular/core';\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} from '../models';\nimport {BehaviorSubject} from 'rxjs';\n\n@Component({\n selector: 'ngx-timeline',\n templateUrl: './ngx-timeline.component.html',\n styleUrls: ['./ngx-timeline.component.scss'],\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges, DoCheck {\n /**\n * List of events to be displayed\n */\n @Input() events: NgxTimelineEvent[];\n /**\n * Language code used to show the date formatted\n */\n @Input() langCode?: string;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Boolean used to reverse sort order (default older first)\n */\n @Input() reverseOrder = false;\n /**\n * Orientation of the timeline\n */\n @Input() orientation: NgxTimelineOrientation = NgxTimelineOrientation.VERTICAL;\n /**\n * Logic to be applied in order to group events\n */\n @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;\n /**\n * Logic to be applied in order to put events on LEFT or RIGHT\n */\n @Input() changeSide?: NgxTimelineEventChangeSide = NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP;\n /**\n * Custom Template displayed before a group of events\n */\n @Input() periodCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show a single event\n */\n @Input() eventCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show an separator icon\n */\n @Input() centerIconCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the side date\n */\n @Input() dateInstantCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the inner event\n */\n @Input() innerEventCustomTemplate: TemplateRef<any>;\n /**\n * Inner custom template used to display the event description\n */\n @Input() eventDescriptionCustomTemplate?: TemplateRef<any>;\n /**\n * Output click event emitter\n */\n @Output()\n clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n groups: { [key: string]: NgxTimelineEvent[] } = {};\n periods: NgxTimelineItem[] = [];\n items: NgxTimelineItem[] = [];\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n ngxTimelineOrientation = NgxTimelineOrientation;\n ngxDateFormat = NgxDateFormat;\n\n private differs: IterableDiffers = inject(IterableDiffers);\n private iterableDiffer: IterableDiffer<any> = this.differs.find([]).create();\n private readonly separator = '/';\n\n ngOnInit(): void {\n this.groupEvents(this.events);\n }\n\n ngOnChanges() {\n this.groupEvents(this.events);\n }\n\n ngDoCheck() {\n const changes = this.iterableDiffer.diff(this.events);\n if (changes) {\n this.groupEvents(this.events);\n }\n }\n\n getPeriodKeyDateFormat(): string {\n return periodKeyDateFormat[this.groupEvent];\n }\n\n protected clear(): void {\n this.groups = {};\n this.periods = [];\n this.items = [];\n }\n\n protected groupEvents(events: NgxTimelineEvent[]): void {\n if (events) {\n this.clear();\n this.sortEvents(events);\n this.setGroupsAndPeriods(events);\n this.setItems();\n }\n }\n\n protected sortEvents(events: NgxTimelineEvent[]): void {\n events.sort((a, b) => {\n const aTime = a.timestamp.getTime();\n const bTime = b.timestamp.getTime();\n return this.reverseOrder ? bTime - aTime : aTime - bTime;});\n }\n\n protected setGroupsAndPeriods(events: NgxTimelineEvent[]): void {\n this.periods = [];\n events.forEach((event) => {\n // conversion from string to actual Date\n event.timestamp = new Date(event.timestamp);\n const periodKey = this.getPeriodKeyFromEvent(event);\n if (!this.groups[periodKey]) {\n this.groups[periodKey] = [];\n this.periods.push(this.getPeriodInfoFromPeriodKey(periodKey, event))\n }\n this.groups[periodKey].push(event);\n });\n }\n\n protected setItems(): void {\n let isLastItemOnLeft = false;\n this.periods.forEach((p) => {\n // insert first the period\n this.items.push(p);\n // in each period putting items on left\n let onLeft = true;\n if (this.changeSide === NgxTimelineEventChangeSide.ALL) {\n onLeft = !isLastItemOnLeft;\n }\n const periodInfo = p.periodInfo;\n // insert then all the events in this period\n isLastItemOnLeft = this.addPeriodEvents(periodInfo, onLeft);\n // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n });\n }\n\n protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean {\n this.groups[periodInfo.periodKey].forEach((event, index) => {\n const prevEvent = this.groups[periodInfo.periodKey][index - 1];\n if (event.itemPosition) {\n onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;\n } else if (index > 0 && this.compareEvents(prevEvent, event)) {\n onLeft = !onLeft;\n }\n this.pushEventOnItems(event, onLeft);\n });\n return onLeft;\n }\n\n protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {\n this.items.push({\n eventInfo: {...event}, position: onLeft ?\n this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,\n });\n }\n\n /**\n * Compare the events inside the same group\n */\n protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {\n return this.shouldChangeEventsInPeriod() ||\n this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSide[this.changeSide]);\n }\n\n protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {\n return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);\n }\n\n protected getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): { periodInfo: NgxTimelinePeriodInfo } {\n const split = periodKey.split(this.separator);\n return this.getPeriodInfo(split, periodKey, firstGroupEvent);\n }\n\n private getPeriodInfo(split: string[], periodKey: string, firstGroupEvent: NgxTimelineEvent): { periodInfo: NgxTimelinePeriodInfo } {\n return {\n periodInfo: {\n year: Number(split[0]),\n month: Number(split[1]),\n day: Number(split[2]),\n periodKey,\n firstDate: firstGroupEvent.timestamp as Date,\n },\n };\n }\n\n private shouldChangeEventsInPeriod() {\n return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].indexOf(this.changeSide) != -1;\n }\n\n protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);\n }\n}\n","<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import {NgModule} from '@angular/core';\nimport {NgxTimelineComponent} from './components';\nimport {NgxTimelineEventComponent}\n from './components';\nimport {CommonModule, registerLocaleData} from '@angular/common';\nimport {NgxDatePipe} from './pipes';\nimport localeIt from '@angular/common/locales/it';\nimport localeFr from '@angular/common/locales/fr';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\nimport localeSl from '@angular/common/locales/sl';\nimport localeTr from '@angular/common/locales/tr';\nimport localePl from '@angular/common/locales/pl';\nimport localePt from '@angular/common/locales/pt';\nimport localeRu from '@angular/common/locales/ru';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePl);\nregisterLocaleData(localePt);\nregisterLocaleData(localeRu);\n\n@NgModule({\n declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\n imports: [CommonModule],\n exports: [NgxTimelineComponent, NgxDatePipe],\n})\nexport class NgxTimelineModule { }\n","/*\n * Public API Surface of ngx-timeline\n */\nexport * from './lib/components';\nexport * from './lib/models';\nexport * from './lib/pipes/';\nexport * from './lib/ngx-timeline.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["fieldsToCheckEventChangeSide","i2.NgxTimelineEventComponent","i3.NgxDatePipe"],"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/components/ngx-timeline-event/ngx-timeline-event.component.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.html","../../../projects/ngx-timeline/src/lib/pipes/ngx-date-pipe.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline.component.ts","../../../projects/ngx-timeline/src/lib/components/ngx-timeline.component.html","../../../projects/ngx-timeline/src/lib/ngx-timeline.module.ts","../../../projects/ngx-timeline/src/public-api.ts","../../../projects/ngx-timeline/src/frxjs-ngx-timeline.ts"],"sourcesContent":["export const supportedLanguageCodes = ['en', 'it', 'fr', 'de', 'es', 'sl', 'tr', 'pl', 'pt', 'ru'];\n\nexport interface NgxConfigDate {\n code: string;\n dayMonthYear: string;\n fullDate: string;\n hoursMinutes: string;\n monthYear: string;\n year: string;\n}\n\nexport interface NgxDateObjMap {\n [key: string]: NgxConfigDate;\n}\n\nexport const dateConfigMap: NgxDateObjMap = {\n en: {\n code: 'en-US',\n fullDate: 'MM/dd/yyyy h:mm a',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'hh:mm a',\n },\n it: {\n code: 'it-IT',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n fr: {\n code: 'fr-FR',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n de: {\n code: 'de',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n es: {\n code: 'es',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n sl: {\n code: 'sl-SL',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n tr: {\n code: 'tr',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n pl: {\n code: 'pl',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n pt: {\n code: 'pt',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n },\n ru: {\n code: 'ru-RU',\n fullDate: 'dd/MM/yyyy H:mm',\n dayMonthYear: 'dd MMMM yyyy',\n monthYear: 'MMMM yyyy',\n year: 'yyyy',\n hoursMinutes: 'HH:mm',\n }\n};\n\nexport enum NgxDateFormat {\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n FULL_DATE = 'FULL_DATE',\n MONTH_YEAR = 'MONTH_YEAR',\n HOURS_MINUTES = 'HOURS_MINUTES',\n YEAR = 'YEAR'\n}\n\nexport const fieldConfigDate = {\n MONTH_YEAR: 'monthYear',\n YEAR: 'year',\n HOURS_MINUTES: 'hoursMinutes',\n FULL_DATE: 'fullDate',\n DAY_MONTH_YEAR: 'dayMonthYear',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n YEAR = 'YEAR',\n MONTH_YEAR = 'MONTH_YEAR',\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'\n}\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineOrientation {\n HORIZONTAL = 'HORIZONTAL',\n VERTICAL = 'VERTICAL',\n}\n\nexport const fieldsToAddEventGroup = {\n YEAR: ['getFullYear'],\n MONTH_YEAR: ['getFullYear', 'getMonth'],\n DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat = {\n YEAR: NgxDateFormat.YEAR,\n MONTH_YEAR: NgxDateFormat.MONTH_YEAR,\n DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,\n};\n\n/**\n * Enum used to set the change side event logic\n */\nexport enum NgxTimelineEventChangeSide {\n ALL = 'ALL',\n ALL_IN_GROUP = 'ALL_IN_GROUP',\n ON_DIFFERENT_DAY_IN_GROUP = 'ON_DIFFERENT_DAY_IN_GROUP',\n ON_DIFFERENT_HMS_IN_GROUP = 'ON_DIFFERENT_HMS_IN_GROUP',\n ON_DIFFERENT_MONTH_IN_GROUP = 'ON_DIFFERENT_MONTH_IN_GROUP'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n ON_DIFFERENT_DAY_IN_GROUP: ['getFullYear', 'getMonth', 'getDate'],\n ON_DIFFERENT_MONTH_IN_GROUP: ['getFullYear', 'getMonth'],\n ON_DIFFERENT_HMS_IN_GROUP: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],\n};\n","/**\n * Event to be provided from outside the timeline\n */\nexport interface NgxTimelineEvent {\n timestamp?: Date;\n title?: string;\n description?: string;\n id?: any;\n itemPosition?: NgxTimelineItemPosition;\n}\n\nexport interface NgxTimelinePeriodInfo {\n periodKey?: string;\n year?: number;\n month?: number;\n day?: number;\n firstDate?: any;\n}\n\n/**\n * Item used inside the timeline\n */\nexport interface NgxTimelineItem {\n type?: string;\n position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;\n periodInfo?: NgxTimelinePeriodInfo;\n eventInfo?: NgxTimelineEvent;\n}\n\nexport enum NgxTimelineItemPosition {\n ON_LEFT = 'ON_LEFT',\n ON_RIGHT = 'ON_RIGHT'\n}\n","import {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\nimport {DatePipe} from '@angular/common';\nimport {BehaviorSubject} from 'rxjs';\nimport {NgxTimelineOrientation, supportedLanguageCodes} from '../../models';\n\n@Component({\n selector: 'ngx-timeline-event',\n templateUrl: './ngx-timeline-event.component.html',\n styleUrls: ['./ngx-timeline-event.component.scss'],\n})\nexport class NgxTimelineEventComponent {\n /**\n * Event to be displayed\n */\n @Input() event: NgxTimelineItem;\n /**\n * Event position respect to the vertical line (LEFT or RIGHT)\n */\n @Input() colSidePosition: NgxTimelineItemPosition;\n /**\n * Language code used to format the dates\n */\n @Input() langCode?: string;\n /**\n * Inner custom template used to display the event detail\n */\n @Input() innerEventCustomTemplate?: TemplateRef<any>;\n /**\n * Inner custom template used to display the event description\n */\n @Input() eventDescriptionCustomTemplate?: TemplateRef<any>;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Orientation of the timeline\n */\n @Input() orientation: NgxTimelineOrientation = NgxTimelineOrientation.VERTICAL;\n /**\n * Output click event emitter\n */\n @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n ngxTimelineOrientation = NgxTimelineOrientation;\n\n private readonly monthAbbr = 'MMM';\n private readonly dayFormat = 'dd';\n\n constructor() { }\n\n getDateObj(): any {\n let day;\n let month;\n let year;\n const dateTimestamp = this.event?.eventInfo?.timestamp;\n if (dateTimestamp) {\n const timestamp = new Date(dateTimestamp);\n const langCode = this.getLangCode();\n month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);\n day = new DatePipe(langCode).transform(timestamp, this.dayFormat);\n year = timestamp.getFullYear();\n }\n\n return {day, month, year};\n }\n\n protected getLangCode(): string {\n return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];\n }\n}\n","<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <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 <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\nimport {NgxConfigDate, supportedLanguageCodes, fieldConfigDate, dateConfigMap} from '../models';\n\n@Pipe({name: 'ngxdate', pure: false})\nexport class NgxDatePipe implements PipeTransform {\n constructor() {\n }\n\n transform(date: Date | string, dateFormat?: string, langCode?: string): string {\n let transformedDate = null;\n if (date) {\n const objDate = this.getDateConfig(langCode);\n transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));\n }\n return transformedDate;\n }\n\n private dateFormat(dateFormat: string, configDate: NgxConfigDate): string {\n return configDate[fieldConfigDate[dateFormat]];\n }\n\n private getDateConfig(langCode: string): NgxConfigDate {\n const code = langCode || supportedLanguageCodes[0];\n const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];\n return configDate;\n }\n}\n","import {Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output, IterableDiffers, IterableDiffer, DoCheck, inject} from '@angular/core';\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} from '../models';\nimport {BehaviorSubject} from 'rxjs';\n\n@Component({\n selector: 'ngx-timeline',\n templateUrl: './ngx-timeline.component.html',\n styleUrls: ['./ngx-timeline.component.scss'],\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges, DoCheck {\n /**\n * List of events to be displayed\n */\n @Input() events: NgxTimelineEvent[];\n /**\n * Language code used to show the date formatted\n */\n @Input() langCode?: string;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Boolean used to reverse sort order (default older first)\n */\n @Input() reverseOrder = false;\n /**\n * Orientation of the timeline\n */\n @Input() orientation: NgxTimelineOrientation = NgxTimelineOrientation.VERTICAL;\n /**\n * Logic to be applied in order to group events\n */\n @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;\n /**\n * Logic to be applied in order to put events on LEFT or RIGHT\n */\n @Input() changeSide?: NgxTimelineEventChangeSide = NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP;\n /**\n * Custom Template displayed before a group of events\n */\n @Input() periodCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show a single event\n */\n @Input() eventCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show an separator icon\n */\n @Input() centerIconCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the side date\n */\n @Input() dateInstantCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the inner event\n */\n @Input() innerEventCustomTemplate: TemplateRef<any>;\n /**\n * Inner custom template used to display the event description\n */\n @Input() eventDescriptionCustomTemplate?: TemplateRef<any>;\n /**\n * Output click event emitter\n */\n @Output()\n clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n groups: { [key: string]: NgxTimelineEvent[] } = {};\n periods: NgxTimelineItem[] = [];\n items: NgxTimelineItem[] = [];\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n ngxTimelineOrientation = NgxTimelineOrientation;\n ngxDateFormat = NgxDateFormat;\n\n private differs: IterableDiffers = inject(IterableDiffers);\n private iterableDiffer: IterableDiffer<any> = this.differs.find([]).create();\n private readonly separator = '/';\n\n ngOnInit(): void {\n this.groupEvents(this.events);\n }\n\n ngOnChanges() {\n this.groupEvents(this.events);\n }\n\n ngDoCheck() {\n const changes = this.iterableDiffer.diff(this.events);\n if (changes) {\n this.groupEvents(this.events);\n }\n }\n\n getPeriodKeyDateFormat(): string {\n return periodKeyDateFormat[this.groupEvent];\n }\n\n protected clear(): void {\n this.groups = {};\n this.periods = [];\n this.items = [];\n }\n\n protected groupEvents(events: NgxTimelineEvent[]): void {\n if (events) {\n this.clear();\n this.sortEvents(events);\n this.setGroupsAndPeriods(events);\n this.setItems();\n }\n }\n\n protected sortEvents(events: NgxTimelineEvent[]): void {\n events.sort((a, b) => {\n const aTime = a.timestamp.getTime();\n const bTime = b.timestamp.getTime();\n return this.reverseOrder ? bTime - aTime : aTime - bTime;});\n }\n\n protected setGroupsAndPeriods(events: NgxTimelineEvent[]): void {\n this.periods = [];\n events.forEach((event) => {\n // conversion from string to actual Date\n event.timestamp = new Date(event.timestamp);\n const periodKey = this.getPeriodKeyFromEvent(event);\n if (!this.groups[periodKey]) {\n this.groups[periodKey] = [];\n this.periods.push(this.getPeriodInfoFromPeriodKey(periodKey, event))\n }\n this.groups[periodKey].push(event);\n });\n }\n\n protected setItems(): void {\n let isLastItemOnLeft = false;\n this.periods.forEach((p) => {\n // insert first the period\n this.items.push(p);\n // in each period putting items on left\n let onLeft = true;\n if (this.changeSide === NgxTimelineEventChangeSide.ALL) {\n onLeft = !isLastItemOnLeft;\n }\n const periodInfo = p.periodInfo;\n // insert then all the events in this period\n isLastItemOnLeft = this.addPeriodEvents(periodInfo, onLeft);\n // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n });\n }\n\n protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): boolean {\n this.groups[periodInfo.periodKey].forEach((event, index) => {\n const prevEvent = this.groups[periodInfo.periodKey][index - 1];\n if (event.itemPosition) {\n onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;\n } else if (index > 0 && this.compareEvents(prevEvent, event)) {\n onLeft = !onLeft;\n }\n this.pushEventOnItems(event, onLeft);\n });\n return onLeft;\n }\n\n protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {\n this.items.push({\n eventInfo: {...event}, position: onLeft ?\n this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,\n });\n }\n\n /**\n * Compare the events inside the same group\n */\n protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {\n return this.shouldChangeEventsInPeriod() ||\n this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSide[this.changeSide]);\n }\n\n protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {\n return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);\n }\n\n protected getPeriodInfoFromPeriodKey(periodKey: string, firstGroupEvent: NgxTimelineEvent): { periodInfo: NgxTimelinePeriodInfo } {\n const split = periodKey.split(this.separator);\n return this.getPeriodInfo(split, periodKey, firstGroupEvent);\n }\n\n private getPeriodInfo(split: string[], periodKey: string, firstGroupEvent: NgxTimelineEvent): { periodInfo: NgxTimelinePeriodInfo } {\n return {\n periodInfo: {\n year: Number(split[0]),\n month: Number(split[1]),\n day: Number(split[2]),\n periodKey,\n firstDate: firstGroupEvent.timestamp as Date,\n },\n };\n }\n\n private shouldChangeEventsInPeriod() {\n return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].indexOf(this.changeSide) != -1;\n }\n\n protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);\n }\n}\n","<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import {NgModule} from '@angular/core';\nimport {NgxTimelineComponent} from './components';\nimport {NgxTimelineEventComponent}\n from './components';\nimport {CommonModule, registerLocaleData} from '@angular/common';\nimport {NgxDatePipe} from './pipes';\nimport localeIt from '@angular/common/locales/it';\nimport localeFr from '@angular/common/locales/fr';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\nimport localeSl from '@angular/common/locales/sl';\nimport localeTr from '@angular/common/locales/tr';\nimport localePl from '@angular/common/locales/pl';\nimport localePt from '@angular/common/locales/pt';\nimport localeRu from '@angular/common/locales/ru';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\nregisterLocaleData(localeSl);\nregisterLocaleData(localeTr);\nregisterLocaleData(localePl);\nregisterLocaleData(localePt);\nregisterLocaleData(localeRu);\n\n@NgModule({\n declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\n imports: [CommonModule],\n exports: [NgxTimelineComponent, NgxDatePipe],\n})\nexport class NgxTimelineModule { }\n","/*\n * Public API Surface of ngx-timeline\n */\nexport * from './lib/components';\nexport * from './lib/models';\nexport * from './lib/pipes/';\nexport * from './lib/ngx-timeline.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["fieldsToCheckEventChangeSide","i2.NgxTimelineEventComponent","i3.NgxDatePipe"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frxjs/ngx-timeline",
3
- "version": "17.0.8",
3
+ "version": "17.0.9",
4
4
  "keywords": [
5
5
  "angular",
6
6
  "timeline"