@frxjs/ngx-timeline 18.0.5 → 18.0.6
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/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The main goal of this angular library is to give you the possibility to integrate a timeline in your app.
|
|
4
4
|
<br>
|
|
5
|
-
Version 18.0.
|
|
5
|
+
Version 18.0.6 is compatible with angular 18.
|
|
6
6
|
<br>
|
|
7
7
|
Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline
|
|
8
8
|
|
|
@@ -45,7 +45,7 @@ export class NgxTimelineEventComponent {
|
|
|
45
45
|
return this.langCode;
|
|
46
46
|
}
|
|
47
47
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
48
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: "event", colSidePosition: "colSidePosition", langCode: "langCode", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate", enableAnimation: "enableAnimation", orientation: "orientation" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n </div>\n @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white
|
|
48
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: "event", colSidePosition: "colSidePosition", langCode: "langCode", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate", enableAnimation: "enableAnimation", orientation: "orientation" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n </div>\n @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px rgba(36,74,110,.1333333333));border-left:.5rem solid var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:var(--ngx-timeline-event-background) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:var(--ngx-timeline-event-divider-background)}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
|
|
49
49
|
}
|
|
50
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
|
|
51
51
|
type: Component,
|
|
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
53
53
|
NgClass,
|
|
54
54
|
NgTemplateOutlet,
|
|
55
55
|
TitleCasePipe,
|
|
56
|
-
], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n </div>\n @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white
|
|
56
|
+
], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n </div>\n @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px rgba(36,74,110,.1333333333));border-left:.5rem solid var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:var(--ngx-timeline-event-background) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:var(--ngx-timeline-event-divider-background)}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"] }]
|
|
57
57
|
}], ctorParameters: () => [], propDecorators: { event: [{
|
|
58
58
|
type: Input
|
|
59
59
|
}], colSidePosition: [{
|
|
@@ -160,7 +160,7 @@ export class NgxTimelineComponent {
|
|
|
160
160
|
return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);
|
|
161
161
|
}
|
|
162
162
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
163
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <div class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"hour left\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"hour right\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"hour left\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo; ) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo; ) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white --ngx-timeline-event-divider-background: #e9e9e9 ---ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }] }); }
|
|
163
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <div class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"hour left\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"hour right\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"hour left\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo; ) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo; ) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }] }); }
|
|
164
164
|
}
|
|
165
165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineComponent, decorators: [{
|
|
166
166
|
type: Component,
|
|
@@ -169,7 +169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
169
169
|
NgTemplateOutlet,
|
|
170
170
|
NgxDatePipe,
|
|
171
171
|
NgxTimelineEventComponent,
|
|
172
|
-
], template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <div class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"hour left\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"hour right\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"hour left\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo; ) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo; ) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white
|
|
172
|
+
], template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <div class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"hour left\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"hour right\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"hour left\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo; ) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo; ) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
|
|
173
173
|
}], propDecorators: { events: [{
|
|
174
174
|
type: Input
|
|
175
175
|
}], langCode: [{
|
|
@@ -202,7 +202,7 @@ class NgxTimelineEventComponent {
|
|
|
202
202
|
return this.langCode;
|
|
203
203
|
}
|
|
204
204
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: "event", colSidePosition: "colSidePosition", langCode: "langCode", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate", enableAnimation: "enableAnimation", orientation: "orientation" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n </div>\n @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white
|
|
205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: "event", colSidePosition: "colSidePosition", langCode: "langCode", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate", enableAnimation: "enableAnimation", orientation: "orientation" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n </div>\n @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px rgba(36,74,110,.1333333333));border-left:.5rem solid var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:var(--ngx-timeline-event-background) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:var(--ngx-timeline-event-divider-background)}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
|
|
206
206
|
}
|
|
207
207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
|
|
208
208
|
type: Component,
|
|
@@ -210,7 +210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
210
210
|
NgClass,
|
|
211
211
|
NgTemplateOutlet,
|
|
212
212
|
TitleCasePipe,
|
|
213
|
-
], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n </div>\n @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white
|
|
213
|
+
], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n @if (colSidePosition===ngxTimelineItemPosition.ON_RIGHT) {\n <div class=\"arrow left\"></div>\n }\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"></ng-container>\n </div>\n @if (colSidePosition === ngxTimelineItemPosition.ON_LEFT) {\n <div class=\"arrow right\"></div>\n }\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr>\n </div>\n\n @if (getDateObj(); as dateObj) {\n <div class=\"event-date-container\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--ngx-timeline-event-text-color)}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.event-wrapper-container.horizontal .event-container.reverse{flex-direction:row}.event-wrapper-container.horizontal .event{margin:0}.event-wrapper-container.horizontal .arrow.right{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid var(--ngx-timeline-event-background);border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--ngx-timeline-event-background);border-top:none}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px rgba(36,74,110,.1333333333));border-left:.5rem solid var(--ngx-timeline-event-background)}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid var(--ngx-timeline-event-background)}.event{background:var(--ngx-timeline-event-background);border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:var(--ngx-timeline-event-background) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #244a6e52}.event.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.event.hour.right{justify-content:flex-start}.event.hour.left{justify-content:flex-end}.event .hour-inner-container{margin:0}.event-container{display:flex}.event-container.reverse{flex-direction:row-reverse}.event-container .event-info-container{display:flex;flex-direction:column;align-items:flex-start;padding:.1rem;flex:88 88 0}.event-container .event-info-container .event-info-header{display:flex;align-items:center;width:100%}.event-container .event-info-container .event-info-header .icon-container{margin-right:.3rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .expiration-container,.event-container .event-info-container .event-info-body .category-container{display:flex;font-size:13px;justify-content:flex-start;align-items:center}.event-container .event-info-container .event-info-body .expiration-container p,.event-container .event-info-container .event-info-body .category-container p{font-size:13px;margin:0}.event-container .event-info-container .event-info-body .expiration-container .expiration-label,.event-container .event-info-container .event-info-body .expiration-container .category-label,.event-container .event-info-container .event-info-body .category-container .expiration-label,.event-container .event-info-container .event-info-body .category-container .category-label{margin-right:.5rem}.event-container .event-info-container .event-info-body .expiration-container .expiration-value,.event-container .event-info-container .event-info-body .expiration-container .category-value,.event-container .event-info-container .event-info-body .category-container .expiration-value,.event-container .event-info-container .event-info-body .category-container .category-value{font-weight:700}.event-container .event-info-container .event-info-footer{font-size:15px;cursor:pointer;padding-top:1rem}.event-container .event-info-container .event-info-footer .footer-inner-container{display:flex;justify-content:flex-start;align-items:flex-end}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:var(--ngx-timeline-event-divider-background)}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"] }]
|
|
214
214
|
}], ctorParameters: () => [], propDecorators: { event: [{
|
|
215
215
|
type: Input
|
|
216
216
|
}], colSidePosition: [{
|
|
@@ -414,7 +414,7 @@ class NgxTimelineComponent {
|
|
|
414
414
|
return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);
|
|
415
415
|
}
|
|
416
416
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <div class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"hour left\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"hour right\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"hour left\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo; ) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo; ) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white --ngx-timeline-event-divider-background: #e9e9e9 ---ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }] }); }
|
|
417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", orientation: "orientation", groupEvent: "groupEvent", changeSide: "changeSide", periodCustomTemplate: "periodCustomTemplate", eventCustomTemplate: "eventCustomTemplate", centerIconCustomTemplate: "centerIconCustomTemplate", dateInstantCustomTemplate: "dateInstantCustomTemplate", innerEventCustomTemplate: "innerEventCustomTemplate", eventDescriptionCustomTemplate: "eventDescriptionCustomTemplate" }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <div class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"hour left\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"hour right\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"hour left\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo; ) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo; ) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }] }); }
|
|
418
418
|
}
|
|
419
419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgxTimelineComponent, decorators: [{
|
|
420
420
|
type: Component,
|
|
@@ -423,7 +423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
|
|
|
423
423
|
NgTemplateOutlet,
|
|
424
424
|
NgxDatePipe,
|
|
425
425
|
NgxTimelineEventComponent,
|
|
426
|
-
], template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <div class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"hour left\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"hour right\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"hour left\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo; ) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo; ) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white
|
|
426
|
+
], template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <div class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"hour left\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n @if (item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT) {\r\n <div class=\"hour right\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"hour left\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.periodInfo; ) {\r\n <div class=\"center-inner\">\r\n <ng-container *ngTemplateOutlet=\"periodContainerTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n }\r\n @if (!item.periodInfo; ) {\r\n <div class=\"center-inner no-period-key\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n @if (item.eventInfo) {\r\n <div class=\"event-outer-container\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index let-event=event>\r\n <div class=\"line\"></div>\r\n <ng-container *ngTemplateOutlet=\"centerIconCustomTemplate || centerIconTemplate; context: {index:index, event:event}\"></ng-container>\r\n <div [ngClass]=\"{'transparent last-line': index === items.length - 1}\" class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #centerIconTemplate let-index=index let-event=event>\r\n <div class=\"center-icon-container\">\r\n <div class=\"icon\"></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateInstantTemplate let-item=item>\r\n <span>\r\n {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #periodContainerTemplate let-period=period let-index=index let-event=event>\r\n <div class=\"period-container\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: period, index:index, event:event}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #periodTemplate let-period=period>\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [orientation]=\"orientation\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [eventDescriptionCustomTemplate]=\"eventDescriptionCustomTemplate\"\r\n [colSidePosition]=\"colSidePosition\"\r\n (clickEmitter)=\"clickEmitter.next($event)\">\r\n </ngx-timeline-event>\r\n</ng-template>\r\n\r\n", styles: ["::ng-deep :root{--ngx-timeline-period-inner-container: orange;--ngx-timeline-icon: orange;--ngx-timeline-line-background: #464646;--ngx-timeline-flex-display-col: 49 49 0;--ngx-timeline-flex-display-col-center: 2 2 0;--ngx-timeline-event-background: white;--ngx-timeline-event-divider-background: #e9e9e9;---ngx-timeline-event-text-color: black}.main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.items-container.horizontal{display:flex;flex-direction:row;min-height:max(20rem,100%)}.items-container.horizontal .row{min-width:fit-content;flex-direction:column}.items-container.horizontal .row>[class*=col-]{display:flex;flex-direction:column;align-items:center}.items-container.horizontal .col-center{min-height:2rem}.items-container.horizontal .col-left{min-height:300px;align-items:center;justify-content:flex-end}.items-container.horizontal .col-right{min-height:300px;align-items:center;justify-content:flex-start}.items-container.horizontal .center-inner{display:flex;flex-direction:row}.items-container.horizontal .center-inner .line{max-width:50%;width:50%;height:.1rem;min-height:.1rem;max-height:.1rem}.items-container.horizontal .center-icon-container{padding:0 .5rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap}.row>[class*=col-]{display:flex;flex-direction:column;justify-content:center}.col-left{align-items:flex-end;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-right{align-items:flex-start;padding:0;flex:var(--ngx-timeline-flex-display-col)}.col-center{padding:0;flex:var(--ngx-timeline-flex-display-col-center)}.col-center:not(.col-period){min-height:10rem}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{flex:50 50 0;background:var(--ngx-timeline-line-background);width:.1rem}.center-inner .line.transparent{background:transparent}.period-container .period-inner-container{color:#fff;border-radius:2px;background:var(--ngx-timeline-period-inner-container);width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:var(--ngx-timeline-icon);margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:97%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.items-container{min-width:max(20rem,95%)}.items-container.horizontal .event-outer-container{margin:0 .5rem}.items-container.horizontal .col-left{min-height:6rem}.items-container.horizontal .col-center{min-height:2rem}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:clamp(10px,2.5vw,12px);padding:0;margin-right:.3rem}.col-left.col-period{flex:14 14 0}.col-left.col-event{flex:17 17 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{justify-content:center;margin:0}.col-center.col-period,.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{height:fit-content;display:flex;justify-content:center;align-items:center;position:relative}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
|
|
427
427
|
}], propDecorators: { events: [{
|
|
428
428
|
type: Input
|
|
429
429
|
}], langCode: [{
|
package/package.json
CHANGED
package/style.scss
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--ngx-timeline-line-background: #464646;
|
|
5
5
|
--ngx-timeline-flex-display-col: 49 49 0;
|
|
6
6
|
--ngx-timeline-flex-display-col-center: 2 2 0;
|
|
7
|
-
--ngx-timeline-event-background: white
|
|
8
|
-
--ngx-timeline-event-divider-background: #e9e9e9
|
|
7
|
+
--ngx-timeline-event-background: white;
|
|
8
|
+
--ngx-timeline-event-divider-background: #e9e9e9;
|
|
9
9
|
---ngx-timeline-event-text-color: black;
|
|
10
|
-
}
|
|
10
|
+
}
|