@frxjs/ngx-timeline 1.0.7 → 1.0.12

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 (89) hide show
  1. package/.editorconfig +16 -0
  2. package/.github/workflows/CI-main.yml +48 -0
  3. package/README.md +136 -136
  4. package/angular.json +178 -0
  5. package/docs/3rdpartylicenses.txt +268 -0
  6. package/docs/assets/inter.png +0 -0
  7. package/docs/favicon.ico +0 -0
  8. package/docs/index.html +13 -0
  9. package/docs/main.6005a10000c87d7095d3.js +1 -0
  10. package/docs/polyfills.f8ddde825b13760c1743.js +1 -0
  11. package/docs/runtime.0e49e2b53282f40c8925.js +1 -0
  12. package/docs/styles.09e2c710755c8867a460.css +0 -0
  13. package/package.json +51 -16
  14. package/projects/demo-app/.browserslistrc +17 -0
  15. package/projects/demo-app/e2e/protractor.conf.js +37 -0
  16. package/projects/demo-app/e2e/src/app.e2e-spec.ts +23 -0
  17. package/projects/demo-app/e2e/src/app.po.ts +11 -0
  18. package/projects/demo-app/e2e/tsconfig.json +13 -0
  19. package/projects/demo-app/karma.conf.js +44 -0
  20. package/projects/demo-app/src/app/app.component.html +90 -0
  21. package/projects/demo-app/src/app/app.component.scss +417 -0
  22. package/projects/demo-app/src/app/app.component.spec.ts +24 -0
  23. package/projects/demo-app/src/app/app.component.ts +147 -0
  24. package/projects/demo-app/src/app/app.module.ts +20 -0
  25. package/projects/demo-app/src/assets/.gitkeep +0 -0
  26. package/projects/demo-app/src/assets/inter.png +0 -0
  27. package/projects/demo-app/src/environments/environment.prod.ts +3 -0
  28. package/projects/demo-app/src/environments/environment.ts +16 -0
  29. package/projects/demo-app/src/favicon.ico +0 -0
  30. package/projects/demo-app/src/index.html +13 -0
  31. package/projects/demo-app/src/main.ts +12 -0
  32. package/projects/demo-app/src/polyfills.ts +63 -0
  33. package/projects/demo-app/src/styles.scss +1 -0
  34. package/projects/demo-app/src/test.ts +25 -0
  35. package/projects/demo-app/tsconfig.app.json +26 -0
  36. package/projects/demo-app/tsconfig.spec.json +18 -0
  37. package/projects/demo-app/tslint.json +17 -0
  38. package/projects/ngx-timeline/README.md +136 -0
  39. package/projects/ngx-timeline/karma.conf.js +44 -0
  40. package/projects/ngx-timeline/ng-package.json +7 -0
  41. package/projects/ngx-timeline/package.json +20 -0
  42. package/{lib/components/index.d.ts → projects/ngx-timeline/src/lib/components/index.ts} +2 -2
  43. package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.html +37 -0
  44. package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.scss +197 -0
  45. package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.spec.ts +89 -0
  46. package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.ts +66 -0
  47. package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.html +98 -0
  48. package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.spec.ts +160 -0
  49. package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.ts +187 -0
  50. package/projects/ngx-timeline/src/lib/components/ngx-timeline.scss +226 -0
  51. package/projects/ngx-timeline/src/lib/models/NgxConfigObj.ts +110 -0
  52. package/projects/ngx-timeline/src/lib/models/NgxTimelineEvent.ts +32 -0
  53. package/{lib/models/index.d.ts → projects/ngx-timeline/src/lib/models/index.ts} +2 -2
  54. package/projects/ngx-timeline/src/lib/ngx-timeline.module.ts +21 -0
  55. package/{lib/pipes/index.d.ts → projects/ngx-timeline/src/lib/pipes/index.ts} +1 -1
  56. package/projects/ngx-timeline/src/lib/pipes/ngx-date-pipe.ts +29 -0
  57. package/{public-api.d.ts → projects/ngx-timeline/src/public-api.ts} +7 -4
  58. package/projects/ngx-timeline/src/test.ts +26 -0
  59. package/projects/ngx-timeline/tsconfig.lib.json +25 -0
  60. package/projects/ngx-timeline/tsconfig.lib.prod.json +10 -0
  61. package/projects/ngx-timeline/tsconfig.spec.json +17 -0
  62. package/projects/ngx-timeline/tslint.json +17 -0
  63. package/tsconfig.json +35 -0
  64. package/tslint.json +140 -0
  65. package/bundles/frxjs-ngx-timeline.umd.js +0 -696
  66. package/bundles/frxjs-ngx-timeline.umd.js.map +0 -1
  67. package/bundles/frxjs-ngx-timeline.umd.min.js +0 -2
  68. package/bundles/frxjs-ngx-timeline.umd.min.js.map +0 -1
  69. package/esm2015/frxjs-ngx-timeline.js +0 -8
  70. package/esm2015/lib/components/index.js +0 -3
  71. package/esm2015/lib/components/ngx-timeline-event/ngx-timeline-event.component.js +0 -55
  72. package/esm2015/lib/components/ngx-timeline.component.js +0 -147
  73. package/esm2015/lib/models/NgxConfigObj.js +0 -93
  74. package/esm2015/lib/models/NgxTimelineEvent.js +0 -6
  75. package/esm2015/lib/models/index.js +0 -3
  76. package/esm2015/lib/ngx-timeline.module.js +0 -23
  77. package/esm2015/lib/pipes/index.js +0 -2
  78. package/esm2015/lib/pipes/ngx-date-pipe.js +0 -28
  79. package/esm2015/public-api.js +0 -8
  80. package/fesm2015/frxjs-ngx-timeline.js +0 -350
  81. package/fesm2015/frxjs-ngx-timeline.js.map +0 -1
  82. package/frxjs-ngx-timeline.d.ts +0 -7
  83. package/frxjs-ngx-timeline.metadata.json +0 -1
  84. package/lib/components/ngx-timeline-event/ngx-timeline-event.component.d.ts +0 -35
  85. package/lib/components/ngx-timeline.component.d.ts +0 -76
  86. package/lib/models/NgxConfigObj.d.ts +0 -59
  87. package/lib/models/NgxTimelineEvent.d.ts +0 -29
  88. package/lib/ngx-timeline.module.d.ts +0 -2
  89. package/lib/pipes/ngx-date-pipe.d.ts +0 -7
@@ -1 +0,0 @@
1
- {"__symbolic":"module","version":4,"exports":[{"from":"./lib/ngx-date-pipe"},{"from":"./lib/NgxTimelineEvent"}],"metadata":{"NgxTimelineModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"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}.col-left,.col-right{padding:0;flex:49 49 0}.col-right{align-items:flex-start}.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:-webkit-max-content;width:-moz-max-content;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:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width:900px){.desktop{display:none!important}.mobile{display:flex!important}.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,.period-container{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:-webkit-max-content;width:-moz-max-content;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}}"]}]}],"members":{"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"langCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"enableAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"groupEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"changeSideInGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"periodCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"eventCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"centerIconCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"dateInstantCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"innerEventCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"clickEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"getPeriodKeyDateFormat":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"groupEvents":[{"__symbolic":"method"}],"sortEvents":[{"__symbolic":"method"}],"setGroups":[{"__symbolic":"method"}],"setItems":[{"__symbolic":"method"}],"addPeriodEvents":[{"__symbolic":"method"}],"pushEventOnItems":[{"__symbolic":"method"}],"compareEvents":[{"__symbolic":"method"}],"compareEventsField":[{"__symbolic":"method"}],"setPeriods":[{"__symbolic":"method"}],"getPeriodInfo":[{"__symbolic":"method"}],"getPeriodKeyFromEvent":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"ngx-timeline-event","template":"<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 </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","styles":[".event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0 0 #244a6e22);border-left:.5rem solid #fff}.arrow.left{filter:drop-shadow(-1px 0 0 #244a6e22);border-right:.5rem solid #fff}.event{background:#fff;border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:#fff 0 0 no-repeat padding-box;box-shadow:0 3px 6px rgba(36,74,110,.3215686274509804)}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .icon-container nb-icon{color:orange;width:1.5rem;height:1.5rem;margin-bottom:.1rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .category-container,.event-container .event-info-container .event-info-body .expiration-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .category-container p,.event-container .event-info-container .event-info-body .expiration-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .category-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .expiration-container .expiration-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .category-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .expiration-container .expiration-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-info-container .event-info-footer .footer-inner-container nb-icon{color:#006cb4;width:1rem;height:1rem;margin-bottom:.1rem}.event-container .event-info-container .event-info-footer p{margin:0;color:#006cb4}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:#e9e9e9}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}"]}]}],"members":{"event":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"colSidePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"langCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"innerEventCustomTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"enableAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"clickEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getDateObj":[{"__symbolic":"method"}],"getLangCode":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"ngxdate","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transform":[{"__symbolic":"method"}],"dateFormat":[{"__symbolic":"method"}],"getDateConfig":[{"__symbolic":"method"}]}}},"origins":{"NgxTimelineModule":"./lib/ngx-timeline.module","ɵa":"./lib/components/ngx-timeline.component","ɵb":"./lib/components/ngx-timeline-event/ngx-timeline-event.component","ɵc":"./lib/pipes/ngx-date-pipe"},"importAs":"@frxjs/ngx-timeline"}
@@ -1,35 +0,0 @@
1
- import { TemplateRef } from '@angular/core';
2
- import { NgxTimelineItem, NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';
3
- import { BehaviorSubject } from 'rxjs';
4
- export declare class NgxTimelineEventComponent {
5
- /**
6
- * Event to be displayed
7
- */
8
- event: NgxTimelineItem;
9
- /**
10
- * Event position respect to the vertical line (LEFT or RIGHT)
11
- */
12
- colSidePosition: NgxTimelineItemPosition;
13
- /**
14
- * Language code used to format the dates
15
- */
16
- langCode?: string;
17
- /**
18
- * Inner custom template used to display the event detail
19
- */
20
- innerEventCustomTemplate?: TemplateRef<any>;
21
- /**
22
- * Boolean used to enable or disable the animations
23
- */
24
- enableAnimation: boolean;
25
- /**
26
- * Output click event emitter
27
- */
28
- clickEmitter: BehaviorSubject<NgxTimelineItem>;
29
- ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
30
- private readonly monthAbbr;
31
- private readonly dayFormat;
32
- constructor();
33
- getDateObj(): any;
34
- protected getLangCode(): string;
35
- }
@@ -1,76 +0,0 @@
1
- import { OnInit, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
2
- import { NgxTimelineEvent, NgxTimelineItem, NgxTimelineItemPosition, NgxTimelinePeriodInfo, NgxDateFormat, NgxTimelineEventGroup, NgxTimelineEventChangeSideInGroup } from '../models';
3
- import { BehaviorSubject } from 'rxjs';
4
- export declare class NgxTimelineComponent implements OnInit, OnChanges {
5
- /**
6
- * List of events to be displayed
7
- */
8
- events: NgxTimelineEvent[];
9
- /**
10
- * Language code used to show the date formatted
11
- */
12
- langCode?: string;
13
- /**
14
- * Boolean used to enable or disable the animations
15
- */
16
- enableAnimation: boolean;
17
- /**
18
- * Logic to be applied in order to group events
19
- */
20
- groupEvent?: NgxTimelineEventGroup;
21
- /**
22
- * Logic to be applied in order to put evetns on LEFT or RIGHT
23
- */
24
- changeSideInGroup?: NgxTimelineEventChangeSideInGroup;
25
- /**
26
- * Custom Template displayed before a group of events
27
- */
28
- periodCustomTemplate: TemplateRef<any>;
29
- /**
30
- * Custom Template displayed to show a single event
31
- */
32
- eventCustomTemplate: TemplateRef<any>;
33
- /**
34
- * Custom Template displayed to show an separator icon
35
- */
36
- centerIconCustomTemplate: TemplateRef<any>;
37
- /**
38
- * Custom Template displayed to show the side date
39
- */
40
- dateInstantCustomTemplate: TemplateRef<any>;
41
- /**
42
- * Custom Template displayed to show the inner event
43
- */
44
- innerEventCustomTemplate: TemplateRef<any>;
45
- /**
46
- * Output click event emitter
47
- */
48
- clickEmitter: BehaviorSubject<NgxTimelineItem>;
49
- groups: {
50
- [key: string]: NgxTimelineEvent[];
51
- };
52
- periods: NgxTimelineItem[];
53
- items: NgxTimelineItem[];
54
- ngxTimelineItemPosition: typeof NgxTimelineItemPosition;
55
- ngxDateFormat: typeof NgxDateFormat;
56
- private readonly separator;
57
- constructor();
58
- ngOnInit(): void;
59
- ngOnChanges(changes: SimpleChanges): void;
60
- getPeriodKeyDateFormat(): string;
61
- protected clear(): void;
62
- protected groupEvents(events: NgxTimelineEvent[]): void;
63
- protected sortEvents(events: NgxTimelineEvent[]): void;
64
- protected setGroups(events: NgxTimelineEvent[]): void;
65
- protected setItems(): void;
66
- protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void;
67
- protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void;
68
- /**
69
- * Compare the events inside the same group
70
- */
71
- protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean;
72
- protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean;
73
- protected setPeriods(): void;
74
- private getPeriodInfo;
75
- protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string;
76
- }
@@ -1,59 +0,0 @@
1
- export declare let supportedLanguageCodes: string[];
2
- export interface NgxConfigDate {
3
- code: string;
4
- dayMonthYear: string;
5
- fullDate: string;
6
- hoursMinutes: string;
7
- monthYear: string;
8
- year: string;
9
- }
10
- export interface NgxDateObjMap {
11
- [key: string]: NgxConfigDate;
12
- }
13
- export declare let dateConfigMap: NgxDateObjMap;
14
- export declare enum NgxDateFormat {
15
- DAY_MONTH_YEAR = "DAY_MONTH_YEAR",
16
- FULL_DATE = "FULL_DATE",
17
- MONTH_YEAR = "MONTH_YEAR",
18
- HOURS_MINUTES = "HOURS_MINUTES",
19
- YEAR = "YEAR"
20
- }
21
- export declare let fieldConfigDate: {
22
- MONTH_YEAR: string;
23
- YEAR: string;
24
- HOURS_MINUTES: string;
25
- FULL_DATE: string;
26
- DAY_MONTH_YEAR: string;
27
- };
28
- /**
29
- * Enum used to set the group event logic
30
- */
31
- export declare enum NgxTimelineEventGroup {
32
- YEAR = "YEAR",
33
- MONTH_YEAR = "MONTH_YEAR",
34
- DAY_MONTH_YEAR = "DAY_MONTH_YEAR"
35
- }
36
- export declare let fieldsToAddEventGroup: {
37
- YEAR: string[];
38
- MONTH_YEAR: string[];
39
- DAY_MONTH_YEAR: string[];
40
- };
41
- export declare let periodKeyDateFormat: {
42
- YEAR: NgxDateFormat;
43
- MONTH_YEAR: NgxDateFormat;
44
- DAY_MONTH_YEAR: NgxDateFormat;
45
- };
46
- /**
47
- * Enum used to set the change side event logic
48
- */
49
- export declare enum NgxTimelineEventChangeSideInGroup {
50
- ALL = "ALL",
51
- ON_DIFFERENT_HMS = "ON_DIFFERENT_HMS",
52
- ON_DIFFERENT_DAY = "ON_DIFFERENT_DAY",
53
- ON_DIFFERENT_MONTH = "ON_DIFFERENT_MONTH"
54
- }
55
- export declare let fieldsToCheckEventChangeSideInGroup: {
56
- ON_DIFFERENT_MONTH: string[];
57
- ON_DIFFERENT_DAY: string[];
58
- ON_DIFFERENT_HMS: string[];
59
- };
@@ -1,29 +0,0 @@
1
- /**
2
- * Event to be provided from outside the timeline
3
- */
4
- export interface NgxTimelineEvent {
5
- timestamp?: Date;
6
- title?: string;
7
- description?: string;
8
- id?: any;
9
- }
10
- export interface NgxTimelinePeriodInfo {
11
- periodKey?: string;
12
- year?: number;
13
- month?: number;
14
- day?: number;
15
- firstDate?: any;
16
- }
17
- /**
18
- * Item used inside the timeline
19
- */
20
- export interface NgxTimelineItem {
21
- type?: string;
22
- position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;
23
- periodInfo?: NgxTimelinePeriodInfo;
24
- eventInfo?: NgxTimelineEvent;
25
- }
26
- export declare enum NgxTimelineItemPosition {
27
- ON_LEFT = "ON_LEFT",
28
- ON_RIGHT = "ON_RIGHT"
29
- }
@@ -1,2 +0,0 @@
1
- export declare class NgxTimelineModule {
2
- }
@@ -1,7 +0,0 @@
1
- import { PipeTransform } from '@angular/core';
2
- export declare class NgxDatePipe implements PipeTransform {
3
- constructor();
4
- transform(date: Date | string, dateFormat?: string, langCode?: string): string;
5
- private dateFormat;
6
- private getDateConfig;
7
- }