@frxjs/ngx-timeline 1.2.0 → 1.2.1

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 (8) hide show
  1. package/README.md +1 -0
  2. package/esm2020/lib/components/ngx-timeline.component.mjs +13 -3
  3. package/fesm2015/frxjs-ngx-timeline.mjs +12 -2
  4. package/fesm2015/frxjs-ngx-timeline.mjs.map +1 -1
  5. package/fesm2020/frxjs-ngx-timeline.mjs +12 -2
  6. package/fesm2020/frxjs-ngx-timeline.mjs.map +1 -1
  7. package/lib/components/ngx-timeline.component.d.ts +5 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -41,6 +41,7 @@ Input name | Explanation
41
41
  events | list of events to be displayed | yes | NgxTimelineEvent | no default
42
42
  langCode | language code use to format dates | no | <ul><li>'en'</li><li>'it'</li><li>'fr'</li><li>'de'</li><li>'es'</li></ul> | 'en'
43
43
  enableAnimation | Boolean used to enable or disable the animations | no | boolean | true
44
+ reverseOrder | Boolean used to reverse sort order (default older first) | no | boolean | false
44
45
  groupEvent | Logic to be applied in order to group events | no | enum NgxTimelineEventGroup | NgxTimelineEventGroup.MONTH_YEAR
45
46
  changeSideInGroup | Logic to be applied in order to put evetns on LEFT or RIGHT | no | enum NgxTimelineEventChangeSideInGroup | NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY
46
47
  periodCustomTemplate | Custom Template displayed before a group of events | no | TemplateRef<any> | no default
package/esm2020/lib/components/ngx-timeline.component.mjs CHANGED
@@ -11,6 +11,10 @@ export class NgxTimelineComponent {
11
11
  * Boolean used to enable or disable the animations
12
12
  */
13
13
  this.enableAnimation = true;
14
+ /**
15
+ * Boolean used to reverse sort order (default older first)
16
+ */
17
+ this.reverseOrder = false;
14
18
  /**
15
19
  * Logic to be applied in order to group events
16
20
  */
@@ -54,7 +58,11 @@ export class NgxTimelineComponent {
54
58
  }
55
59
  }
56
60
  sortEvents(events) {
57
- events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
61
+ events.sort((a, b) => {
62
+ const aTime = a.timestamp.getTime();
63
+ const bTime = b.timestamp.getTime();
64
+ return this.reverseOrder ? bTime - aTime : aTime - bTime;
65
+ });
58
66
  }
59
67
  setGroups(events) {
60
68
  events.forEach((event) => {
@@ -127,7 +135,7 @@ export class NgxTimelineComponent {
127
135
  }
128
136
  }
129
137
  NgxTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
130
- NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", groupEvent: "groupEvent", changeSideInGroup: "changeSideInGroup", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], components: [{ type: i1.NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "ngxdate": i3.NgxDatePipe } });
138
+ NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", groupEvent: "groupEvent", changeSideInGroup: "changeSideInGroup", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], components: [{ type: i1.NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "ngxdate": i3.NgxDatePipe } });
131
139
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
132
140
  type: Component,
133
141
  args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
@@ -137,6 +145,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
137
145
  type: Input
138
146
  }], enableAnimation: [{
139
147
  type: Input
148
+ }], reverseOrder: [{
149
+ type: Input
140
150
  }], groupEvent: [{
141
151
  type: Input
142
152
  }], changeSideInGroup: [{
@@ -154,4 +164,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
154
164
  }], clickEmitter: [{
155
165
  type: Output
156
166
  }] } });
157
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRpbWVsaW5lLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXRpbWVsaW5lLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXRpbWVsaW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQVUsS0FBSyxFQUF5QyxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdEcsT0FBTyxFQUdMLHVCQUF1QixFQUV2QixhQUFhLEVBQ2IscUJBQXFCLEVBQ3JCLGlDQUFpQyxFQUNqQyxtQkFBbUIsRUFDbkIsbUNBQW1DLEVBQ25DLHFCQUFxQixFQUFDLE1BQU0sV0FBVyxDQUFDO0FBQzFDLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxNQUFNLENBQUM7Ozs7O0FBT3JDLE1BQU0sT0FBTyxvQkFBb0I7SUF1RC9CO1FBOUNBOztXQUVHO1FBQ00sb0JBQWUsR0FBRyxJQUFJLENBQUM7UUFDaEM7O1dBRUc7UUFDTSxlQUFVLEdBQTJCLHFCQUFxQixDQUFDLFVBQVUsQ0FBQztRQUMvRTs7V0FFRztRQUNNLHNCQUFpQixHQUF1QyxpQ0FBaUMsQ0FBQyxnQkFBZ0IsQ0FBQztRQXFCcEg7O1dBRUc7UUFFRCxpQkFBWSxHQUFxQyxJQUFJLGVBQWUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUU3RSxXQUFNLEdBQTBDLEVBQUUsQ0FBQztRQUNuRCxZQUFPLEdBQXNCLEVBQUUsQ0FBQztRQUNoQyxVQUFLLEdBQXNCLEVBQUUsQ0FBQztRQUM5Qiw0QkFBdUIsR0FBRyx1QkFBdUIsQ0FBQztRQUNsRCxrQkFBYSxHQUFHLGFBQWEsQ0FBQztRQUViLGNBQVMsR0FBRyxHQUFHLENBQUM7SUFFbEIsQ0FBQztJ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QUs7Z0JBSUcsbUJBQW1CO3NCQUEzQixLQUFLO2dCQUlHLHdCQUF3QjtzQkFBaEMsS0FBSztnQkFJRyx5QkFBeUI7c0JBQWpDLEtBQUs7Z0JBSUcsd0JBQXdCO3NCQUFoQyxLQUFLO2dCQUtKLFlBQVk7c0JBRGIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBPbkluaXQsIElucHV0LCBUZW1wbGF0ZVJlZiwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzLCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgTmd4VGltZWxpbmVFdmVudCxcbiAgTmd4VGltZWxpbmVJdGVtLFxuICBOZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbixcbiAgTmd4VGltZWxpbmVQZXJpb2RJbmZvLFxuICBOZ3hEYXRlRm9ybWF0LFxuICBOZ3hUaW1lbGluZUV2ZW50R3JvdXAsXG4gIE5neFRpbWVsaW5lRXZlbnRDaGFuZ2VTaWRlSW5Hcm91cCxcbiAgcGVyaW9kS2V5RGF0ZUZvcm1hdCxcbiAgZmllbGRzVG9DaGVja0V2ZW50Q2hhbmdlU2lkZUluR3JvdXAsXG4gIGZpZWxkc1RvQWRkRXZlbnRHcm91cH0gZnJvbSAnLi4vbW9kZWxzJztcbmltcG9ydCB7QmVoYXZpb3JTdWJqZWN0fSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LXRpbWVsaW5lJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC10aW1lbGluZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC10aW1lbGluZS5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIE5neFRpbWVsaW5lQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICAvKipcbiAgICogTGlzdCBvZiBldmVudHMgdG8gYmUgZGlzcGxheWVkXG4gICAqL1xuICBASW5wdXQoKSBldmVudHM6IE5neFRpbWVsaW5lRXZlbnRbXTtcbiAgLyoqXG4gICAqIExhbmd1YWdlIGNvZGUgdXNlZCB0byBzaG93IHRoZSBkYXRlIGZvcm1hdHRlZFxuICAgKi9cbiAgQElucHV0KCkgbGFuZ0NvZGU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBCb29sZWFuIHVzZWQgdG8gZW5hYmxlIG9yIGRpc2FibGUgdGhlIGFuaW1hdGlvbnNcbiAgICovXG4gIEBJbnB1dCgpIGVuYWJsZUFuaW1hdGlvbiA9IHRydWU7XG4gIC8qKlxuICAgKiBMb2dpYyB0byBiZSBhcHBsaWVkIGluIG9yZGVyIHRvIGdyb3VwIGV2ZW50c1xuICAgKi9cbiAgQElucHV0KCkgZ3JvdXBFdmVudD86IE5neFRpbWVsaW5lRXZlbnRHcm91cCA9IE5neFRpbWVsaW5lRXZlbnRHcm91cC5NT05USF9ZRUFSO1xuICAvKipcbiAgICogTG9naWMgdG8gYmUgYXBwbGllZCBpbiBvcmRlciB0byBwdXQgZXZldG5zIG9uIExFRlQgb3IgUklHSFRcbiAgICovXG4gIEBJbnB1dCgpIGNoYW5nZVNpZGVJbkdyb3VwPzogTmd4VGltZWxpbmVFdmVudENoYW5nZVNpZGVJbkdyb3VwID0gTmd4VGltZWxpbmVFdmVudENoYW5nZVNpZGVJbkdyb3VwLk9OX0RJRkZFUkVOVF9EQVk7XG4gIC8qKlxuICAgKiBDdXN0b20gVGVtcGxhdGUgZGlzcGxheWVkIGJlZm9yZSBhIGdyb3VwIG9mIGV2ZW50c1xuICAgKi9cbiAgQElucHV0KCkgcGVyaW9kQ3VzdG9tVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG4gIC8qKlxuICAgKiBDdXN0b20gVGVtcGxhdGUgZGlzcGxheWVkIHRvIHNob3cgYSBzaW5nbGUgZXZlbnRcbiAgICovXG4gIEBJbnB1dCgpIGV2ZW50Q3VzdG9tVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG4gIC8qKlxuICAgKiBDdXN0b20gVGVtcGxhdGUgZGlzcGxheWVkIHRvIHNob3cgYW4gc2VwYXJhdG9yIGljb25cbiAgICovXG4gIEBJbnB1dCgpIGNlbnRlckljb25DdXN0b21UZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcbiAgLyoqXG4gICAqIEN1c3RvbSBUZW1wbGF0ZSBkaXNwbGF5ZWQgdG8gc2hvdyB0aGUgc2lkZSBkYXRlXG4gICAqL1xuICBASW5wdXQoKSBkYXRlSW5zdGFudEN1c3RvbVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICAvKipcbiAgICogQ3VzdG9tIFRlbXBsYXRlIGRpc3BsYXllZCB0byBzaG93IHRoZSBpbm5lciBldmVudFxuICAgKi9cbiAgQElucHV0KCkgaW5uZXJFdmVudEN1c3RvbVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICAvKipcbiAgICogT3V0cHV0IGNsaWNrIGV2ZW50IGVtaXR0ZXJcbiAgICovXG4gIEBPdXRwdXQoKVxuICAgIGNsaWNrRW1pdHRlcjogQmVoYXZpb3JTdWJqZWN0PE5neFRpbWVsaW5lSXRlbT4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0KG51bGwpO1xuXG4gIGdyb3VwczogeyBba2V5OiBzdHJpbmddOiBOZ3hUaW1lbGluZUV2ZW50W10gfSA9IHt9O1xuICBwZXJpb2RzOiBOZ3hUaW1lbGluZUl0ZW1bXSA9IFtdO1xuICBpdGVtczogTmd4VGltZWxpbmVJdGVtW10gPSBbXTtcbiAgbmd4VGltZWxpbmVJdGVtUG9zaXRpb24gPSBOZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbjtcbiAgbmd4RGF0ZUZvcm1hdCA9IE5neERhdGVGb3JtYXQ7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBzZXBhcmF0b3IgPSAnLyc7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5ncm91cEV2ZW50cyh0aGlzLmV2ZW50cyk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgdGhpcy5ncm91cEV2ZW50cyh0aGlzLmV2ZW50cyk7XG4gIH1cblxuICBnZXRQZXJpb2RLZXlEYXRlRm9ybWF0KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHBlcmlvZEtleURhdGVGb3JtYXRbdGhpcy5ncm91cEV2ZW50XTtcbiAgfVxuXG4gIHByb3RlY3RlZCBjbGVhcigpOiB2b2lkIHtcbiAgICB0aGlzLmdyb3VwcyA9IHt9O1xuICAgIHRoaXMucGVyaW9kcyA9IFtdO1xuICAgIHRoaXMuaXRlbXMgPSBbXTtcbiAgfVxuXG4gIHByb3RlY3RlZCBncm91cEV2ZW50cyhldmVudHM6IE5neFRpbWVsaW5lRXZlbnRbXSk6IHZvaWQge1xuICAgIGlmIChldmVudHMpIHtcbiAgICAgIHRoaXMuY2xlYXIoKTtcbiAgICAgIHRoaXMuc29ydEV2ZW50cyhldmVudHMpO1xuICAgICAgdGhpcy5zZXRHcm91cHMoZXZlbnRzKTtcbiAgICAgIHRoaXMuc2V0UGVyaW9kcygpO1xuICAgICAgdGhpcy5zZXRJdGVtcygpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBzb3J0RXZlbnRzKGV2ZW50czogTmd4VGltZWxpbmVFdmVudFtdKTogdm9pZCB7XG4gICAgZXZlbnRzLnNvcnQoKGEsIGIpID0+IGEudGltZXN0YW1wLmdldFRpbWUoKSAtIGIudGltZXN0YW1wLmdldFRpbWUoKSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgc2V0R3JvdXBzKGV2ZW50czogTmd4VGltZWxpbmVFdmVudFtdKTogdm9pZCB7XG4gICAgZXZlbnRzLmZvckVhY2goKGV2ZW50KSA9PiB7XG4gICAgICAvLyBjb252ZXJzaW9uIGZyb20gc3RyaW5nIHRvIGFjdHVhbCBEYXRlXG4gICAgICBldmVudC50aW1lc3RhbXAgPSBuZXcgRGF0ZShldmVudC50aW1lc3RhbXApO1xuICAgICAgY29uc3QgcGVyaW9kS2V5ID0gdGhpcy5nZXRQZXJpb2RLZXlGcm9tRXZlbnQoZXZlbnQpO1xuICAgICAgaWYgKCF0aGlzLmdyb3Vwc1twZXJpb2RLZXldKSB7XG4gICAgICAgIHRoaXMuZ3JvdXBzW3BlcmlvZEtleV0gPSBbXTtcbiAgICAgIH1cbiAgICAgIHRoaXMuZ3JvdXBzW3BlcmlvZEtleV0ucHVzaChldmVudCk7XG4gICAgfSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgc2V0SXRlbXMoKTogdm9pZCB7XG4gICAgdGhpcy5wZXJpb2RzLmZvckVhY2goKHApID0+IHtcbiAgICAgIC8vIGluc2VydCBmaXJzdCB0aGUgcGVyaW9kXG4gICAgICB0aGlzLml0ZW1zLnB1c2gocCk7XG4gICAgICAvLyBpbiBlYWNoIHBlcmlvZCBwdXR0aW5nIGl0ZW1zIG9uIGxlZnRcbiAgICAgIGNvbnN0IG9uTGVmdCA9IHRydWU7XG4gICAgICBjb25zdCBwZXJpb2RJbmZvID0gcC5wZXJpb2RJbmZvO1xuICAgICAgLy8gaW5zZXJ0IHRoZW4gYWxsIHRoZSBldmVudHMgaW4gdGhpcyBwZXJpb2RcbiAgICAgIHRoaXMuYWRkUGVyaW9kRXZlbnRzKHBlcmlvZEluZm8sIG9uTGVmdCk7XG4gICAgICAvLyBvbkxlZnQgPSB0aGlzLmFkZEV2ZW50SXRlbXNBbmRHZXRJZk9uTGVmdChwZXJpb2RJbmZvLCBvbkxlZnQpO1xuICAgIH0pO1xuICB9XG5cbiAgcHJvdGVjdGVkIGFkZFBlcmlvZEV2ZW50cyhwZXJpb2RJbmZvOiBOZ3hUaW1lbGluZVBlcmlvZEluZm8sIG9uTGVmdDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuZ3JvdXBzW3BlcmlvZEluZm8ucGVyaW9kS2V5XS5mb3JFYWNoKChldmVudCwgaW5kZXgpID0+IHtcbiAgICAgIGNvbnN0IHByZXZFdmVudCA9IHRoaXMuZ3JvdXBzW3BlcmlvZEluZm8ucGVyaW9kS2V5XVtpbmRleCAtIDFdO1xuICAgICAgaWYgKGluZGV4ID4gMCAmJiB0aGlzLmNvbXBhcmVFdmVudHMocHJldkV2ZW50LCBldmVudCkpIHtcbiAgICAgICAgb25MZWZ0ID0gIW9uTGVmdDtcbiAgICAgIH1cbiAgICAgIHRoaXMucHVzaEV2ZW50T25JdGVtcyhldmVudCwgb25MZWZ0KTtcbiAgICB9KTtcbiAgICAvLyByZXR1cm4gb25MZWZ0O1xuICB9XG5cbiAgcHJvdGVjdGVkIHB1c2hFdmVudE9uSXRlbXMoZXZlbnQ6IE5neFRpbWVsaW5lRXZlbnQsIG9uTGVmdDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuaXRlbXMucHVzaCh7XG4gICAgICBldmVudEluZm86IHsuLi5ldmVudH0sIHBvc2l0aW9uOiBvbkxlZnQgP1xuICAgICAgICB0aGlzLm5neFRpbWVsaW5lSXRlbVBvc2l0aW9uLk9OX0xFRlQgOiB0aGlzLm5neFRpbWVsaW5lSXRlbVBvc2l0aW9uLk9OX1JJR0hULFxuICAgIH0pO1xuICB9XG5cbiAgLyoqXG4gICAqIENvbXBhcmUgdGhlIGV2ZW50cyBpbnNpZGUgdGhlIHNhbWUgZ3JvdXBcbiAgICovXG4gIHByb3RlY3RlZCBjb21wYXJlRXZlbnRzKHByZXZFdmVudDogTmd4VGltZWxpbmVFdmVudCwgZXZlbnQ6IE5neFRpbWVsaW5lRXZlbnQpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5jaGFuZ2VTaWRlSW5Hcm91cCA9PT0gTmd4VGltZWxpbmVFdmVudENoYW5nZVNpZGVJbkdyb3VwLkFMTCB8fFxuICAgICAgdGhpcy5jb21wYXJlRXZlbnRzRmllbGQocHJldkV2ZW50LCBldmVudCwgLi4uZmllbGRzVG9DaGVja0V2ZW50Q2hhbmdlU2lkZUluR3JvdXBbdGhpcy5jaGFuZ2VTaWRlSW5Hcm91cF0pO1xuICB9XG5cbiAgcHJvdGVjdGVkIGNvbXBhcmVFdmVudHNGaWVsZChwcmV2RXZlbnQ6IE5neFRpbWVsaW5lRXZlbnQsIGV2ZW50OiBOZ3hUaW1lbGluZUV2ZW50LCAuLi5maWVsZHM6IHN0cmluZ1tdKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIGZpZWxkcy5yZWR1Y2UoKHJlcywgZmllbGQpID0+IHJlcyA9IHJlcyB8fCBwcmV2RXZlbnQudGltZXN0YW1wW2ZpZWxkXSgpICE9PSBldmVudC50aW1lc3RhbXBbZmllbGRdKCksICEhZmFsc2UpO1xuICB9XG5cbiAgcHJvdGVjdGVkIHNldFBlcmlvZHMoKTogdm9pZCB7XG4gICAgdGhpcy5wZXJpb2RzID0gT2JqZWN0LmtleXModGhpcy5ncm91cHMpLm1hcCgocGVyaW9kS2V5KSA9PiB7XG4gICAgICBjb25zdCBzcGxpdCA9IHBlcmlvZEtleS5zcGxpdCh0aGlzLnNlcGFyYXRvcik7XG4gICAgICByZXR1cm4gdGhpcy5nZXRQZXJpb2RJbmZvKHNwbGl0LCBwZXJpb2RLZXkpO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRQZXJpb2RJbmZvKHNwbGl0OiBzdHJpbmdbXSwgcGVyaW9kS2V5OiBzdHJpbmcpOiB7IHBlcmlvZEluZm86IE5neFRpbWVsaW5lUGVyaW9kSW5mbyB9IHtcbiAgICByZXR1cm4ge1xuICAgICAgcGVyaW9kSW5mbzoge1xuICAgICAgICB5ZWFyOiBOdW1iZXIoc3BsaXRbMF0pLFxuICAgICAgICBtb250aDogTnVtYmVyKHNwbGl0WzFdKSxcbiAgICAgICAgZGF5OiBOdW1iZXIoc3BsaXRbMl0pLFxuICAgICAgICBwZXJpb2RLZXksXG4gICAgICAgIGZpcnN0RGF0ZTogdGhpcy5ncm91cHNbcGVyaW9kS2V5XVswXS50aW1lc3RhbXAgYXMgRGF0ZSxcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuXG4gIHByb3RlY3RlZCBnZXRQZXJpb2RLZXlGcm9tRXZlbnQoZXZlbnQ6IE5neFRpbWVsaW5lRXZlbnQpOiBzdHJpbmcge1xuICAgIHJldHVybiBmaWVsZHNUb0FkZEV2ZW50R3JvdXBbdGhpcy5ncm91cEV2ZW50XS5tYXAoKGZpZWxkKSA9PiBldmVudC50aW1lc3RhbXBbZmllbGRdKCkpLmpvaW4odGhpcy5zZXBhcmF0b3IpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibWFpbi1jb250YWluZXJcIj5cclxuICA8ZGl2IGNsYXNzPVwiaXRlbXMtY29udGFpbmVyXCI+XHJcbiAgICA8ZGl2ICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zOyBsZXQgaW5kZXggPSBpbmRleDtcIiBjbGFzcz1cInJvd1wiPlxyXG4gICAgICA8IS0tIERFU0tUT1AgLS0+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJjb2wgY29sLWxlZnQgZGVza3RvcFwiIFtuZ0NsYXNzXT1cIml0ZW0ucGVyaW9kSW5mbyA/ICdjb2wtcGVyaW9kJyA6ICdjb2wtZXZlbnQnXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImV2ZW50LW91dGVyLWNvbnRhaW5lclwiICpuZ0lmPVwiaXRlbS5ldmVudEluZm8gJiYgaXRlbS5wb3NpdGlvbiA9PT0gbmd4VGltZWxpbmVJdGVtUG9zaXRpb24uT05fTEVGVFwiPlxyXG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImV2ZW50Q3VzdG9tVGVtcGxhdGUgfHwgZXZlbnRUZW1wbGF0ZTsgY29udGV4dDoge2V2ZW50OiBpdGVtLCBjb2xTaWRlUG9zaXRpb246IG5neFRpbWVsaW5lSXRlbVBvc2l0aW9uLk9OX0xFRlR9XCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImhvdXIgbGVmdFwiICpuZ0lmPVwiaXRlbS5ldmVudEluZm8gJiYgaXRlbS5wb3NpdGlvbiA9PT0gbmd4VGltZWxpbmVJdGVtUG9zaXRpb24uT05fUklHSFRcIj5cclxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJkYXRlSW5zdGFudEN1c3RvbVRlbXBsYXRlIHx8IGRhdGVJbnN0YW50VGVtcGxhdGU7IGNvbnRleHQ6IHtpdGVtOiBpdGVtLmV2ZW50SW5mb31cIiA+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgPGRpdiBjbGFzcz1cImNvbCBjb2wtY2VudGVyIGRlc2t0b3BcIiBbbmdDbGFzc109XCJpdGVtLnBlcmlvZEluZm8gPyAnY29sLXBlcmlvZCcgOiAnY29sLWV2ZW50J1wiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjZW50ZXItaW5uZXJcIiAqbmdJZj1cIml0ZW0ucGVyaW9kSW5mb1wiPlxyXG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInBlcmlvZEN1c3RvbVRlbXBsYXRlIHx8IHBlcmlvZFRlbXBsYXRlOyBjb250ZXh0OiB7cGVyaW9kOiBpdGVtLnBlcmlvZEluZm8sIGluZGV4OiBpbmRleH1cIj48L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2VudGVyLWlubmVyIG5vLXBlcmlvZC1rZXlcIiAqbmdJZj1cIiFpdGVtLnBlcmlvZEluZm9cIj5cclxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjZW50ZXJMaW5lc0ljb25UZW1wbGF0ZTsgY29udGV4dDoge2luZGV4OiBpbmRleH1cIj48L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8ZGl2IGNsYXNzPVwiY29sIGNvbC1yaWdodCBkZXNrdG9wXCIgW25nQ2xhc3NdPVwiaXRlbS5wZXJpb2RJbmZvID8gJ2NvbC1wZXJpb2QnIDogJ2NvbC1ldmVudCdcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZXZlbnQtb3V0ZXItY29udGFpbmVyXCIgKm5nSWY9XCJpdGVtLmV2ZW50SW5mbyAmJiBpdGVtLnBvc2l0aW9uID09PSBuZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbi5PTl9SSUdIVFwiPlxyXG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImV2ZW50Q3VzdG9tVGVtcGxhdGUgfHwgZXZlbnRUZW1wbGF0ZTsgY29udGV4dDoge2V2ZW50OiBpdGVtLCBjb2xTaWRlUG9zaXRpb246IG5neFRpbWVsaW5lSXRlbVBvc2l0aW9uLk9OX1JJR0hUfVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJob3VyIHJpZ2h0XCIgKm5nSWY9XCJpdGVtLmV2ZW50SW5mbyAmJiBpdGVtLnBvc2l0aW9uID09PSBuZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbi5PTl9MRUZUXCI+XHJcbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZGF0ZUluc3RhbnRDdXN0b21UZW1wbGF0ZSB8fCBkYXRlSW5zdGFudFRlbXBsYXRlOyBjb250ZXh0OiB7aXRlbTogaXRlbS5ldmVudEluZm99XCIgPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICAgIDwhLS0gTU9CSUxFIC0tPlxyXG4gICAgICA8ZGl2IGNsYXNzPVwiY29sIGNvbC1sZWZ0IG1vYmlsZVwiIFtuZ0NsYXNzXT1cIml0ZW0ucGVyaW9kSW5mbyA/ICdjb2wtcGVyaW9kJyA6ICdjb2wtZXZlbnQnXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImhvdXIgbGVmdFwiICpuZ0lmPVwiaXRlbS5ldmVudEluZm9cIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJob3VyLWlubmVyLWNvbnRhaW5lclwiPlxyXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZGF0ZUluc3RhbnRDdXN0b21UZW1wbGF0ZSB8fCBkYXRlSW5zdGFudFRlbXBsYXRlOyBjb250ZXh0OiB7aXRlbTogaXRlbS5ldmVudEluZm99XCIgPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgPGRpdiBjbGFzcz1cImNvbCBjb2wtY2VudGVyIG1vYmlsZVwiIFtuZ0NsYXNzXT1cIml0ZW0ucGVyaW9kSW5mbyA/ICdjb2wtcGVyaW9kJyA6ICdjb2wtZXZlbnQnXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImNlbnRlci1pbm5lclwiICpuZ0lmPVwiaXRlbS5wZXJpb2RJbmZvO1wiPlxyXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicGVyaW9kQ3VzdG9tVGVtcGxhdGUgfHwgcGVyaW9kVGVtcGxhdGU7IGNvbnRleHQ6IHtwZXJpb2Q6IGl0ZW0ucGVyaW9kSW5mbywgaW5kZXg6IGluZGV4fVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjZW50ZXItaW5uZXIgbm8tcGVyaW9kLWtleVwiICpuZ0lmPVwiIWl0ZW0ucGVyaW9kSW5mbztcIj5cclxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjZW50ZXJMaW5lc0ljb25UZW1wbGF0ZTtjb250ZXh0OiB7aW5kZXg6IGluZGV4fVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICAgIDxkaXYgY2xhc3M9XCJjb2wgY29sLXJpZ2h0IG1vYmlsZVwiIFtuZ0NsYXNzXT1cIml0ZW0ucGVyaW9kSW5mbyA/ICdjb2wtcGVyaW9kJyA6ICdjb2wtZXZlbnQnXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImV2ZW50LW91dGVyLWNvbnRhaW5lclwiICpuZ0lmPVwiaXRlbS5ldmVudEluZm9cIj5cclxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJldmVudEN1c3RvbVRlbXBsYXRlIHx8IGV2ZW50VGVtcGxhdGU7IGNvbnRleHQ6IHtldmVudDogaXRlbSwgY29sU2lkZVBvc2l0aW9uOiBuZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbi5PTl9SSUdIVH1cIj48L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcblxyXG5cclxuPG5nLXRlbXBsYXRlICNjZW50ZXJMaW5lc0ljb25UZW1wbGF0ZSBsZXQtaW5kZXg9aW5kZXg+XHJcbiAgPGRpdiBjbGFzcz1cImxpbmVcIj48L2Rpdj5cclxuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2VudGVySWNvbkN1c3RvbVRlbXBsYXRlIHx8IGNlbnRlckljb25UZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxyXG4gIDxkaXYgW25nQ2xhc3NdPVwieyd0cmFuc3BhcmVudCBsYXN0LWxpbmUnOiBpbmRleCA9PT0gaXRlbXMubGVuZ3RoIC0gMX1cIiBjbGFzcz1cImxpbmVcIj48L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcbjxuZy10ZW1wbGF0ZSAjY2VudGVySWNvblRlbXBsYXRlPlxyXG4gIDxkaXYgY2xhc3M9XCJjZW50ZXItaWNvbi1jb250YWluZXJcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJpY29uXCI+PC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvbmctdGVtcGxhdGU+XHJcblxyXG48bmctdGVtcGxhdGUgI2RhdGVJbnN0YW50VGVtcGxhdGUgbGV0LWl0ZW09aXRlbT5cclxuICA8c3Bhbj5cclxuICAgIHt7aXRlbT8udGltZXN0YW1wIHwgbmd4ZGF0ZSA6IG5neERhdGVGb3JtYXQuSE9VUlNfTUlOVVRFUyA6IGxhbmdDb2RlfX1cclxuICA8L3NwYW4+XHJcbjwvbmctdGVtcGxhdGU+XHJcblxyXG48bmctdGVtcGxhdGUgI3BlcmlvZFRlbXBsYXRlIGxldC1wZXJpb2Q9cGVyaW9kIGxldC1pbmRleD1pbmRleD5cclxuICA8ZGl2IFtuZ0NsYXNzXT1cInsndHJhbnNwYXJlbnQgZmlyc3QtbGluZSc6ICFpbmRleH1cIiBjbGFzcz1cImxpbmVcIj48L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwicGVyaW9kLWNvbnRhaW5lclwiPlxyXG4gICAgPGRpdiBjbGFzcz1cInBlcmlvZC1pbm5lci1jb250YWluZXJcIj5cclxuICAgICAgPHNwYW4+e3twZXJpb2Q/LmZpcnN0RGF0ZSB8IG5neGRhdGUgOiBnZXRQZXJpb2RLZXlEYXRlRm9ybWF0KCkgOiBsYW5nQ29kZX19PC9zcGFuPlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiBjbGFzcz1cImxpbmVcIj48L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcbjxuZy10ZW1wbGF0ZSAjZXZlbnRUZW1wbGF0ZSBsZXQtZXZlbnQ9ZXZlbnQgbGV0LWNvbFNpZGVQb3NpdGlvbj1jb2xTaWRlUG9zaXRpb24+XHJcbiAgPG5neC10aW1lbGluZS1ldmVudFxyXG4gICAgW2V2ZW50XT1cImV2ZW50XCJcclxuICAgIFtsYW5nQ29kZV09XCJsYW5nQ29kZVwiXHJcbiAgICBbZW5hYmxlQW5pbWF0aW9uXT1cImVuYWJsZUFuaW1hdGlvblwiXHJcbiAgICBbaW5uZXJFdmVudEN1c3RvbVRlbXBsYXRlXT1cImlubmVyRXZlbnRDdXN0b21UZW1wbGF0ZVwiXHJcbiAgICBbY29sU2lkZVBvc2l0aW9uXT1cImNvbFNpZGVQb3NpdGlvblwiXHJcbiAgICAoY2xpY2tFbWl0dGVyKT1cImNsaWNrRW1pdHRlci5uZXh0KCRldmVudClcIj5cclxuICA8L25neC10aW1lbGluZS1ldmVudD5cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcbiJdfQ==
167
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRpbWVsaW5lLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXRpbWVsaW5lLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXRpbWVsaW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQVUsS0FBSyxFQUF5QyxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdEcsT0FBTyxFQUdMLHVCQUF1QixFQUV2QixhQUFhLEVBQ2IscUJBQXFCLEVBQ3JCLGlDQUFpQyxFQUNqQyxtQkFBbUIsRUFDbkIsbUNBQW1DLEVBQ25DLHFCQUFxQixFQUFDLE1BQU0sV0FBVyxDQUFDO0FBQzFDLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxNQUFNLENBQUM7Ozs7O0FBT3JDLE1BQU0sT0FBTyxvQkFBb0I7SUEyRC9CO1FBbERBOztXQUVHO1FBQ00sb0JBQWUsR0FBRyxJQUFJLENBQUM7UUFDaEM7O1dBRUc7UUFDTSxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUM5Qjs7V0FFRztRQUNNLGVBQVUsR0FBMkIscUJBQXFCLENBQUMsVUFBVSxDQUFDO1FBQy9FOztXQUVHO1FBQ00sc0JBQWlCLEdBQXVDLGlDQUFpQyxDQUFDLGdCQUFnQixDQUFDO1FBcUJwSDs7V0FFRztRQUVELGlCQUFZLEdBQXFDLElBQUksZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBRTdFLFdBQU0sR0FBMEMsRUFBRSxDQUFDO1FBQ25ELFlBQU8sR0FBc0IsRUFBRSxDQUFDO1FBQ2hDLFVBQUssR0FBc0IsRUFBRSxDQUFDO1FBQzlCLDRCQUF1QixHQUFHLHVCQUF1QixDQUFDO1FBQ2xELGtCQUFhLEdBQUcsYUFBYSxDQUFD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S0FrR0E7MkZEL0VhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxjQUFjOzBFQVFmLE1BQU07c0JBQWQsS0FBSztnQkFJRyxRQUFRO3NCQUFoQixLQUFLO2dCQUlHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBSUcsWUFBWTtzQkFBcEIsS0FBSztnQkFJRyxVQUFVO3NCQUFsQixLQUFLO2dCQUlHLGlCQUFpQjtzQkFBekIsS0FBSztnQkFJRyxvQkFBb0I7c0JBQTVCLEtBQUs7Z0JBSUcsbUJBQW1CO3NCQUEzQixLQUFLO2dCQUlHLHdCQUF3QjtzQkFBaEMsS0FBSztnQkFJRyx5QkFBeUI7c0JBQWpDLEtBQUs7Z0JBSUcsd0JBQXdCO3NCQUFoQyxLQUFLO2dCQUtKLFlBQVk7c0JBRGIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBPbkluaXQsIElucHV0LCBUZW1wbGF0ZVJlZiwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzLCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgTmd4VGltZWxpbmVFdmVudCxcbiAgTmd4VGltZWxpbmVJdGVtLFxuICBOZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbixcbiAgTmd4VGltZWxpbmVQZXJpb2RJbmZvLFxuICBOZ3hEYXRlRm9ybWF0LFxuICBOZ3hUaW1lbGluZUV2ZW50R3JvdXAsXG4gIE5neFRpbWVsaW5lRXZlbnRDaGFuZ2VTaWRlSW5Hcm91cCxcbiAgcGVyaW9kS2V5RGF0ZUZvcm1hdCxcbiAgZmllbGRzVG9DaGVja0V2ZW50Q2hhbmdlU2lkZUluR3JvdXAsXG4gIGZpZWxkc1RvQWRkRXZlbnRHcm91cH0gZnJvbSAnLi4vbW9kZWxzJztcbmltcG9ydCB7QmVoYXZpb3JTdWJqZWN0fSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LXRpbWVsaW5lJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC10aW1lbGluZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC10aW1lbGluZS5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIE5neFRpbWVsaW5lQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICAvKipcbiAgICogTGlzdCBvZiBldmVudHMgdG8gYmUgZGlzcGxheWVkXG4gICAqL1xuICBASW5wdXQoKSBldmVudHM6IE5neFRpbWVsaW5lRXZlbnRbXTtcbiAgLyoqXG4gICAqIExhbmd1YWdlIGNvZGUgdXNlZCB0byBzaG93IHRoZSBkYXRlIGZvcm1hdHRlZFxuICAgKi9cbiAgQElucHV0KCkgbGFuZ0NvZGU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBCb29sZWFuIHVzZWQgdG8gZW5hYmxlIG9yIGRpc2FibGUgdGhlIGFuaW1hdGlvbnNcbiAgICovXG4gIEBJbnB1dCgpIGVuYWJsZUFuaW1hdGlvbiA9IHRydWU7XG4gIC8qKlxuICAgKiBCb29sZWFuIHVzZWQgdG8gcmV2ZXJzZSBzb3J0IG9yZGVyIChkZWZhdWx0IG9sZGVyIGZpcnN0KVxuICAgKi9cbiAgQElucHV0KCkgcmV2ZXJzZU9yZGVyID0gZmFsc2U7XG4gIC8qKlxuICAgKiBMb2dpYyB0byBiZSBhcHBsaWVkIGluIG9yZGVyIHRvIGdyb3VwIGV2ZW50c1xuICAgKi9cbiAgQElucHV0KCkgZ3JvdXBFdmVudD86IE5neFRpbWVsaW5lRXZlbnRHcm91cCA9IE5neFRpbWVsaW5lRXZlbnRHcm91cC5NT05USF9ZRUFSO1xuICAvKipcbiAgICogTG9naWMgdG8gYmUgYXBwbGllZCBpbiBvcmRlciB0byBwdXQgZXZldG5zIG9uIExFRlQgb3IgUklHSFRcbiAgICovXG4gIEBJbnB1dCgpIGNoYW5nZVNpZGVJbkdyb3VwPzogTmd4VGltZWxpbmVFdmVudENoYW5nZVNpZGVJbkdyb3VwID0gTmd4VGltZWxpbmVFdmVudENoYW5nZVNpZGVJbkdyb3VwLk9OX0RJRkZFUkVOVF9EQVk7XG4gIC8qKlxuICAgKiBDdXN0b20gVGVtcGxhdGUgZGlzcGxheWVkIGJlZm9yZSBhIGdyb3VwIG9mIGV2ZW50c1xuICAgKi9cbiAgQElucHV0KCkgcGVyaW9kQ3VzdG9tVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG4gIC8qKlxuICAgKiBDdXN0b20gVGVtcGxhdGUgZGlzcGxheWVkIHRvIHNob3cgYSBzaW5nbGUgZXZlbnRcbiAgICovXG4gIEBJbnB1dCgpIGV2ZW50Q3VzdG9tVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG4gIC8qKlxuICAgKiBDdXN0b20gVGVtcGxhdGUgZGlzcGxheWVkIHRvIHNob3cgYW4gc2VwYXJhdG9yIGljb25cbiAgICovXG4gIEBJbnB1dCgpIGNlbnRlckljb25DdXN0b21UZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcbiAgLyoqXG4gICAqIEN1c3RvbSBUZW1wbGF0ZSBkaXNwbGF5ZWQgdG8gc2hvdyB0aGUgc2lkZSBkYXRlXG4gICAqL1xuICBASW5wdXQoKSBkYXRlSW5zdGFudEN1c3RvbVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICAvKipcbiAgICogQ3VzdG9tIFRlbXBsYXRlIGRpc3BsYXllZCB0byBzaG93IHRoZSBpbm5lciBldmVudFxuICAgKi9cbiAgQElucHV0KCkgaW5uZXJFdmVudEN1c3RvbVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICAvKipcbiAgICogT3V0cHV0IGNsaWNrIGV2ZW50IGVtaXR0ZXJcbiAgICovXG4gIEBPdXRwdXQoKVxuICAgIGNsaWNrRW1pdHRlcjogQmVoYXZpb3JTdWJqZWN0PE5neFRpbWVsaW5lSXRlbT4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0KG51bGwpO1xuXG4gIGdyb3VwczogeyBba2V5OiBzdHJpbmddOiBOZ3hUaW1lbGluZUV2ZW50W10gfSA9IHt9O1xuICBwZXJpb2RzOiBOZ3hUaW1lbGluZUl0ZW1bXSA9IFtdO1xuICBpdGVtczogTmd4VGltZWxpbmVJdGVtW10gPSBbXTtcbiAgbmd4VGltZWxpbmVJdGVtUG9zaXRpb24gPSBOZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbjtcbiAgbmd4RGF0ZUZvcm1hdCA9IE5neERhdGVGb3JtYXQ7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBzZXBhcmF0b3IgPSAnLyc7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5ncm91cEV2ZW50cyh0aGlzLmV2ZW50cyk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgdGhpcy5ncm91cEV2ZW50cyh0aGlzLmV2ZW50cyk7XG4gIH1cblxuICBnZXRQZXJpb2RLZXlEYXRlRm9ybWF0KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHBlcmlvZEtleURhdGVGb3JtYXRbdGhpcy5ncm91cEV2ZW50XTtcbiAgfVxuXG4gIHByb3RlY3RlZCBjbGVhcigpOiB2b2lkIHtcbiAgICB0aGlzLmdyb3VwcyA9IHt9O1xuICAgIHRoaXMucGVyaW9kcyA9IFtdO1xuICAgIHRoaXMuaXRlbXMgPSBbXTtcbiAgfVxuXG4gIHByb3RlY3RlZCBncm91cEV2ZW50cyhldmVudHM6IE5neFRpbWVsaW5lRXZlbnRbXSk6IHZvaWQge1xuICAgIGlmIChldmVudHMpIHtcbiAgICAgIHRoaXMuY2xlYXIoKTtcbiAgICAgIHRoaXMuc29ydEV2ZW50cyhldmVudHMpO1xuICAgICAgdGhpcy5zZXRHcm91cHMoZXZlbnRzKTtcbiAgICAgIHRoaXMuc2V0UGVyaW9kcygpO1xuICAgICAgdGhpcy5zZXRJdGVtcygpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBzb3J0RXZlbnRzKGV2ZW50czogTmd4VGltZWxpbmVFdmVudFtdKTogdm9pZCB7XG4gICAgZXZlbnRzLnNvcnQoKGEsIGIpID0+IHtcbiAgICAgIGNvbnN0IGFUaW1lID0gYS50aW1lc3RhbXAuZ2V0VGltZSgpO1xuICAgICAgY29uc3QgYlRpbWUgPSBiLnRpbWVzdGFtcC5nZXRUaW1lKCk7XG4gICAgICByZXR1cm4gdGhpcy5yZXZlcnNlT3JkZXIgPyBiVGltZSAtIGFUaW1lIDogYVRpbWUgLSBiVGltZTt9KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBzZXRHcm91cHMoZXZlbnRzOiBOZ3hUaW1lbGluZUV2ZW50W10pOiB2b2lkIHtcbiAgICBldmVudHMuZm9yRWFjaCgoZXZlbnQpID0+IHtcbiAgICAgIC8vIGNvbnZlcnNpb24gZnJvbSBzdHJpbmcgdG8gYWN0dWFsIERhdGVcbiAgICAgIGV2ZW50LnRpbWVzdGFtcCA9IG5ldyBEYXRlKGV2ZW50LnRpbWVzdGFtcCk7XG4gICAgICBjb25zdCBwZXJpb2RLZXkgPSB0aGlzLmdldFBlcmlvZEtleUZyb21FdmVudChldmVudCk7XG4gICAgICBpZiAoIXRoaXMuZ3JvdXBzW3BlcmlvZEtleV0pIHtcbiAgICAgICAgdGhpcy5ncm91cHNbcGVyaW9kS2V5XSA9IFtdO1xuICAgICAgfVxuICAgICAgdGhpcy5ncm91cHNbcGVyaW9kS2V5XS5wdXNoKGV2ZW50KTtcbiAgICB9KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBzZXRJdGVtcygpOiB2b2lkIHtcbiAgICB0aGlzLnBlcmlvZHMuZm9yRWFjaCgocCkgPT4ge1xuICAgICAgLy8gaW5zZXJ0IGZpcnN0IHRoZSBwZXJpb2RcbiAgICAgIHRoaXMuaXRlbXMucHVzaChwKTtcbiAgICAgIC8vIGluIGVhY2ggcGVyaW9kIHB1dHRpbmcgaXRlbXMgb24gbGVmdFxuICAgICAgY29uc3Qgb25MZWZ0ID0gdHJ1ZTtcbiAgICAgIGNvbnN0IHBlcmlvZEluZm8gPSBwLnBlcmlvZEluZm87XG4gICAgICAvLyBpbnNlcnQgdGhlbiBhbGwgdGhlIGV2ZW50cyBpbiB0aGlzIHBlcmlvZFxuICAgICAgdGhpcy5hZGRQZXJpb2RFdmVudHMocGVyaW9kSW5mbywgb25MZWZ0KTtcbiAgICAgIC8vIG9uTGVmdCA9IHRoaXMuYWRkRXZlbnRJdGVtc0FuZEdldElmT25MZWZ0KHBlcmlvZEluZm8sIG9uTGVmdCk7XG4gICAgfSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgYWRkUGVyaW9kRXZlbnRzKHBlcmlvZEluZm86IE5neFRpbWVsaW5lUGVyaW9kSW5mbywgb25MZWZ0OiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5ncm91cHNbcGVyaW9kSW5mby5wZXJpb2RLZXldLmZvckVhY2goKGV2ZW50LCBpbmRleCkgPT4ge1xuICAgICAgY29uc3QgcHJldkV2ZW50ID0gdGhpcy5ncm91cHNbcGVyaW9kSW5mby5wZXJpb2RLZXldW2luZGV4IC0gMV07XG4gICAgICBpZiAoaW5kZXggPiAwICYmIHRoaXMuY29tcGFyZUV2ZW50cyhwcmV2RXZlbnQsIGV2ZW50KSkge1xuICAgICAgICBvbkxlZnQgPSAhb25MZWZ0O1xuICAgICAgfVxuICAgICAgdGhpcy5wdXNoRXZlbnRPbkl0ZW1zKGV2ZW50LCBvbkxlZnQpO1xuICAgIH0pO1xuICAgIC8vIHJldHVybiBvbkxlZnQ7XG4gIH1cblxuICBwcm90ZWN0ZWQgcHVzaEV2ZW50T25JdGVtcyhldmVudDogTmd4VGltZWxpbmVFdmVudCwgb25MZWZ0OiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5pdGVtcy5wdXNoKHtcbiAgICAgIGV2ZW50SW5mbzogey4uLmV2ZW50fSwgcG9zaXRpb246IG9uTGVmdCA/XG4gICAgICAgIHRoaXMubmd4VGltZWxpbmVJdGVtUG9zaXRpb24uT05fTEVGVCA6IHRoaXMubmd4VGltZWxpbmVJdGVtUG9zaXRpb24uT05fUklHSFQsXG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogQ29tcGFyZSB0aGUgZXZlbnRzIGluc2lkZSB0aGUgc2FtZSBncm91cFxuICAgKi9cbiAgcHJvdGVjdGVkIGNvbXBhcmVFdmVudHMocHJldkV2ZW50OiBOZ3hUaW1lbGluZUV2ZW50LCBldmVudDogTmd4VGltZWxpbmVFdmVudCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmNoYW5nZVNpZGVJbkdyb3VwID09PSBOZ3hUaW1lbGluZUV2ZW50Q2hhbmdlU2lkZUluR3JvdXAuQUxMIHx8XG4gICAgICB0aGlzLmNvbXBhcmVFdmVudHNGaWVsZChwcmV2RXZlbnQsIGV2ZW50LCAuLi5maWVsZHNUb0NoZWNrRXZlbnRDaGFuZ2VTaWRlSW5Hcm91cFt0aGlzLmNoYW5nZVNpZGVJbkdyb3VwXSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgY29tcGFyZUV2ZW50c0ZpZWxkKHByZXZFdmVudDogTmd4VGltZWxpbmVFdmVudCwgZXZlbnQ6IE5neFRpbWVsaW5lRXZlbnQsIC4uLmZpZWxkczogc3RyaW5nW10pOiBib29sZWFuIHtcbiAgICByZXR1cm4gZmllbGRzLnJlZHVjZSgocmVzLCBmaWVsZCkgPT4gcmVzID0gcmVzIHx8IHByZXZFdmVudC50aW1lc3RhbXBbZmllbGRdKCkgIT09IGV2ZW50LnRpbWVzdGFtcFtmaWVsZF0oKSwgISFmYWxzZSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgc2V0UGVyaW9kcygpOiB2b2lkIHtcbiAgICB0aGlzLnBlcmlvZHMgPSBPYmplY3Qua2V5cyh0aGlzLmdyb3VwcykubWFwKChwZXJpb2RLZXkpID0+IHtcbiAgICAgIGNvbnN0IHNwbGl0ID0gcGVyaW9kS2V5LnNwbGl0KHRoaXMuc2VwYXJhdG9yKTtcbiAgICAgIHJldHVybiB0aGlzLmdldFBlcmlvZEluZm8oc3BsaXQsIHBlcmlvZEtleSk7XG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIGdldFBlcmlvZEluZm8oc3BsaXQ6IHN0cmluZ1tdLCBwZXJpb2RLZXk6IHN0cmluZyk6IHsgcGVyaW9kSW5mbzogTmd4VGltZWxpbmVQZXJpb2RJbmZvIH0ge1xuICAgIHJldHVybiB7XG4gICAgICBwZXJpb2RJbmZvOiB7XG4gICAgICAgIHllYXI6IE51bWJlcihzcGxpdFswXSksXG4gICAgICAgIG1vbnRoOiBOdW1iZXIoc3BsaXRbMV0pLFxuICAgICAgICBkYXk6IE51bWJlcihzcGxpdFsyXSksXG4gICAgICAgIHBlcmlvZEtleSxcbiAgICAgICAgZmlyc3REYXRlOiB0aGlzLmdyb3Vwc1twZXJpb2RLZXldWzBdLnRpbWVzdGFtcCBhcyBEYXRlLFxuICAgICAgfSxcbiAgICB9O1xuICB9XG5cbiAgcHJvdGVjdGVkIGdldFBlcmlvZEtleUZyb21FdmVudChldmVudDogTmd4VGltZWxpbmVFdmVudCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGZpZWxkc1RvQWRkRXZlbnRHcm91cFt0aGlzLmdyb3VwRXZlbnRdLm1hcCgoZmllbGQpID0+IGV2ZW50LnRpbWVzdGFtcFtmaWVsZF0oKSkuam9pbih0aGlzLnNlcGFyYXRvcik7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJtYWluLWNvbnRhaW5lclwiPlxyXG4gIDxkaXYgY2xhc3M9XCJpdGVtcy1jb250YWluZXJcIj5cclxuICAgIDxkaXYgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXM7IGxldCBpbmRleCA9IGluZGV4O1wiIGNsYXNzPVwicm93XCI+XHJcbiAgICAgIDwhLS0gREVTS1RPUCAtLT5cclxuICAgICAgPGRpdiBjbGFzcz1cImNvbCBjb2wtbGVmdCBkZXNrdG9wXCIgW25nQ2xhc3NdPVwiaXRlbS5wZXJpb2RJbmZvID8gJ2NvbC1wZXJpb2QnIDogJ2NvbC1ldmVudCdcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZXZlbnQtb3V0ZXItY29udGFpbmVyXCIgKm5nSWY9XCJpdGVtLmV2ZW50SW5mbyAmJiBpdGVtLnBvc2l0aW9uID09PSBuZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbi5PTl9MRUZUXCI+XHJcbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZXZlbnRDdXN0b21UZW1wbGF0ZSB8fCBldmVudFRlbXBsYXRlOyBjb250ZXh0OiB7ZXZlbnQ6IGl0ZW0sIGNvbFNpZGVQb3NpdGlvbjogbmd4VGltZWxpbmVJdGVtUG9zaXRpb24uT05fTEVGVH1cIj48L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiaG91ciBsZWZ0XCIgKm5nSWY9XCJpdGVtLmV2ZW50SW5mbyAmJiBpdGVtLnBvc2l0aW9uID09PSBuZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbi5PTl9SSUdIVFwiPlxyXG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImRhdGVJbnN0YW50Q3VzdG9tVGVtcGxhdGUgfHwgZGF0ZUluc3RhbnRUZW1wbGF0ZTsgY29udGV4dDoge2l0ZW06IGl0ZW0uZXZlbnRJbmZvfVwiID48L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8ZGl2IGNsYXNzPVwiY29sIGNvbC1jZW50ZXIgZGVza3RvcFwiIFtuZ0NsYXNzXT1cIml0ZW0ucGVyaW9kSW5mbyA/ICdjb2wtcGVyaW9kJyA6ICdjb2wtZXZlbnQnXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImNlbnRlci1pbm5lclwiICpuZ0lmPVwiaXRlbS5wZXJpb2RJbmZvXCI+XHJcbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicGVyaW9kQ3VzdG9tVGVtcGxhdGUgfHwgcGVyaW9kVGVtcGxhdGU7IGNvbnRleHQ6IHtwZXJpb2Q6IGl0ZW0ucGVyaW9kSW5mbywgaW5kZXg6IGluZGV4fVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjZW50ZXItaW5uZXIgbm8tcGVyaW9kLWtleVwiICpuZ0lmPVwiIWl0ZW0ucGVyaW9kSW5mb1wiPlxyXG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNlbnRlckxpbmVzSWNvblRlbXBsYXRlOyBjb250ZXh0OiB7aW5kZXg6IGluZGV4fVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICAgIDxkaXYgY2xhc3M9XCJjb2wgY29sLXJpZ2h0IGRlc2t0b3BcIiBbbmdDbGFzc109XCJpdGVtLnBlcmlvZEluZm8gPyAnY29sLXBlcmlvZCcgOiAnY29sLWV2ZW50J1wiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJldmVudC1vdXRlci1jb250YWluZXJcIiAqbmdJZj1cIml0ZW0uZXZlbnRJbmZvICYmIGl0ZW0ucG9zaXRpb24gPT09IG5neFRpbWVsaW5lSXRlbVBvc2l0aW9uLk9OX1JJR0hUXCI+XHJcbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZXZlbnRDdXN0b21UZW1wbGF0ZSB8fCBldmVudFRlbXBsYXRlOyBjb250ZXh0OiB7ZXZlbnQ6IGl0ZW0sIGNvbFNpZGVQb3NpdGlvbjogbmd4VGltZWxpbmVJdGVtUG9zaXRpb24uT05fUklHSFR9XCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImhvdXIgcmlnaHRcIiAqbmdJZj1cIml0ZW0uZXZlbnRJbmZvICYmIGl0ZW0ucG9zaXRpb24gPT09IG5neFRpbWVsaW5lSXRlbVBvc2l0aW9uLk9OX0xFRlRcIj5cclxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJkYXRlSW5zdGFudEN1c3RvbVRlbXBsYXRlIHx8IGRhdGVJbnN0YW50VGVtcGxhdGU7IGNvbnRleHQ6IHtpdGVtOiBpdGVtLmV2ZW50SW5mb31cIiA+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgPCEtLSBNT0JJTEUgLS0+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJjb2wgY29sLWxlZnQgbW9iaWxlXCIgW25nQ2xhc3NdPVwiaXRlbS5wZXJpb2RJbmZvID8gJ2NvbC1wZXJpb2QnIDogJ2NvbC1ldmVudCdcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiaG91ciBsZWZ0XCIgKm5nSWY9XCJpdGVtLmV2ZW50SW5mb1wiPlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImhvdXItaW5uZXItY29udGFpbmVyXCI+XHJcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJkYXRlSW5zdGFudEN1c3RvbVRlbXBsYXRlIHx8IGRhdGVJbnN0YW50VGVtcGxhdGU7IGNvbnRleHQ6IHtpdGVtOiBpdGVtLmV2ZW50SW5mb31cIiA+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8ZGl2IGNsYXNzPVwiY29sIGNvbC1jZW50ZXIgbW9iaWxlXCIgW25nQ2xhc3NdPVwiaXRlbS5wZXJpb2RJbmZvID8gJ2NvbC1wZXJpb2QnIDogJ2NvbC1ldmVudCdcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2VudGVyLWlubmVyXCIgKm5nSWY9XCJpdGVtLnBlcmlvZEluZm87XCI+XHJcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJwZXJpb2RDdXN0b21UZW1wbGF0ZSB8fCBwZXJpb2RUZW1wbGF0ZTsgY29udGV4dDoge3BlcmlvZDogaXRlbS5wZXJpb2RJbmZvLCBpbmRleDogaW5kZXh9XCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImNlbnRlci1pbm5lciBuby1wZXJpb2Qta2V5XCIgKm5nSWY9XCIhaXRlbS5wZXJpb2RJbmZvO1wiPlxyXG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNlbnRlckxpbmVzSWNvblRlbXBsYXRlO2NvbnRleHQ6IHtpbmRleDogaW5kZXh9XCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgPGRpdiBjbGFzcz1cImNvbCBjb2wtcmlnaHQgbW9iaWxlXCIgW25nQ2xhc3NdPVwiaXRlbS5wZXJpb2RJbmZvID8gJ2NvbC1wZXJpb2QnIDogJ2NvbC1ldmVudCdcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZXZlbnQtb3V0ZXItY29udGFpbmVyXCIgKm5nSWY9XCJpdGVtLmV2ZW50SW5mb1wiPlxyXG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImV2ZW50Q3VzdG9tVGVtcGxhdGUgfHwgZXZlbnRUZW1wbGF0ZTsgY29udGV4dDoge2V2ZW50OiBpdGVtLCBjb2xTaWRlUG9zaXRpb246IG5neFRpbWVsaW5lSXRlbVBvc2l0aW9uLk9OX1JJR0hUfVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuXHJcblxyXG48bmctdGVtcGxhdGUgI2NlbnRlckxpbmVzSWNvblRlbXBsYXRlIGxldC1pbmRleD1pbmRleD5cclxuICA8ZGl2IGNsYXNzPVwibGluZVwiPjwvZGl2PlxyXG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjZW50ZXJJY29uQ3VzdG9tVGVtcGxhdGUgfHwgY2VudGVySWNvblRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XHJcbiAgPGRpdiBbbmdDbGFzc109XCJ7J3RyYW5zcGFyZW50IGxhc3QtbGluZSc6IGluZGV4ID09PSBpdGVtcy5sZW5ndGggLSAxfVwiIGNsYXNzPVwibGluZVwiPjwvZGl2PlxyXG48L25nLXRlbXBsYXRlPlxyXG5cclxuPG5nLXRlbXBsYXRlICNjZW50ZXJJY29uVGVtcGxhdGU+XHJcbiAgPGRpdiBjbGFzcz1cImNlbnRlci1pY29uLWNvbnRhaW5lclwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImljb25cIj48L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcbjxuZy10ZW1wbGF0ZSAjZGF0ZUluc3RhbnRUZW1wbGF0ZSBsZXQtaXRlbT1pdGVtPlxyXG4gIDxzcGFuPlxyXG4gICAge3tpdGVtPy50aW1lc3RhbXAgfCBuZ3hkYXRlIDogbmd4RGF0ZUZvcm1hdC5IT1VSU19NSU5VVEVTIDogbGFuZ0NvZGV9fVxyXG4gIDwvc3Bhbj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcbjxuZy10ZW1wbGF0ZSAjcGVyaW9kVGVtcGxhdGUgbGV0LXBlcmlvZD1wZXJpb2QgbGV0LWluZGV4PWluZGV4PlxyXG4gIDxkaXYgW25nQ2xhc3NdPVwieyd0cmFuc3BhcmVudCBmaXJzdC1saW5lJzogIWluZGV4fVwiIGNsYXNzPVwibGluZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJwZXJpb2QtY29udGFpbmVyXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwicGVyaW9kLWlubmVyLWNvbnRhaW5lclwiPlxyXG4gICAgICA8c3Bhbj57e3BlcmlvZD8uZmlyc3REYXRlIHwgbmd4ZGF0ZSA6IGdldFBlcmlvZEtleURhdGVGb3JtYXQoKSA6IGxhbmdDb2RlfX08L3NwYW4+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwibGluZVwiPjwvZGl2PlxyXG48L25nLXRlbXBsYXRlPlxyXG5cclxuPG5nLXRlbXBsYXRlICNldmVudFRlbXBsYXRlIGxldC1ldmVudD1ldmVudCBsZXQtY29sU2lkZVBvc2l0aW9uPWNvbFNpZGVQb3NpdGlvbj5cclxuICA8bmd4LXRpbWVsaW5lLWV2ZW50XHJcbiAgICBbZXZlbnRdPVwiZXZlbnRcIlxyXG4gICAgW2xhbmdDb2RlXT1cImxhbmdDb2RlXCJcclxuICAgIFtlbmFibGVBbmltYXRpb25dPVwiZW5hYmxlQW5pbWF0aW9uXCJcclxuICAgIFtpbm5lckV2ZW50Q3VzdG9tVGVtcGxhdGVdPVwiaW5uZXJFdmVudEN1c3RvbVRlbXBsYXRlXCJcclxuICAgIFtjb2xTaWRlUG9zaXRpb25dPVwiY29sU2lkZVBvc2l0aW9uXCJcclxuICAgIChjbGlja0VtaXR0ZXIpPVwiY2xpY2tFbWl0dGVyLm5leHQoJGV2ZW50KVwiPlxyXG4gIDwvbmd4LXRpbWVsaW5lLWV2ZW50PlxyXG48L25nLXRlbXBsYXRlPlxyXG5cclxuIl19
package/fesm2015/frxjs-ngx-timeline.mjs CHANGED
@@ -192,6 +192,10 @@ class NgxTimelineComponent {
192
192
  * Boolean used to enable or disable the animations
193
193
  */
194
194
  this.enableAnimation = true;
195
+ /**
196
+ * Boolean used to reverse sort order (default older first)
197
+ */
198
+ this.reverseOrder = false;
195
199
  /**
196
200
  * Logic to be applied in order to group events
197
201
  */
@@ -235,7 +239,11 @@ class NgxTimelineComponent {
235
239
  }
236
240
  }
237
241
  sortEvents(events) {
238
- events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
242
+ events.sort((a, b) => {
243
+ const aTime = a.timestamp.getTime();
244
+ const bTime = b.timestamp.getTime();
245
+ return this.reverseOrder ? bTime - aTime : aTime - bTime;
246
+ });
239
247
  }
240
248
  setGroups(events) {
241
249
  events.forEach((event) => {
@@ -308,7 +316,7 @@ class NgxTimelineComponent {
308
316
  }
309
317
  }
310
318
  NgxTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
311
- NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", groupEvent: "groupEvent", changeSideInGroup: "changeSideInGroup", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], components: [{ type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "ngxdate": NgxDatePipe } });
319
+ NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", groupEvent: "groupEvent", changeSideInGroup: "changeSideInGroup", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], components: [{ type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "ngxdate": NgxDatePipe } });
312
320
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
313
321
  type: Component,
314
322
  args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
@@ -318,6 +326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
318
326
  type: Input
319
327
  }], enableAnimation: [{
320
328
  type: Input
329
+ }], reverseOrder: [{
330
+ type: Input
321
331
  }], groupEvent: [{
322
332
  type: Input
323
333
  }], changeSideInGroup: [{
package/fesm2015/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'];\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};\n\nexport enum NgxDateFormat {\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n FULL_DATE = 'FULL_DATE',\n MONTH_YEAR = 'MONTH_YEAR',\n HOURS_MINUTES = 'HOURS_MINUTES',\n YEAR = 'YEAR'\n}\n\nexport const fieldConfigDate = {\n MONTH_YEAR: 'monthYear',\n YEAR: 'year',\n HOURS_MINUTES: 'hoursMinutes',\n FULL_DATE: 'fullDate',\n DAY_MONTH_YEAR: 'dayMonthYear',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n YEAR = 'YEAR',\n MONTH_YEAR = 'MONTH_YEAR',\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'\n}\n\nexport const fieldsToAddEventGroup = {\n YEAR: ['getFullYear'],\n MONTH_YEAR: ['getFullYear', 'getMonth'],\n DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat = {\n YEAR: NgxDateFormat.YEAR,\n MONTH_YEAR: NgxDateFormat.MONTH_YEAR,\n DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,\n};\n\n/**\n * Enum used to set the change side event logic\n */\nexport enum NgxTimelineEventChangeSideInGroup {\n ALL = 'ALL',\n ON_DIFFERENT_HMS = 'ON_DIFFERENT_HMS',\n ON_DIFFERENT_DAY = 'ON_DIFFERENT_DAY',\n ON_DIFFERENT_MONTH = 'ON_DIFFERENT_MONTH'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n ON_DIFFERENT_MONTH: ['getFullYear', 'getMonth'],\n ON_DIFFERENT_DAY: ['getFullYear', 'getMonth', 'getDate'],\n ON_DIFFERENT_HMS: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],\n};\n","/**\n * Event to be provided from outside the timeline\n */\nexport interface NgxTimelineEvent {\n timestamp?: Date;\n title?: string;\n description?: string;\n id?: any;\n}\n\nexport interface NgxTimelinePeriodInfo {\n periodKey?: string;\n year?: number;\n month?: number;\n day?: number;\n firstDate?: any;\n}\n\n/**\n * Item used inside the timeline\n */\nexport interface NgxTimelineItem {\n type?: string;\n position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;\n periodInfo?: NgxTimelinePeriodInfo;\n eventInfo?: NgxTimelineEvent;\n}\n\nexport enum NgxTimelineItemPosition {\n ON_LEFT = 'ON_LEFT',\n ON_RIGHT = 'ON_RIGHT'\n}\n","import {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\nimport {DatePipe} from '@angular/common';\nimport {BehaviorSubject} from 'rxjs';\nimport {supportedLanguageCodes} from '../../models';\n\n@Component({\n selector: 'ngx-timeline-event',\n templateUrl: './ngx-timeline-event.component.html',\n styleUrls: ['./ngx-timeline-event.component.scss'],\n})\nexport class NgxTimelineEventComponent {\n /**\n * Event to be displayed\n */\n @Input() event: NgxTimelineItem;\n /**\n * Event position respect to the vertical line (LEFT or RIGHT)\n */\n @Input() colSidePosition: NgxTimelineItemPosition;\n /**\n * Language code used to format the dates\n */\n @Input() langCode?: string;\n /**\n * Inner custom template used to display the event detail\n */\n @Input() innerEventCustomTemplate?: TemplateRef<any>;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Output click event emitter\n */\n @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n\n private readonly monthAbbr = 'MMM';\n private readonly dayFormat = 'dd';\n\n constructor() { }\n\n getDateObj(): any {\n let day;\n let month;\n let year;\n const dateTimestamp = this.event?.eventInfo?.timestamp;\n if (dateTimestamp) {\n const timestamp = new Date(dateTimestamp);\n const langCode = this.getLangCode();\n month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);\n day = new DatePipe(langCode).transform(timestamp, this.dayFormat);\n year = timestamp.getFullYear();\n }\n\n return {day, month, year};\n }\n\n protected getLangCode(): string {\n return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];\n }\n}\n","<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\">\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr/>\n </div>\n\n <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\nimport {NgxConfigDate, NgxDateObjMap, NgxDateFormat, supportedLanguageCodes, fieldConfigDate, dateConfigMap} from '../models';\n\n@Pipe({name: 'ngxdate', pure: false})\nexport class NgxDatePipe implements PipeTransform {\n constructor() {\n }\n\n transform(date: Date | string, dateFormat?: string, langCode?: string): string {\n let transformedDate = null;\n if (date) {\n const objDate = this.getDateConfig(langCode);\n transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));\n }\n return transformedDate;\n }\n\n private dateFormat(dateFormat: string, configDate: NgxConfigDate): string {\n return configDate[fieldConfigDate[dateFormat]];\n }\n\n private getDateConfig(langCode: string): NgxConfigDate {\n const code = langCode || supportedLanguageCodes[0];\n const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];\n return configDate;\n }\n}\n","import {Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output} from '@angular/core';\nimport {\n NgxTimelineEvent,\n NgxTimelineItem,\n NgxTimelineItemPosition,\n NgxTimelinePeriodInfo,\n NgxDateFormat,\n NgxTimelineEventGroup,\n NgxTimelineEventChangeSideInGroup,\n periodKeyDateFormat,\n fieldsToCheckEventChangeSideInGroup,\n fieldsToAddEventGroup} from '../models';\nimport {BehaviorSubject} from 'rxjs';\n\n@Component({\n selector: 'ngx-timeline',\n templateUrl: './ngx-timeline.component.html',\n styleUrls: ['./ngx-timeline.scss'],\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges {\n /**\n * List of events to be displayed\n */\n @Input() events: NgxTimelineEvent[];\n /**\n * Language code used to show the date formatted\n */\n @Input() langCode?: string;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Logic to be applied in order to group events\n */\n @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;\n /**\n * Logic to be applied in order to put evetns on LEFT or RIGHT\n */\n @Input() changeSideInGroup?: NgxTimelineEventChangeSideInGroup = NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY;\n /**\n * Custom Template displayed before a group of events\n */\n @Input() periodCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show a single event\n */\n @Input() eventCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show an separator icon\n */\n @Input() centerIconCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the side date\n */\n @Input() dateInstantCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the inner event\n */\n @Input() innerEventCustomTemplate: TemplateRef<any>;\n /**\n * Output click event emitter\n */\n @Output()\n clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n groups: { [key: string]: NgxTimelineEvent[] } = {};\n periods: NgxTimelineItem[] = [];\n items: NgxTimelineItem[] = [];\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n ngxDateFormat = NgxDateFormat;\n\n private readonly separator = '/';\n\n constructor() {}\n\n\n ngOnInit(): void {\n this.groupEvents(this.events);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.groupEvents(this.events);\n }\n\n getPeriodKeyDateFormat(): string {\n return periodKeyDateFormat[this.groupEvent];\n }\n\n protected clear(): void {\n this.groups = {};\n this.periods = [];\n this.items = [];\n }\n\n protected groupEvents(events: NgxTimelineEvent[]): void {\n if (events) {\n this.clear();\n this.sortEvents(events);\n this.setGroups(events);\n this.setPeriods();\n this.setItems();\n }\n }\n\n protected sortEvents(events: NgxTimelineEvent[]): void {\n events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());\n }\n\n protected setGroups(events: NgxTimelineEvent[]): void {\n events.forEach((event) => {\n // conversion from string to actual Date\n event.timestamp = new Date(event.timestamp);\n const periodKey = this.getPeriodKeyFromEvent(event);\n if (!this.groups[periodKey]) {\n this.groups[periodKey] = [];\n }\n this.groups[periodKey].push(event);\n });\n }\n\n protected setItems(): void {\n this.periods.forEach((p) => {\n // insert first the period\n this.items.push(p);\n // in each period putting items on left\n const onLeft = true;\n const periodInfo = p.periodInfo;\n // insert then all the events in this period\n this.addPeriodEvents(periodInfo, onLeft);\n // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n });\n }\n\n protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void {\n this.groups[periodInfo.periodKey].forEach((event, index) => {\n const prevEvent = this.groups[periodInfo.periodKey][index - 1];\n if (index > 0 && this.compareEvents(prevEvent, event)) {\n onLeft = !onLeft;\n }\n this.pushEventOnItems(event, onLeft);\n });\n // return onLeft;\n }\n\n protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {\n this.items.push({\n eventInfo: {...event}, position: onLeft ?\n this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,\n });\n }\n\n /**\n * Compare the events inside the same group\n */\n protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {\n return this.changeSideInGroup === NgxTimelineEventChangeSideInGroup.ALL ||\n this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSideInGroup]);\n }\n\n protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {\n return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);\n }\n\n protected setPeriods(): void {\n this.periods = Object.keys(this.groups).map((periodKey) => {\n const split = periodKey.split(this.separator);\n return this.getPeriodInfo(split, periodKey);\n });\n }\n\n private getPeriodInfo(split: string[], periodKey: string): { periodInfo: NgxTimelinePeriodInfo } {\n return {\n periodInfo: {\n year: Number(split[0]),\n month: Number(split[1]),\n day: Number(split[2]),\n periodKey,\n firstDate: this.groups[periodKey][0].timestamp as Date,\n },\n };\n }\n\n protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);\n }\n}\n","<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import {NgModule} from '@angular/core';\nimport {NgxTimelineComponent} from './components/ngx-timeline.component';\nimport {NgxTimelineEventComponent} \n from './components/ngx-timeline-event/ngx-timeline-event.component';\nimport {CommonModule, registerLocaleData} from '@angular/common';\nimport {NgxDatePipe} from './pipes/ngx-date-pipe';\nimport localeIt from '@angular/common/locales/it';\nimport localeFr from '@angular/common/locales/fr';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\n\n@NgModule({\n declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\n imports: [CommonModule],\n exports: [NgxTimelineComponent, NgxDatePipe],\n})\nexport class NgxTimelineModule { }\n","/*\n * Public API Surface of ngx-timeline\n */\nexport * from './lib/components';\nexport * from './lib/models';\nexport * from './lib/pipes/';\nexport * from './lib/ngx-timeline.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
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'];\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};\n\nexport enum NgxDateFormat {\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n FULL_DATE = 'FULL_DATE',\n MONTH_YEAR = 'MONTH_YEAR',\n HOURS_MINUTES = 'HOURS_MINUTES',\n YEAR = 'YEAR'\n}\n\nexport const fieldConfigDate = {\n MONTH_YEAR: 'monthYear',\n YEAR: 'year',\n HOURS_MINUTES: 'hoursMinutes',\n FULL_DATE: 'fullDate',\n DAY_MONTH_YEAR: 'dayMonthYear',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n YEAR = 'YEAR',\n MONTH_YEAR = 'MONTH_YEAR',\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'\n}\n\nexport const fieldsToAddEventGroup = {\n YEAR: ['getFullYear'],\n MONTH_YEAR: ['getFullYear', 'getMonth'],\n DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat = {\n YEAR: NgxDateFormat.YEAR,\n MONTH_YEAR: NgxDateFormat.MONTH_YEAR,\n DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,\n};\n\n/**\n * Enum used to set the change side event logic\n */\nexport enum NgxTimelineEventChangeSideInGroup {\n ALL = 'ALL',\n ON_DIFFERENT_HMS = 'ON_DIFFERENT_HMS',\n ON_DIFFERENT_DAY = 'ON_DIFFERENT_DAY',\n ON_DIFFERENT_MONTH = 'ON_DIFFERENT_MONTH'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n ON_DIFFERENT_MONTH: ['getFullYear', 'getMonth'],\n ON_DIFFERENT_DAY: ['getFullYear', 'getMonth', 'getDate'],\n ON_DIFFERENT_HMS: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],\n};\n","/**\n * Event to be provided from outside the timeline\n */\nexport interface NgxTimelineEvent {\n timestamp?: Date;\n title?: string;\n description?: string;\n id?: any;\n}\n\nexport interface NgxTimelinePeriodInfo {\n periodKey?: string;\n year?: number;\n month?: number;\n day?: number;\n firstDate?: any;\n}\n\n/**\n * Item used inside the timeline\n */\nexport interface NgxTimelineItem {\n type?: string;\n position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;\n periodInfo?: NgxTimelinePeriodInfo;\n eventInfo?: NgxTimelineEvent;\n}\n\nexport enum NgxTimelineItemPosition {\n ON_LEFT = 'ON_LEFT',\n ON_RIGHT = 'ON_RIGHT'\n}\n","import {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\nimport {DatePipe} from '@angular/common';\nimport {BehaviorSubject} from 'rxjs';\nimport {supportedLanguageCodes} from '../../models';\n\n@Component({\n selector: 'ngx-timeline-event',\n templateUrl: './ngx-timeline-event.component.html',\n styleUrls: ['./ngx-timeline-event.component.scss'],\n})\nexport class NgxTimelineEventComponent {\n /**\n * Event to be displayed\n */\n @Input() event: NgxTimelineItem;\n /**\n * Event position respect to the vertical line (LEFT or RIGHT)\n */\n @Input() colSidePosition: NgxTimelineItemPosition;\n /**\n * Language code used to format the dates\n */\n @Input() langCode?: string;\n /**\n * Inner custom template used to display the event detail\n */\n @Input() innerEventCustomTemplate?: TemplateRef<any>;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Output click event emitter\n */\n @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n\n private readonly monthAbbr = 'MMM';\n private readonly dayFormat = 'dd';\n\n constructor() { }\n\n getDateObj(): any {\n let day;\n let month;\n let year;\n const dateTimestamp = this.event?.eventInfo?.timestamp;\n if (dateTimestamp) {\n const timestamp = new Date(dateTimestamp);\n const langCode = this.getLangCode();\n month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);\n day = new DatePipe(langCode).transform(timestamp, this.dayFormat);\n year = timestamp.getFullYear();\n }\n\n return {day, month, year};\n }\n\n protected getLangCode(): string {\n return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];\n }\n}\n","<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\">\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr/>\n </div>\n\n <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\nimport {NgxConfigDate, NgxDateObjMap, NgxDateFormat, supportedLanguageCodes, fieldConfigDate, dateConfigMap} from '../models';\n\n@Pipe({name: 'ngxdate', pure: false})\nexport class NgxDatePipe implements PipeTransform {\n constructor() {\n }\n\n transform(date: Date | string, dateFormat?: string, langCode?: string): string {\n let transformedDate = null;\n if (date) {\n const objDate = this.getDateConfig(langCode);\n transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));\n }\n return transformedDate;\n }\n\n private dateFormat(dateFormat: string, configDate: NgxConfigDate): string {\n return configDate[fieldConfigDate[dateFormat]];\n }\n\n private getDateConfig(langCode: string): NgxConfigDate {\n const code = langCode || supportedLanguageCodes[0];\n const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];\n return configDate;\n }\n}\n","import {Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output} from '@angular/core';\nimport {\n NgxTimelineEvent,\n NgxTimelineItem,\n NgxTimelineItemPosition,\n NgxTimelinePeriodInfo,\n NgxDateFormat,\n NgxTimelineEventGroup,\n NgxTimelineEventChangeSideInGroup,\n periodKeyDateFormat,\n fieldsToCheckEventChangeSideInGroup,\n fieldsToAddEventGroup} from '../models';\nimport {BehaviorSubject} from 'rxjs';\n\n@Component({\n selector: 'ngx-timeline',\n templateUrl: './ngx-timeline.component.html',\n styleUrls: ['./ngx-timeline.scss'],\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges {\n /**\n * List of events to be displayed\n */\n @Input() events: NgxTimelineEvent[];\n /**\n * Language code used to show the date formatted\n */\n @Input() langCode?: string;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Boolean used to reverse sort order (default older first)\n */\n @Input() reverseOrder = false;\n /**\n * Logic to be applied in order to group events\n */\n @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;\n /**\n * Logic to be applied in order to put evetns on LEFT or RIGHT\n */\n @Input() changeSideInGroup?: NgxTimelineEventChangeSideInGroup = NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY;\n /**\n * Custom Template displayed before a group of events\n */\n @Input() periodCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show a single event\n */\n @Input() eventCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show an separator icon\n */\n @Input() centerIconCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the side date\n */\n @Input() dateInstantCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the inner event\n */\n @Input() innerEventCustomTemplate: TemplateRef<any>;\n /**\n * Output click event emitter\n */\n @Output()\n clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n groups: { [key: string]: NgxTimelineEvent[] } = {};\n periods: NgxTimelineItem[] = [];\n items: NgxTimelineItem[] = [];\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n ngxDateFormat = NgxDateFormat;\n\n private readonly separator = '/';\n\n constructor() {}\n\n\n ngOnInit(): void {\n this.groupEvents(this.events);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.groupEvents(this.events);\n }\n\n getPeriodKeyDateFormat(): string {\n return periodKeyDateFormat[this.groupEvent];\n }\n\n protected clear(): void {\n this.groups = {};\n this.periods = [];\n this.items = [];\n }\n\n protected groupEvents(events: NgxTimelineEvent[]): void {\n if (events) {\n this.clear();\n this.sortEvents(events);\n this.setGroups(events);\n this.setPeriods();\n this.setItems();\n }\n }\n\n protected sortEvents(events: NgxTimelineEvent[]): void {\n events.sort((a, b) => {\n const aTime = a.timestamp.getTime();\n const bTime = b.timestamp.getTime();\n return this.reverseOrder ? bTime - aTime : aTime - bTime;});\n }\n\n protected setGroups(events: NgxTimelineEvent[]): void {\n events.forEach((event) => {\n // conversion from string to actual Date\n event.timestamp = new Date(event.timestamp);\n const periodKey = this.getPeriodKeyFromEvent(event);\n if (!this.groups[periodKey]) {\n this.groups[periodKey] = [];\n }\n this.groups[periodKey].push(event);\n });\n }\n\n protected setItems(): void {\n this.periods.forEach((p) => {\n // insert first the period\n this.items.push(p);\n // in each period putting items on left\n const onLeft = true;\n const periodInfo = p.periodInfo;\n // insert then all the events in this period\n this.addPeriodEvents(periodInfo, onLeft);\n // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n });\n }\n\n protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void {\n this.groups[periodInfo.periodKey].forEach((event, index) => {\n const prevEvent = this.groups[periodInfo.periodKey][index - 1];\n if (index > 0 && this.compareEvents(prevEvent, event)) {\n onLeft = !onLeft;\n }\n this.pushEventOnItems(event, onLeft);\n });\n // return onLeft;\n }\n\n protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {\n this.items.push({\n eventInfo: {...event}, position: onLeft ?\n this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,\n });\n }\n\n /**\n * Compare the events inside the same group\n */\n protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {\n return this.changeSideInGroup === NgxTimelineEventChangeSideInGroup.ALL ||\n this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSideInGroup]);\n }\n\n protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {\n return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);\n }\n\n protected setPeriods(): void {\n this.periods = Object.keys(this.groups).map((periodKey) => {\n const split = periodKey.split(this.separator);\n return this.getPeriodInfo(split, periodKey);\n });\n }\n\n private getPeriodInfo(split: string[], periodKey: string): { periodInfo: NgxTimelinePeriodInfo } {\n return {\n periodInfo: {\n year: Number(split[0]),\n month: Number(split[1]),\n day: Number(split[2]),\n periodKey,\n firstDate: this.groups[periodKey][0].timestamp as Date,\n },\n };\n }\n\n protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);\n }\n}\n","<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import {NgModule} from '@angular/core';\nimport {NgxTimelineComponent} from './components/ngx-timeline.component';\nimport {NgxTimelineEventComponent} \n from './components/ngx-timeline-event/ngx-timeline-event.component';\nimport {CommonModule, registerLocaleData} from '@angular/common';\nimport {NgxDatePipe} from './pipes/ngx-date-pipe';\nimport localeIt from '@angular/common/locales/it';\nimport localeFr from '@angular/common/locales/fr';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\n\n@NgModule({\n declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\n imports: [CommonModule],\n exports: [NgxTimelineComponent, NgxDatePipe],\n})\nexport class NgxTimelineModule { }\n","/*\n * Public API Surface of ngx-timeline\n */\nexport * from './lib/components';\nexport * from './lib/models';\nexport * from './lib/pipes/';\nexport * from './lib/ngx-timeline.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2020/frxjs-ngx-timeline.mjs CHANGED
@@ -191,6 +191,10 @@ class NgxTimelineComponent {
191
191
  * Boolean used to enable or disable the animations
192
192
  */
193
193
  this.enableAnimation = true;
194
+ /**
195
+ * Boolean used to reverse sort order (default older first)
196
+ */
197
+ this.reverseOrder = false;
194
198
  /**
195
199
  * Logic to be applied in order to group events
196
200
  */
@@ -234,7 +238,11 @@ class NgxTimelineComponent {
234
238
  }
235
239
  }
236
240
  sortEvents(events) {
237
- events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
241
+ events.sort((a, b) => {
242
+ const aTime = a.timestamp.getTime();
243
+ const bTime = b.timestamp.getTime();
244
+ return this.reverseOrder ? bTime - aTime : aTime - bTime;
245
+ });
238
246
  }
239
247
  setGroups(events) {
240
248
  events.forEach((event) => {
@@ -307,7 +315,7 @@ class NgxTimelineComponent {
307
315
  }
308
316
  }
309
317
  NgxTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
310
- NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", groupEvent: "groupEvent", changeSideInGroup: "changeSideInGroup", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], components: [{ type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "ngxdate": NgxDatePipe } });
318
+ NgxTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", groupEvent: "groupEvent", changeSideInGroup: "changeSideInGroup", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], components: [{ type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "ngxdate": NgxDatePipe } });
311
319
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
312
320
  type: Component,
313
321
  args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.row{display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:absolute;height:10px;width:10px;background:white}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
@@ -317,6 +325,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
317
325
  type: Input
318
326
  }], enableAnimation: [{
319
327
  type: Input
328
+ }], reverseOrder: [{
329
+ type: Input
320
330
  }], groupEvent: [{
321
331
  type: Input
322
332
  }], changeSideInGroup: [{
package/fesm2020/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'];\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};\n\nexport enum NgxDateFormat {\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n FULL_DATE = 'FULL_DATE',\n MONTH_YEAR = 'MONTH_YEAR',\n HOURS_MINUTES = 'HOURS_MINUTES',\n YEAR = 'YEAR'\n}\n\nexport const fieldConfigDate = {\n MONTH_YEAR: 'monthYear',\n YEAR: 'year',\n HOURS_MINUTES: 'hoursMinutes',\n FULL_DATE: 'fullDate',\n DAY_MONTH_YEAR: 'dayMonthYear',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n YEAR = 'YEAR',\n MONTH_YEAR = 'MONTH_YEAR',\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'\n}\n\nexport const fieldsToAddEventGroup = {\n YEAR: ['getFullYear'],\n MONTH_YEAR: ['getFullYear', 'getMonth'],\n DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat = {\n YEAR: NgxDateFormat.YEAR,\n MONTH_YEAR: NgxDateFormat.MONTH_YEAR,\n DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,\n};\n\n/**\n * Enum used to set the change side event logic\n */\nexport enum NgxTimelineEventChangeSideInGroup {\n ALL = 'ALL',\n ON_DIFFERENT_HMS = 'ON_DIFFERENT_HMS',\n ON_DIFFERENT_DAY = 'ON_DIFFERENT_DAY',\n ON_DIFFERENT_MONTH = 'ON_DIFFERENT_MONTH'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n ON_DIFFERENT_MONTH: ['getFullYear', 'getMonth'],\n ON_DIFFERENT_DAY: ['getFullYear', 'getMonth', 'getDate'],\n ON_DIFFERENT_HMS: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],\n};\n","/**\n * Event to be provided from outside the timeline\n */\nexport interface NgxTimelineEvent {\n timestamp?: Date;\n title?: string;\n description?: string;\n id?: any;\n}\n\nexport interface NgxTimelinePeriodInfo {\n periodKey?: string;\n year?: number;\n month?: number;\n day?: number;\n firstDate?: any;\n}\n\n/**\n * Item used inside the timeline\n */\nexport interface NgxTimelineItem {\n type?: string;\n position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;\n periodInfo?: NgxTimelinePeriodInfo;\n eventInfo?: NgxTimelineEvent;\n}\n\nexport enum NgxTimelineItemPosition {\n ON_LEFT = 'ON_LEFT',\n ON_RIGHT = 'ON_RIGHT'\n}\n","import {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\nimport {DatePipe} from '@angular/common';\nimport {BehaviorSubject} from 'rxjs';\nimport {supportedLanguageCodes} from '../../models';\n\n@Component({\n selector: 'ngx-timeline-event',\n templateUrl: './ngx-timeline-event.component.html',\n styleUrls: ['./ngx-timeline-event.component.scss'],\n})\nexport class NgxTimelineEventComponent {\n /**\n * Event to be displayed\n */\n @Input() event: NgxTimelineItem;\n /**\n * Event position respect to the vertical line (LEFT or RIGHT)\n */\n @Input() colSidePosition: NgxTimelineItemPosition;\n /**\n * Language code used to format the dates\n */\n @Input() langCode?: string;\n /**\n * Inner custom template used to display the event detail\n */\n @Input() innerEventCustomTemplate?: TemplateRef<any>;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Output click event emitter\n */\n @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n\n private readonly monthAbbr = 'MMM';\n private readonly dayFormat = 'dd';\n\n constructor() { }\n\n getDateObj(): any {\n let day;\n let month;\n let year;\n const dateTimestamp = this.event?.eventInfo?.timestamp;\n if (dateTimestamp) {\n const timestamp = new Date(dateTimestamp);\n const langCode = this.getLangCode();\n month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);\n day = new DatePipe(langCode).transform(timestamp, this.dayFormat);\n year = timestamp.getFullYear();\n }\n\n return {day, month, year};\n }\n\n protected getLangCode(): string {\n return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];\n }\n}\n","<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\">\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr/>\n </div>\n\n <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\nimport {NgxConfigDate, NgxDateObjMap, NgxDateFormat, supportedLanguageCodes, fieldConfigDate, dateConfigMap} from '../models';\n\n@Pipe({name: 'ngxdate', pure: false})\nexport class NgxDatePipe implements PipeTransform {\n constructor() {\n }\n\n transform(date: Date | string, dateFormat?: string, langCode?: string): string {\n let transformedDate = null;\n if (date) {\n const objDate = this.getDateConfig(langCode);\n transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));\n }\n return transformedDate;\n }\n\n private dateFormat(dateFormat: string, configDate: NgxConfigDate): string {\n return configDate[fieldConfigDate[dateFormat]];\n }\n\n private getDateConfig(langCode: string): NgxConfigDate {\n const code = langCode || supportedLanguageCodes[0];\n const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];\n return configDate;\n }\n}\n","import {Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output} from '@angular/core';\nimport {\n NgxTimelineEvent,\n NgxTimelineItem,\n NgxTimelineItemPosition,\n NgxTimelinePeriodInfo,\n NgxDateFormat,\n NgxTimelineEventGroup,\n NgxTimelineEventChangeSideInGroup,\n periodKeyDateFormat,\n fieldsToCheckEventChangeSideInGroup,\n fieldsToAddEventGroup} from '../models';\nimport {BehaviorSubject} from 'rxjs';\n\n@Component({\n selector: 'ngx-timeline',\n templateUrl: './ngx-timeline.component.html',\n styleUrls: ['./ngx-timeline.scss'],\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges {\n /**\n * List of events to be displayed\n */\n @Input() events: NgxTimelineEvent[];\n /**\n * Language code used to show the date formatted\n */\n @Input() langCode?: string;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Logic to be applied in order to group events\n */\n @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;\n /**\n * Logic to be applied in order to put evetns on LEFT or RIGHT\n */\n @Input() changeSideInGroup?: NgxTimelineEventChangeSideInGroup = NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY;\n /**\n * Custom Template displayed before a group of events\n */\n @Input() periodCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show a single event\n */\n @Input() eventCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show an separator icon\n */\n @Input() centerIconCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the side date\n */\n @Input() dateInstantCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the inner event\n */\n @Input() innerEventCustomTemplate: TemplateRef<any>;\n /**\n * Output click event emitter\n */\n @Output()\n clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n groups: { [key: string]: NgxTimelineEvent[] } = {};\n periods: NgxTimelineItem[] = [];\n items: NgxTimelineItem[] = [];\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n ngxDateFormat = NgxDateFormat;\n\n private readonly separator = '/';\n\n constructor() {}\n\n\n ngOnInit(): void {\n this.groupEvents(this.events);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.groupEvents(this.events);\n }\n\n getPeriodKeyDateFormat(): string {\n return periodKeyDateFormat[this.groupEvent];\n }\n\n protected clear(): void {\n this.groups = {};\n this.periods = [];\n this.items = [];\n }\n\n protected groupEvents(events: NgxTimelineEvent[]): void {\n if (events) {\n this.clear();\n this.sortEvents(events);\n this.setGroups(events);\n this.setPeriods();\n this.setItems();\n }\n }\n\n protected sortEvents(events: NgxTimelineEvent[]): void {\n events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());\n }\n\n protected setGroups(events: NgxTimelineEvent[]): void {\n events.forEach((event) => {\n // conversion from string to actual Date\n event.timestamp = new Date(event.timestamp);\n const periodKey = this.getPeriodKeyFromEvent(event);\n if (!this.groups[periodKey]) {\n this.groups[periodKey] = [];\n }\n this.groups[periodKey].push(event);\n });\n }\n\n protected setItems(): void {\n this.periods.forEach((p) => {\n // insert first the period\n this.items.push(p);\n // in each period putting items on left\n const onLeft = true;\n const periodInfo = p.periodInfo;\n // insert then all the events in this period\n this.addPeriodEvents(periodInfo, onLeft);\n // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n });\n }\n\n protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void {\n this.groups[periodInfo.periodKey].forEach((event, index) => {\n const prevEvent = this.groups[periodInfo.periodKey][index - 1];\n if (index > 0 && this.compareEvents(prevEvent, event)) {\n onLeft = !onLeft;\n }\n this.pushEventOnItems(event, onLeft);\n });\n // return onLeft;\n }\n\n protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {\n this.items.push({\n eventInfo: {...event}, position: onLeft ?\n this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,\n });\n }\n\n /**\n * Compare the events inside the same group\n */\n protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {\n return this.changeSideInGroup === NgxTimelineEventChangeSideInGroup.ALL ||\n this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSideInGroup]);\n }\n\n protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {\n return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);\n }\n\n protected setPeriods(): void {\n this.periods = Object.keys(this.groups).map((periodKey) => {\n const split = periodKey.split(this.separator);\n return this.getPeriodInfo(split, periodKey);\n });\n }\n\n private getPeriodInfo(split: string[], periodKey: string): { periodInfo: NgxTimelinePeriodInfo } {\n return {\n periodInfo: {\n year: Number(split[0]),\n month: Number(split[1]),\n day: Number(split[2]),\n periodKey,\n firstDate: this.groups[periodKey][0].timestamp as Date,\n },\n };\n }\n\n protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);\n }\n}\n","<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import {NgModule} from '@angular/core';\nimport {NgxTimelineComponent} from './components/ngx-timeline.component';\nimport {NgxTimelineEventComponent} \n from './components/ngx-timeline-event/ngx-timeline-event.component';\nimport {CommonModule, registerLocaleData} from '@angular/common';\nimport {NgxDatePipe} from './pipes/ngx-date-pipe';\nimport localeIt from '@angular/common/locales/it';\nimport localeFr from '@angular/common/locales/fr';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\n\n@NgModule({\n declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\n imports: [CommonModule],\n exports: [NgxTimelineComponent, NgxDatePipe],\n})\nexport class NgxTimelineModule { }\n","/*\n * Public API Surface of ngx-timeline\n */\nexport * from './lib/components';\nexport * from './lib/models';\nexport * from './lib/pipes/';\nexport * from './lib/ngx-timeline.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
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'];\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};\n\nexport enum NgxDateFormat {\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR',\n FULL_DATE = 'FULL_DATE',\n MONTH_YEAR = 'MONTH_YEAR',\n HOURS_MINUTES = 'HOURS_MINUTES',\n YEAR = 'YEAR'\n}\n\nexport const fieldConfigDate = {\n MONTH_YEAR: 'monthYear',\n YEAR: 'year',\n HOURS_MINUTES: 'hoursMinutes',\n FULL_DATE: 'fullDate',\n DAY_MONTH_YEAR: 'dayMonthYear',\n};\n\n/**\n * Enum used to set the group event logic\n */\nexport enum NgxTimelineEventGroup {\n YEAR = 'YEAR',\n MONTH_YEAR = 'MONTH_YEAR',\n DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'\n}\n\nexport const fieldsToAddEventGroup = {\n YEAR: ['getFullYear'],\n MONTH_YEAR: ['getFullYear', 'getMonth'],\n DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate'],\n};\n\nexport const periodKeyDateFormat = {\n YEAR: NgxDateFormat.YEAR,\n MONTH_YEAR: NgxDateFormat.MONTH_YEAR,\n DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,\n};\n\n/**\n * Enum used to set the change side event logic\n */\nexport enum NgxTimelineEventChangeSideInGroup {\n ALL = 'ALL',\n ON_DIFFERENT_HMS = 'ON_DIFFERENT_HMS',\n ON_DIFFERENT_DAY = 'ON_DIFFERENT_DAY',\n ON_DIFFERENT_MONTH = 'ON_DIFFERENT_MONTH'\n}\n\nexport const fieldsToCheckEventChangeSideInGroup = {\n ON_DIFFERENT_MONTH: ['getFullYear', 'getMonth'],\n ON_DIFFERENT_DAY: ['getFullYear', 'getMonth', 'getDate'],\n ON_DIFFERENT_HMS: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],\n};\n","/**\n * Event to be provided from outside the timeline\n */\nexport interface NgxTimelineEvent {\n timestamp?: Date;\n title?: string;\n description?: string;\n id?: any;\n}\n\nexport interface NgxTimelinePeriodInfo {\n periodKey?: string;\n year?: number;\n month?: number;\n day?: number;\n firstDate?: any;\n}\n\n/**\n * Item used inside the timeline\n */\nexport interface NgxTimelineItem {\n type?: string;\n position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;\n periodInfo?: NgxTimelinePeriodInfo;\n eventInfo?: NgxTimelineEvent;\n}\n\nexport enum NgxTimelineItemPosition {\n ON_LEFT = 'ON_LEFT',\n ON_RIGHT = 'ON_RIGHT'\n}\n","import {Component, Input, Output, TemplateRef} from '@angular/core';\nimport {NgxTimelineItem, NgxTimelineItemPosition} from '../../models/NgxTimelineEvent';\nimport {DatePipe} from '@angular/common';\nimport {BehaviorSubject} from 'rxjs';\nimport {supportedLanguageCodes} from '../../models';\n\n@Component({\n selector: 'ngx-timeline-event',\n templateUrl: './ngx-timeline-event.component.html',\n styleUrls: ['./ngx-timeline-event.component.scss'],\n})\nexport class NgxTimelineEventComponent {\n /**\n * Event to be displayed\n */\n @Input() event: NgxTimelineItem;\n /**\n * Event position respect to the vertical line (LEFT or RIGHT)\n */\n @Input() colSidePosition: NgxTimelineItemPosition;\n /**\n * Language code used to format the dates\n */\n @Input() langCode?: string;\n /**\n * Inner custom template used to display the event detail\n */\n @Input() innerEventCustomTemplate?: TemplateRef<any>;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Output click event emitter\n */\n @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n\n private readonly monthAbbr = 'MMM';\n private readonly dayFormat = 'dd';\n\n constructor() { }\n\n getDateObj(): any {\n let day;\n let month;\n let year;\n const dateTimestamp = this.event?.eventInfo?.timestamp;\n if (dateTimestamp) {\n const timestamp = new Date(dateTimestamp);\n const langCode = this.getLangCode();\n month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);\n day = new DatePipe(langCode).transform(timestamp, this.dayFormat);\n year = timestamp.getFullYear();\n }\n\n return {day, month, year};\n }\n\n protected getLangCode(): string {\n return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];\n }\n}\n","<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\">\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr/>\n </div>\n\n <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n","import {DatePipe} from '@angular/common';\nimport {Pipe, PipeTransform} from '@angular/core';\nimport {NgxConfigDate, NgxDateObjMap, NgxDateFormat, supportedLanguageCodes, fieldConfigDate, dateConfigMap} from '../models';\n\n@Pipe({name: 'ngxdate', pure: false})\nexport class NgxDatePipe implements PipeTransform {\n constructor() {\n }\n\n transform(date: Date | string, dateFormat?: string, langCode?: string): string {\n let transformedDate = null;\n if (date) {\n const objDate = this.getDateConfig(langCode);\n transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));\n }\n return transformedDate;\n }\n\n private dateFormat(dateFormat: string, configDate: NgxConfigDate): string {\n return configDate[fieldConfigDate[dateFormat]];\n }\n\n private getDateConfig(langCode: string): NgxConfigDate {\n const code = langCode || supportedLanguageCodes[0];\n const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];\n return configDate;\n }\n}\n","import {Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output} from '@angular/core';\nimport {\n NgxTimelineEvent,\n NgxTimelineItem,\n NgxTimelineItemPosition,\n NgxTimelinePeriodInfo,\n NgxDateFormat,\n NgxTimelineEventGroup,\n NgxTimelineEventChangeSideInGroup,\n periodKeyDateFormat,\n fieldsToCheckEventChangeSideInGroup,\n fieldsToAddEventGroup} from '../models';\nimport {BehaviorSubject} from 'rxjs';\n\n@Component({\n selector: 'ngx-timeline',\n templateUrl: './ngx-timeline.component.html',\n styleUrls: ['./ngx-timeline.scss'],\n})\nexport class NgxTimelineComponent implements OnInit, OnChanges {\n /**\n * List of events to be displayed\n */\n @Input() events: NgxTimelineEvent[];\n /**\n * Language code used to show the date formatted\n */\n @Input() langCode?: string;\n /**\n * Boolean used to enable or disable the animations\n */\n @Input() enableAnimation = true;\n /**\n * Boolean used to reverse sort order (default older first)\n */\n @Input() reverseOrder = false;\n /**\n * Logic to be applied in order to group events\n */\n @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;\n /**\n * Logic to be applied in order to put evetns on LEFT or RIGHT\n */\n @Input() changeSideInGroup?: NgxTimelineEventChangeSideInGroup = NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY;\n /**\n * Custom Template displayed before a group of events\n */\n @Input() periodCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show a single event\n */\n @Input() eventCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show an separator icon\n */\n @Input() centerIconCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the side date\n */\n @Input() dateInstantCustomTemplate: TemplateRef<any>;\n /**\n * Custom Template displayed to show the inner event\n */\n @Input() innerEventCustomTemplate: TemplateRef<any>;\n /**\n * Output click event emitter\n */\n @Output()\n clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);\n\n groups: { [key: string]: NgxTimelineEvent[] } = {};\n periods: NgxTimelineItem[] = [];\n items: NgxTimelineItem[] = [];\n ngxTimelineItemPosition = NgxTimelineItemPosition;\n ngxDateFormat = NgxDateFormat;\n\n private readonly separator = '/';\n\n constructor() {}\n\n\n ngOnInit(): void {\n this.groupEvents(this.events);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.groupEvents(this.events);\n }\n\n getPeriodKeyDateFormat(): string {\n return periodKeyDateFormat[this.groupEvent];\n }\n\n protected clear(): void {\n this.groups = {};\n this.periods = [];\n this.items = [];\n }\n\n protected groupEvents(events: NgxTimelineEvent[]): void {\n if (events) {\n this.clear();\n this.sortEvents(events);\n this.setGroups(events);\n this.setPeriods();\n this.setItems();\n }\n }\n\n protected sortEvents(events: NgxTimelineEvent[]): void {\n events.sort((a, b) => {\n const aTime = a.timestamp.getTime();\n const bTime = b.timestamp.getTime();\n return this.reverseOrder ? bTime - aTime : aTime - bTime;});\n }\n\n protected setGroups(events: NgxTimelineEvent[]): void {\n events.forEach((event) => {\n // conversion from string to actual Date\n event.timestamp = new Date(event.timestamp);\n const periodKey = this.getPeriodKeyFromEvent(event);\n if (!this.groups[periodKey]) {\n this.groups[periodKey] = [];\n }\n this.groups[periodKey].push(event);\n });\n }\n\n protected setItems(): void {\n this.periods.forEach((p) => {\n // insert first the period\n this.items.push(p);\n // in each period putting items on left\n const onLeft = true;\n const periodInfo = p.periodInfo;\n // insert then all the events in this period\n this.addPeriodEvents(periodInfo, onLeft);\n // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);\n });\n }\n\n protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void {\n this.groups[periodInfo.periodKey].forEach((event, index) => {\n const prevEvent = this.groups[periodInfo.periodKey][index - 1];\n if (index > 0 && this.compareEvents(prevEvent, event)) {\n onLeft = !onLeft;\n }\n this.pushEventOnItems(event, onLeft);\n });\n // return onLeft;\n }\n\n protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {\n this.items.push({\n eventInfo: {...event}, position: onLeft ?\n this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT,\n });\n }\n\n /**\n * Compare the events inside the same group\n */\n protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {\n return this.changeSideInGroup === NgxTimelineEventChangeSideInGroup.ALL ||\n this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSideInGroup]);\n }\n\n protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {\n return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);\n }\n\n protected setPeriods(): void {\n this.periods = Object.keys(this.groups).map((periodKey) => {\n const split = periodKey.split(this.separator);\n return this.getPeriodInfo(split, periodKey);\n });\n }\n\n private getPeriodInfo(split: string[], periodKey: string): { periodInfo: NgxTimelinePeriodInfo } {\n return {\n periodInfo: {\n year: Number(split[0]),\n month: Number(split[1]),\n day: Number(split[2]),\n periodKey,\n firstDate: this.groups[periodKey][0].timestamp as Date,\n },\n };\n }\n\n protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {\n return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);\n }\n}\n","<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {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}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate;context: {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>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate\"></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>\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>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n","import {NgModule} from '@angular/core';\nimport {NgxTimelineComponent} from './components/ngx-timeline.component';\nimport {NgxTimelineEventComponent} \n from './components/ngx-timeline-event/ngx-timeline-event.component';\nimport {CommonModule, registerLocaleData} from '@angular/common';\nimport {NgxDatePipe} from './pipes/ngx-date-pipe';\nimport localeIt from '@angular/common/locales/it';\nimport localeFr from '@angular/common/locales/fr';\nimport localeDe from '@angular/common/locales/de';\nimport localeEs from '@angular/common/locales/es';\n\nregisterLocaleData(localeIt);\nregisterLocaleData(localeFr);\nregisterLocaleData(localeDe);\nregisterLocaleData(localeEs);\n\n@NgModule({\n declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],\n imports: [CommonModule],\n exports: [NgxTimelineComponent, NgxDatePipe],\n})\nexport class NgxTimelineModule { }\n","/*\n * Public API Surface of ngx-timeline\n */\nexport * from './lib/components';\nexport * from './lib/models';\nexport * from './lib/pipes/';\nexport * from './lib/ngx-timeline.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/lib/components/ngx-timeline.component.d.ts CHANGED
@@ -15,6 +15,10 @@ export declare class NgxTimelineComponent implements OnInit, OnChanges {
15
15
  * Boolean used to enable or disable the animations
16
16
  */
17
17
  enableAnimation: boolean;
18
+ /**
19
+ * Boolean used to reverse sort order (default older first)
20
+ */
21
+ reverseOrder: boolean;
18
22
  /**
19
23
  * Logic to be applied in order to group events
20
24
  */
@@ -75,5 +79,5 @@ export declare class NgxTimelineComponent implements OnInit, OnChanges {
75
79
  private getPeriodInfo;
76
80
  protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string;
77
81
  static ɵfac: i0.ɵɵFactoryDeclaration<NgxTimelineComponent, never>;
78
- static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimelineComponent, "ngx-timeline", never, { "events": "events"; "langCode": "langCode"; "enableAnimation": "enableAnimation"; "groupEvent": "groupEvent"; "changeSideInGroup": "changeSideInGroup"; "periodCustomTemplate": "periodCustomTemplate"; "eventCustomTemplate": "eventCustomTemplate"; "centerIconCustomTemplate": "centerIconCustomTemplate"; "dateInstantCustomTemplate": "dateInstantCustomTemplate"; "innerEventCustomTemplate": "innerEventCustomTemplate"; }, { "clickEmitter": "clickEmitter"; }, never, never>;
82
+ static ɵcmp: i0.ɵɵComponentDeclaration<NgxTimelineComponent, "ngx-timeline", never, { "events": "events"; "langCode": "langCode"; "enableAnimation": "enableAnimation"; "reverseOrder": "reverseOrder"; "groupEvent": "groupEvent"; "changeSideInGroup": "changeSideInGroup"; "periodCustomTemplate": "periodCustomTemplate"; "eventCustomTemplate": "eventCustomTemplate"; "centerIconCustomTemplate": "centerIconCustomTemplate"; "dateInstantCustomTemplate": "dateInstantCustomTemplate"; "innerEventCustomTemplate": "innerEventCustomTemplate"; }, { "clickEmitter": "clickEmitter"; }, never, never>;
79
83
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frxjs/ngx-timeline",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "keywords": [
5
5
  "angular",
6
6
  "timeline"