@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.
- package/.editorconfig +16 -0
- package/.github/workflows/CI-main.yml +48 -0
- package/README.md +136 -136
- package/angular.json +178 -0
- package/docs/3rdpartylicenses.txt +268 -0
- package/docs/assets/inter.png +0 -0
- package/docs/favicon.ico +0 -0
- package/docs/index.html +13 -0
- package/docs/main.6005a10000c87d7095d3.js +1 -0
- package/docs/polyfills.f8ddde825b13760c1743.js +1 -0
- package/docs/runtime.0e49e2b53282f40c8925.js +1 -0
- package/docs/styles.09e2c710755c8867a460.css +0 -0
- package/package.json +51 -16
- package/projects/demo-app/.browserslistrc +17 -0
- package/projects/demo-app/e2e/protractor.conf.js +37 -0
- package/projects/demo-app/e2e/src/app.e2e-spec.ts +23 -0
- package/projects/demo-app/e2e/src/app.po.ts +11 -0
- package/projects/demo-app/e2e/tsconfig.json +13 -0
- package/projects/demo-app/karma.conf.js +44 -0
- package/projects/demo-app/src/app/app.component.html +90 -0
- package/projects/demo-app/src/app/app.component.scss +417 -0
- package/projects/demo-app/src/app/app.component.spec.ts +24 -0
- package/projects/demo-app/src/app/app.component.ts +147 -0
- package/projects/demo-app/src/app/app.module.ts +20 -0
- package/projects/demo-app/src/assets/.gitkeep +0 -0
- package/projects/demo-app/src/assets/inter.png +0 -0
- package/projects/demo-app/src/environments/environment.prod.ts +3 -0
- package/projects/demo-app/src/environments/environment.ts +16 -0
- package/projects/demo-app/src/favicon.ico +0 -0
- package/projects/demo-app/src/index.html +13 -0
- package/projects/demo-app/src/main.ts +12 -0
- package/projects/demo-app/src/polyfills.ts +63 -0
- package/projects/demo-app/src/styles.scss +1 -0
- package/projects/demo-app/src/test.ts +25 -0
- package/projects/demo-app/tsconfig.app.json +26 -0
- package/projects/demo-app/tsconfig.spec.json +18 -0
- package/projects/demo-app/tslint.json +17 -0
- package/projects/ngx-timeline/README.md +136 -0
- package/projects/ngx-timeline/karma.conf.js +44 -0
- package/projects/ngx-timeline/ng-package.json +7 -0
- package/projects/ngx-timeline/package.json +20 -0
- package/{lib/components/index.d.ts → projects/ngx-timeline/src/lib/components/index.ts} +2 -2
- package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.html +37 -0
- package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.scss +197 -0
- package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.spec.ts +89 -0
- package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.ts +66 -0
- package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.html +98 -0
- package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.spec.ts +160 -0
- package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.ts +187 -0
- package/projects/ngx-timeline/src/lib/components/ngx-timeline.scss +226 -0
- package/projects/ngx-timeline/src/lib/models/NgxConfigObj.ts +110 -0
- package/projects/ngx-timeline/src/lib/models/NgxTimelineEvent.ts +32 -0
- package/{lib/models/index.d.ts → projects/ngx-timeline/src/lib/models/index.ts} +2 -2
- package/projects/ngx-timeline/src/lib/ngx-timeline.module.ts +21 -0
- package/{lib/pipes/index.d.ts → projects/ngx-timeline/src/lib/pipes/index.ts} +1 -1
- package/projects/ngx-timeline/src/lib/pipes/ngx-date-pipe.ts +29 -0
- package/{public-api.d.ts → projects/ngx-timeline/src/public-api.ts} +7 -4
- package/projects/ngx-timeline/src/test.ts +26 -0
- package/projects/ngx-timeline/tsconfig.lib.json +25 -0
- package/projects/ngx-timeline/tsconfig.lib.prod.json +10 -0
- package/projects/ngx-timeline/tsconfig.spec.json +17 -0
- package/projects/ngx-timeline/tslint.json +17 -0
- package/tsconfig.json +35 -0
- package/tslint.json +140 -0
- package/bundles/frxjs-ngx-timeline.umd.js +0 -696
- package/bundles/frxjs-ngx-timeline.umd.js.map +0 -1
- package/bundles/frxjs-ngx-timeline.umd.min.js +0 -2
- package/bundles/frxjs-ngx-timeline.umd.min.js.map +0 -1
- package/esm2015/frxjs-ngx-timeline.js +0 -8
- package/esm2015/lib/components/index.js +0 -3
- package/esm2015/lib/components/ngx-timeline-event/ngx-timeline-event.component.js +0 -55
- package/esm2015/lib/components/ngx-timeline.component.js +0 -147
- package/esm2015/lib/models/NgxConfigObj.js +0 -93
- package/esm2015/lib/models/NgxTimelineEvent.js +0 -6
- package/esm2015/lib/models/index.js +0 -3
- package/esm2015/lib/ngx-timeline.module.js +0 -23
- package/esm2015/lib/pipes/index.js +0 -2
- package/esm2015/lib/pipes/ngx-date-pipe.js +0 -28
- package/esm2015/public-api.js +0 -8
- package/fesm2015/frxjs-ngx-timeline.js +0 -350
- package/fesm2015/frxjs-ngx-timeline.js.map +0 -1
- package/frxjs-ngx-timeline.d.ts +0 -7
- package/frxjs-ngx-timeline.metadata.json +0 -1
- package/lib/components/ngx-timeline-event/ngx-timeline-event.component.d.ts +0 -35
- package/lib/components/ngx-timeline.component.d.ts +0 -76
- package/lib/models/NgxConfigObj.d.ts +0 -59
- package/lib/models/NgxTimelineEvent.d.ts +0 -29
- package/lib/ngx-timeline.module.d.ts +0 -2
- 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
|
-
}
|