@frxjs/ngx-timeline 19.0.0 → 19.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -31
- package/fesm2022/frxjs-ngx-timeline.mjs +221 -200
- package/fesm2022/frxjs-ngx-timeline.mjs.map +1 -1
- package/lib/components/ngx-timeline-event/ngx-timeline-event.component.d.ts +22 -20
- package/lib/components/ngx-timeline.component.d.ts +52 -40
- package/lib/models/NgxConfigObj.d.ts +8 -29
- package/lib/models/NgxTimelineEvent.d.ts +5 -6
- package/lib/ngx-timeline.module.d.ts +2 -3
- package/lib/pipes/ngx-date-pipe.d.ts +2 -3
- package/package.json +6 -5
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as i1 from '@angular/cdk/scrolling';
|
|
2
|
+
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
3
|
+
import { DatePipe, NgClass, NgTemplateOutlet, TitleCasePipe, registerLocaleData } from '@angular/common';
|
|
2
4
|
import * as i0 from '@angular/core';
|
|
3
|
-
import {
|
|
4
|
-
import { BehaviorSubject } from 'rxjs';
|
|
5
|
+
import { Pipe, input, output, Component, inject, IterableDiffers, NgModule } from '@angular/core';
|
|
5
6
|
import localeDe from '@angular/common/locales/de';
|
|
6
7
|
import localeEs from '@angular/common/locales/es';
|
|
7
8
|
import localeFr from '@angular/common/locales/fr';
|
|
@@ -94,22 +95,22 @@ const dateConfigMap = {
|
|
|
94
95
|
monthYear: 'MMMM yyyy',
|
|
95
96
|
year: 'yyyy',
|
|
96
97
|
hoursMinutes: 'HH:mm',
|
|
97
|
-
}
|
|
98
|
+
},
|
|
98
99
|
};
|
|
99
100
|
var NgxDateFormat;
|
|
100
101
|
(function (NgxDateFormat) {
|
|
101
102
|
NgxDateFormat["DAY_MONTH_YEAR"] = "DAY_MONTH_YEAR";
|
|
102
103
|
NgxDateFormat["FULL_DATE"] = "FULL_DATE";
|
|
103
|
-
NgxDateFormat["MONTH_YEAR"] = "MONTH_YEAR";
|
|
104
104
|
NgxDateFormat["HOURS_MINUTES"] = "HOURS_MINUTES";
|
|
105
|
+
NgxDateFormat["MONTH_YEAR"] = "MONTH_YEAR";
|
|
105
106
|
NgxDateFormat["YEAR"] = "YEAR";
|
|
106
107
|
})(NgxDateFormat || (NgxDateFormat = {}));
|
|
107
108
|
const fieldConfigDate = {
|
|
109
|
+
DAY_MONTH_YEAR: 'dayMonthYear',
|
|
110
|
+
FULL_DATE: 'fullDate',
|
|
111
|
+
HOURS_MINUTES: 'hoursMinutes',
|
|
108
112
|
MONTH_YEAR: 'monthYear',
|
|
109
113
|
YEAR: 'year',
|
|
110
|
-
HOURS_MINUTES: 'hoursMinutes',
|
|
111
|
-
FULL_DATE: 'fullDate',
|
|
112
|
-
DAY_MONTH_YEAR: 'dayMonthYear',
|
|
113
114
|
};
|
|
114
115
|
/**
|
|
115
116
|
* Enum used to set the group event logic
|
|
@@ -120,14 +121,6 @@ var NgxTimelineEventGroup;
|
|
|
120
121
|
NgxTimelineEventGroup["MONTH_YEAR"] = "MONTH_YEAR";
|
|
121
122
|
NgxTimelineEventGroup["DAY_MONTH_YEAR"] = "DAY_MONTH_YEAR";
|
|
122
123
|
})(NgxTimelineEventGroup || (NgxTimelineEventGroup = {}));
|
|
123
|
-
/**
|
|
124
|
-
* Enum used to set the group event logic
|
|
125
|
-
*/
|
|
126
|
-
var NgxTimelineOrientation;
|
|
127
|
-
(function (NgxTimelineOrientation) {
|
|
128
|
-
NgxTimelineOrientation["HORIZONTAL"] = "HORIZONTAL";
|
|
129
|
-
NgxTimelineOrientation["VERTICAL"] = "VERTICAL";
|
|
130
|
-
})(NgxTimelineOrientation || (NgxTimelineOrientation = {}));
|
|
131
124
|
const fieldsToAddEventGroup = {
|
|
132
125
|
YEAR: ['getFullYear'],
|
|
133
126
|
MONTH_YEAR: ['getFullYear', 'getMonth'],
|
|
@@ -139,7 +132,15 @@ const periodKeyDateFormat = {
|
|
|
139
132
|
DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,
|
|
140
133
|
};
|
|
141
134
|
/**
|
|
142
|
-
* Enum used to set the
|
|
135
|
+
* Enum used to set the group event logic.
|
|
136
|
+
*/
|
|
137
|
+
var NgxTimelineOrientation;
|
|
138
|
+
(function (NgxTimelineOrientation) {
|
|
139
|
+
NgxTimelineOrientation["HORIZONTAL"] = "HORIZONTAL";
|
|
140
|
+
NgxTimelineOrientation["VERTICAL"] = "VERTICAL";
|
|
141
|
+
})(NgxTimelineOrientation || (NgxTimelineOrientation = {}));
|
|
142
|
+
/**
|
|
143
|
+
* Enum used to set the change side event logic.
|
|
143
144
|
*/
|
|
144
145
|
var NgxTimelineEventChangeSide;
|
|
145
146
|
(function (NgxTimelineEventChangeSide) {
|
|
@@ -161,34 +162,80 @@ var NgxTimelineItemPosition;
|
|
|
161
162
|
NgxTimelineItemPosition["ON_RIGHT"] = "ON_RIGHT";
|
|
162
163
|
})(NgxTimelineItemPosition || (NgxTimelineItemPosition = {}));
|
|
163
164
|
|
|
164
|
-
class
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Output click event emitter
|
|
180
|
-
*/
|
|
181
|
-
this.clickEmitter = new BehaviorSubject(null);
|
|
182
|
-
this.ngxTimelineItemPosition = NgxTimelineItemPosition;
|
|
183
|
-
this.ngxTimelineOrientation = NgxTimelineOrientation;
|
|
184
|
-
this.monthAbbr = 'MMM';
|
|
185
|
-
this.dayFormat = 'dd';
|
|
165
|
+
class NgxDatePipe {
|
|
166
|
+
transform(date, dateFormat, langCode) {
|
|
167
|
+
const configDate = this.getDateConfig(langCode);
|
|
168
|
+
let dateFormatString = 'yyyy';
|
|
169
|
+
if (dateFormat === undefined) {
|
|
170
|
+
console.warn('frxjs-ngx-timeline: no date format defined.');
|
|
171
|
+
}
|
|
172
|
+
else if (dateFormat in NgxDateFormat) {
|
|
173
|
+
dateFormatString = this.dateFormat(dateFormat, configDate);
|
|
174
|
+
}
|
|
175
|
+
else if (typeof dateFormat === 'string') {
|
|
176
|
+
dateFormatString = dateFormat;
|
|
177
|
+
}
|
|
178
|
+
return new DatePipe(configDate.code).transform(new Date(date), dateFormatString);
|
|
186
179
|
}
|
|
180
|
+
dateFormat(dateFormat, configDate) {
|
|
181
|
+
return configDate[fieldConfigDate[dateFormat]];
|
|
182
|
+
}
|
|
183
|
+
getDateConfig(langCode) {
|
|
184
|
+
const code = langCode ?? defaultSupportedLanguageCode;
|
|
185
|
+
return dateConfigMap[code];
|
|
186
|
+
}
|
|
187
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
188
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: NgxDatePipe, isStandalone: true, name: "ngxdate" });
|
|
189
|
+
}
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxDatePipe, decorators: [{
|
|
191
|
+
type: Pipe,
|
|
192
|
+
args: [{
|
|
193
|
+
name: 'ngxdate',
|
|
194
|
+
}]
|
|
195
|
+
}] });
|
|
196
|
+
|
|
197
|
+
class NgxTimelineEventComponent {
|
|
198
|
+
/**
|
|
199
|
+
* Event to be displayed.
|
|
200
|
+
*/
|
|
201
|
+
event = input.required();
|
|
202
|
+
/**
|
|
203
|
+
* Event position respect to the vertical line (LEFT or RIGHT).
|
|
204
|
+
*/
|
|
205
|
+
colSidePosition = input();
|
|
206
|
+
/**
|
|
207
|
+
* Language code used to format the dates.
|
|
208
|
+
*/
|
|
209
|
+
langCode = input(defaultSupportedLanguageCode);
|
|
210
|
+
/**
|
|
211
|
+
* Inner custom template used to display the event detail.
|
|
212
|
+
*/
|
|
213
|
+
innerEventCustomTemplate = input();
|
|
214
|
+
/**
|
|
215
|
+
* Inner custom template used to display the event description.
|
|
216
|
+
*/
|
|
217
|
+
eventDescriptionCustomTemplate = input();
|
|
218
|
+
/**
|
|
219
|
+
* Boolean used to enable or disable the animations.
|
|
220
|
+
*/
|
|
221
|
+
enableAnimation = input(true);
|
|
222
|
+
/**
|
|
223
|
+
* Orientation of the timeline.
|
|
224
|
+
*/
|
|
225
|
+
orientation = input(NgxTimelineOrientation.VERTICAL);
|
|
226
|
+
/**
|
|
227
|
+
* Output click event emitter.
|
|
228
|
+
*/
|
|
229
|
+
clickEmitter = output();
|
|
230
|
+
ngxTimelineItemPosition = NgxTimelineItemPosition;
|
|
231
|
+
ngxTimelineOrientation = NgxTimelineOrientation;
|
|
232
|
+
monthAbbr = 'MMM';
|
|
233
|
+
dayFormat = 'dd';
|
|
187
234
|
getDateObj() {
|
|
188
|
-
let day;
|
|
189
|
-
let month;
|
|
190
|
-
let year;
|
|
191
|
-
const dateTimestamp = this.event
|
|
235
|
+
let day = undefined;
|
|
236
|
+
let month = undefined;
|
|
237
|
+
let year = undefined;
|
|
238
|
+
const dateTimestamp = this.event().eventInfo?.timestamp;
|
|
192
239
|
if (dateTimestamp) {
|
|
193
240
|
const timestamp = new Date(dateTimestamp);
|
|
194
241
|
const langCode = this.getLangCode();
|
|
@@ -199,120 +246,114 @@ class NgxTimelineEventComponent {
|
|
|
199
246
|
return { day, month, year };
|
|
200
247
|
}
|
|
201
248
|
getLangCode() {
|
|
202
|
-
return this.langCode;
|
|
249
|
+
return this.langCode();
|
|
203
250
|
}
|
|
204
|
-
static
|
|
205
|
-
static
|
|
251
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
252
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: NgxTimelineEventComponent, isStandalone: true, selector: "ngx-timeline-event", inputs: { event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: true, transformFunction: null }, colSidePosition: { classPropertyName: "colSidePosition", publicName: "colSidePosition", isSignal: true, isRequired: false, transformFunction: null }, langCode: { classPropertyName: "langCode", publicName: "langCode", isSignal: true, isRequired: false, transformFunction: null }, innerEventCustomTemplate: { classPropertyName: "innerEventCustomTemplate", publicName: "innerEventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventDescriptionCustomTemplate: { classPropertyName: "eventDescriptionCustomTemplate", publicName: "eventDescriptionCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, enableAnimation: { classPropertyName: "enableAnimation", publicName: "enableAnimation", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.emit(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
253
|
}
|
|
207
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
|
|
208
255
|
type: Component,
|
|
209
|
-
args: [{ selector: 'ngx-timeline-event',
|
|
256
|
+
args: [{ selector: 'ngx-timeline-event', imports: [
|
|
210
257
|
NgClass,
|
|
211
258
|
NgTemplateOutlet,
|
|
212
259
|
TitleCasePipe,
|
|
213
|
-
], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.
|
|
214
|
-
}]
|
|
215
|
-
type: Input
|
|
216
|
-
}], colSidePosition: [{
|
|
217
|
-
type: Input
|
|
218
|
-
}], langCode: [{
|
|
219
|
-
type: Input
|
|
220
|
-
}], innerEventCustomTemplate: [{
|
|
221
|
-
type: Input
|
|
222
|
-
}], eventDescriptionCustomTemplate: [{
|
|
223
|
-
type: Input
|
|
224
|
-
}], enableAnimation: [{
|
|
225
|
-
type: Input
|
|
226
|
-
}], orientation: [{
|
|
227
|
-
type: Input
|
|
228
|
-
}], clickEmitter: [{
|
|
229
|
-
type: Output
|
|
230
|
-
}] } });
|
|
231
|
-
|
|
232
|
-
class NgxDatePipe {
|
|
233
|
-
constructor() {
|
|
234
|
-
}
|
|
235
|
-
transform(date, dateFormat, langCode) {
|
|
236
|
-
let transformedDate = null;
|
|
237
|
-
if (date) {
|
|
238
|
-
const objDate = this.getDateConfig(langCode);
|
|
239
|
-
transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));
|
|
240
|
-
}
|
|
241
|
-
return transformedDate;
|
|
242
|
-
}
|
|
243
|
-
dateFormat(dateFormat, configDate) {
|
|
244
|
-
return configDate[fieldConfigDate[dateFormat]];
|
|
245
|
-
}
|
|
246
|
-
getDateConfig(langCode) {
|
|
247
|
-
const code = langCode ?? defaultSupportedLanguageCode;
|
|
248
|
-
return dateConfigMap[code];
|
|
249
|
-
}
|
|
250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
251
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: NgxDatePipe, isStandalone: true, name: "ngxdate", pure: false }); }
|
|
252
|
-
}
|
|
253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxDatePipe, decorators: [{
|
|
254
|
-
type: Pipe,
|
|
255
|
-
args: [{
|
|
256
|
-
name: 'ngxdate',
|
|
257
|
-
standalone: true,
|
|
258
|
-
pure: false,
|
|
259
|
-
}]
|
|
260
|
-
}], ctorParameters: () => [] });
|
|
260
|
+
], template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.emit(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"] }]
|
|
261
|
+
}] });
|
|
261
262
|
|
|
262
263
|
class NgxTimelineComponent {
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
264
|
+
/**
|
|
265
|
+
* List of events to be displayed.
|
|
266
|
+
*/
|
|
267
|
+
events = input.required();
|
|
268
|
+
/**
|
|
269
|
+
* Language code used to show the date formatted.
|
|
270
|
+
*/
|
|
271
|
+
langCode = input(defaultSupportedLanguageCode);
|
|
272
|
+
/**
|
|
273
|
+
* Boolean used to enable or disable the animations.
|
|
274
|
+
*/
|
|
275
|
+
enableAnimation = input(true);
|
|
276
|
+
/**
|
|
277
|
+
* Boolean used to reverse sort order (default older first).
|
|
278
|
+
*/
|
|
279
|
+
reverseOrder = input(false);
|
|
280
|
+
/**
|
|
281
|
+
* Orientation of the timeline.
|
|
282
|
+
*/
|
|
283
|
+
orientation = input(NgxTimelineOrientation.VERTICAL);
|
|
284
|
+
/**
|
|
285
|
+
* Logic to be applied in order to group events.
|
|
286
|
+
*/
|
|
287
|
+
groupEvent = input(NgxTimelineEventGroup.MONTH_YEAR);
|
|
288
|
+
/**
|
|
289
|
+
* Logic to be applied in order to put events on LEFT or RIGHT.
|
|
290
|
+
*/
|
|
291
|
+
changeSide = input(NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP);
|
|
292
|
+
/**
|
|
293
|
+
* Custom Template displayed before a group of events.
|
|
294
|
+
*/
|
|
295
|
+
periodCustomTemplate = input();
|
|
296
|
+
/**
|
|
297
|
+
* Custom Template displayed to show a single event.
|
|
298
|
+
*/
|
|
299
|
+
eventCustomTemplate = input();
|
|
300
|
+
/**
|
|
301
|
+
* Custom Template displayed to show a separator icon.
|
|
302
|
+
*/
|
|
303
|
+
centerIconCustomTemplate = input();
|
|
304
|
+
/**
|
|
305
|
+
* Custom Template displayed to show the side date.
|
|
306
|
+
*/
|
|
307
|
+
dateInstantCustomTemplate = input();
|
|
308
|
+
/**
|
|
309
|
+
* Custom Template displayed to show the inner event.
|
|
310
|
+
*/
|
|
311
|
+
innerEventCustomTemplate = input();
|
|
312
|
+
/**
|
|
313
|
+
* Inner custom template used to display the event description.
|
|
314
|
+
*/
|
|
315
|
+
eventDescriptionCustomTemplate = input();
|
|
316
|
+
/**
|
|
317
|
+
* Enable virtual scrolling, for rendering performance. Useful when rendering thousands of items.
|
|
318
|
+
*/
|
|
319
|
+
virtualScroll = input(false);
|
|
320
|
+
/**
|
|
321
|
+
* The size of the items in the list (in pixels).
|
|
322
|
+
*/
|
|
323
|
+
virtualScrollItemSize = input(100);
|
|
324
|
+
/**
|
|
325
|
+
* The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.
|
|
326
|
+
*/
|
|
327
|
+
virtualScrollMaxBufferPx = input(200);
|
|
328
|
+
/**
|
|
329
|
+
* The minimum amount of buffer rendered beyond the viewport (in pixels).
|
|
330
|
+
* If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
|
|
331
|
+
*/
|
|
332
|
+
virtualScrollMinBufferPx = input(100);
|
|
333
|
+
/**
|
|
334
|
+
* Output click event emitter.
|
|
335
|
+
*/
|
|
336
|
+
clickEmitter = output();
|
|
337
|
+
groups = {};
|
|
338
|
+
periods = [];
|
|
339
|
+
items = [];
|
|
340
|
+
ngxTimelineItemPosition = NgxTimelineItemPosition;
|
|
341
|
+
ngxTimelineOrientation = NgxTimelineOrientation;
|
|
342
|
+
ngxDateFormat = NgxDateFormat;
|
|
343
|
+
differs = inject(IterableDiffers);
|
|
344
|
+
iterableDiffer = this.differs.find([]).create();
|
|
345
|
+
separator = '/';
|
|
305
346
|
ngOnChanges() {
|
|
306
|
-
this.groupEvents(this.events);
|
|
347
|
+
this.groupEvents(this.events());
|
|
307
348
|
}
|
|
308
349
|
ngDoCheck() {
|
|
309
|
-
const changes = this.iterableDiffer.diff(this.events);
|
|
350
|
+
const changes = this.iterableDiffer.diff(this.events());
|
|
310
351
|
if (changes) {
|
|
311
|
-
this.groupEvents(this.events);
|
|
352
|
+
this.groupEvents(this.events());
|
|
312
353
|
}
|
|
313
354
|
}
|
|
314
355
|
getPeriodKeyDateFormat() {
|
|
315
|
-
return periodKeyDateFormat[this.groupEvent];
|
|
356
|
+
return periodKeyDateFormat[this.groupEvent()];
|
|
316
357
|
}
|
|
317
358
|
clear() {
|
|
318
359
|
this.groups = {};
|
|
@@ -331,7 +372,7 @@ class NgxTimelineComponent {
|
|
|
331
372
|
events.sort((a, b) => {
|
|
332
373
|
const aTime = a.timestamp.getTime();
|
|
333
374
|
const bTime = b.timestamp.getTime();
|
|
334
|
-
return this.reverseOrder ? bTime - aTime : aTime - bTime;
|
|
375
|
+
return this.reverseOrder() ? bTime - aTime : aTime - bTime;
|
|
335
376
|
});
|
|
336
377
|
}
|
|
337
378
|
setGroupsAndPeriods(events) {
|
|
@@ -342,7 +383,7 @@ class NgxTimelineComponent {
|
|
|
342
383
|
const periodKey = this.getPeriodKeyFromEvent(event);
|
|
343
384
|
if (!this.groups[periodKey]) {
|
|
344
385
|
this.groups[periodKey] = [];
|
|
345
|
-
this.periods.push(this.getPeriodInfoFromPeriodKey(periodKey, event));
|
|
386
|
+
this.periods.push({ periodInfo: this.getPeriodInfoFromPeriodKey(periodKey, event) });
|
|
346
387
|
}
|
|
347
388
|
this.groups[periodKey].push(event);
|
|
348
389
|
});
|
|
@@ -354,18 +395,24 @@ class NgxTimelineComponent {
|
|
|
354
395
|
this.items.push(p);
|
|
355
396
|
// in each period putting items on left
|
|
356
397
|
let onLeft = true;
|
|
357
|
-
if (this.changeSide === NgxTimelineEventChangeSide.ALL) {
|
|
398
|
+
if (this.changeSide() === NgxTimelineEventChangeSide.ALL) {
|
|
358
399
|
onLeft = !isLastItemOnLeft;
|
|
359
400
|
}
|
|
360
401
|
const periodInfo = p.periodInfo;
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
402
|
+
if (periodInfo) {
|
|
403
|
+
// insert then all the events in this period
|
|
404
|
+
isLastItemOnLeft = this.addPeriodEvents(periodInfo, onLeft);
|
|
405
|
+
// onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);
|
|
406
|
+
}
|
|
364
407
|
});
|
|
365
408
|
}
|
|
366
409
|
addPeriodEvents(periodInfo, onLeft) {
|
|
367
|
-
|
|
368
|
-
|
|
410
|
+
const periodKey = periodInfo?.periodKey;
|
|
411
|
+
if (periodKey == undefined) {
|
|
412
|
+
return onLeft;
|
|
413
|
+
}
|
|
414
|
+
this.groups[periodKey].forEach((event, index) => {
|
|
415
|
+
const prevEvent = this.groups[periodKey][index - 1];
|
|
369
416
|
if (event.itemPosition) {
|
|
370
417
|
onLeft = event.itemPosition && event.itemPosition === NgxTimelineItemPosition.ON_LEFT;
|
|
371
418
|
}
|
|
@@ -387,7 +434,7 @@ class NgxTimelineComponent {
|
|
|
387
434
|
*/
|
|
388
435
|
compareEvents(prevEvent, event) {
|
|
389
436
|
return this.shouldChangeEventsInPeriod() ||
|
|
390
|
-
this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSide]);
|
|
437
|
+
this.compareEventsField(prevEvent, event, ...(fieldsToCheckEventChangeSideInGroup[this.changeSide()] ?? []));
|
|
391
438
|
}
|
|
392
439
|
compareEventsField(prevEvent, event, ...fields) {
|
|
393
440
|
return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), false);
|
|
@@ -398,61 +445,35 @@ class NgxTimelineComponent {
|
|
|
398
445
|
}
|
|
399
446
|
getPeriodInfo(split, periodKey, firstGroupEvent) {
|
|
400
447
|
return {
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
firstDate: firstGroupEvent.timestamp,
|
|
407
|
-
},
|
|
448
|
+
year: Number(split[0]),
|
|
449
|
+
month: Number(split[1]),
|
|
450
|
+
day: Number(split[2]),
|
|
451
|
+
periodKey,
|
|
452
|
+
firstDate: firstGroupEvent.timestamp,
|
|
408
453
|
};
|
|
409
454
|
}
|
|
410
455
|
shouldChangeEventsInPeriod() {
|
|
411
|
-
return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].
|
|
456
|
+
return [NgxTimelineEventChangeSide.ALL_IN_GROUP, NgxTimelineEventChangeSide.ALL].includes(this.changeSide());
|
|
412
457
|
}
|
|
413
458
|
getPeriodKeyFromEvent(event) {
|
|
414
|
-
return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);
|
|
459
|
+
return fieldsToAddEventGroup[this.groupEvent()].map((field) => event.timestamp[field]()).join(this.separator);
|
|
460
|
+
}
|
|
461
|
+
getOrientationForVirtualScroll() {
|
|
462
|
+
return this.orientation().toLowerCase();
|
|
415
463
|
}
|
|
416
|
-
static
|
|
417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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"] }] }); }
|
|
464
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
465
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: NgxTimelineComponent, isStandalone: true, selector: "ngx-timeline", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: true, transformFunction: null }, langCode: { classPropertyName: "langCode", publicName: "langCode", isSignal: true, isRequired: false, transformFunction: null }, enableAnimation: { classPropertyName: "enableAnimation", publicName: "enableAnimation", isSignal: true, isRequired: false, transformFunction: null }, reverseOrder: { classPropertyName: "reverseOrder", publicName: "reverseOrder", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupEvent: { classPropertyName: "groupEvent", publicName: "groupEvent", isSignal: true, isRequired: false, transformFunction: null }, changeSide: { classPropertyName: "changeSide", publicName: "changeSide", isSignal: true, isRequired: false, transformFunction: null }, periodCustomTemplate: { classPropertyName: "periodCustomTemplate", publicName: "periodCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventCustomTemplate: { classPropertyName: "eventCustomTemplate", publicName: "eventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerIconCustomTemplate: { classPropertyName: "centerIconCustomTemplate", publicName: "centerIconCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateInstantCustomTemplate: { classPropertyName: "dateInstantCustomTemplate", publicName: "dateInstantCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, innerEventCustomTemplate: { classPropertyName: "innerEventCustomTemplate", publicName: "innerEventCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, eventDescriptionCustomTemplate: { classPropertyName: "eventDescriptionCustomTemplate", publicName: "eventDescriptionCustomTemplate", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEmitter: "clickEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"virtualScroll() ? 'virtual-scroll-container' : 'main-container'\">\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n class=\"items-container\"\r\n [ngClass]=\"{horizontal: orientation() === ngxTimelineOrientation.HORIZONTAL}\"\r\n [orientation]=\"getOrientationForVirtualScroll()\"\r\n [itemSize]=\"virtualScrollItemSize()\"\r\n [maxBufferPx]=\"virtualScrollMaxBufferPx()\"\r\n [minBufferPx]=\"virtualScrollMinBufferPx()\"\r\n >\r\n <div *cdkVirtualFor=\"let item of items\">\r\n <ng-template\r\n *ngTemplateOutlet=\"rowTemplate; context: { item: item }\"\r\n ></ng-template>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation() === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <ng-template\r\n *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: index }\"\r\n ></ng-template>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rowTemplate let-item=\"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</ng-template>\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.emit($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,.virtual-scroll-container{display:flex;justify-content:center;width:100%}.virtual-scroll-container{height:100%}.virtual-scroll-container>.horizontal{min-height:0}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.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: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"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
|
|
418
466
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineComponent, decorators: [{
|
|
420
468
|
type: Component,
|
|
421
|
-
args: [{ selector: 'ngx-timeline',
|
|
469
|
+
args: [{ selector: 'ngx-timeline', imports: [
|
|
422
470
|
NgClass,
|
|
423
471
|
NgTemplateOutlet,
|
|
424
472
|
NgxDatePipe,
|
|
425
473
|
NgxTimelineEventComponent,
|
|
426
|
-
|
|
427
|
-
}], propDecorators: { events: [{
|
|
428
|
-
|
|
429
|
-
}], langCode: [{
|
|
430
|
-
type: Input
|
|
431
|
-
}], enableAnimation: [{
|
|
432
|
-
type: Input
|
|
433
|
-
}], reverseOrder: [{
|
|
434
|
-
type: Input
|
|
435
|
-
}], orientation: [{
|
|
436
|
-
type: Input
|
|
437
|
-
}], groupEvent: [{
|
|
438
|
-
type: Input
|
|
439
|
-
}], changeSide: [{
|
|
440
|
-
type: Input
|
|
441
|
-
}], periodCustomTemplate: [{
|
|
442
|
-
type: Input
|
|
443
|
-
}], eventCustomTemplate: [{
|
|
444
|
-
type: Input
|
|
445
|
-
}], centerIconCustomTemplate: [{
|
|
446
|
-
type: Input
|
|
447
|
-
}], dateInstantCustomTemplate: [{
|
|
448
|
-
type: Input
|
|
449
|
-
}], innerEventCustomTemplate: [{
|
|
450
|
-
type: Input
|
|
451
|
-
}], eventDescriptionCustomTemplate: [{
|
|
452
|
-
type: Input
|
|
453
|
-
}], clickEmitter: [{
|
|
454
|
-
type: Output
|
|
455
|
-
}] } });
|
|
474
|
+
ScrollingModule
|
|
475
|
+
], template: "<div [ngClass]=\"virtualScroll() ? 'virtual-scroll-container' : 'main-container'\">\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n class=\"items-container\"\r\n [ngClass]=\"{horizontal: orientation() === ngxTimelineOrientation.HORIZONTAL}\"\r\n [orientation]=\"getOrientationForVirtualScroll()\"\r\n [itemSize]=\"virtualScrollItemSize()\"\r\n [maxBufferPx]=\"virtualScrollMaxBufferPx()\"\r\n [minBufferPx]=\"virtualScrollMinBufferPx()\"\r\n >\r\n <div *cdkVirtualFor=\"let item of items\">\r\n <ng-template\r\n *ngTemplateOutlet=\"rowTemplate; context: { item: item }\"\r\n ></ng-template>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation() === ngxTimelineOrientation.HORIZONTAL}\">\r\n @for (item of items; track item; let index = $index) {\r\n <ng-template\r\n *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: index }\"\r\n ></ng-template>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rowTemplate let-item=\"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</ng-template>\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.emit($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,.virtual-scroll-container{display:flex;justify-content:center;width:100%}.virtual-scroll-container{height:100%}.virtual-scroll-container>.horizontal{min-height:0}.virtual-scroll-container>.horizontal ::ng-deep .cdk-virtual-scroll-content-wrapper{width:max-content;display:flex;flex-direction:row}.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: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"] }]
|
|
476
|
+
}] });
|
|
456
477
|
|
|
457
478
|
registerLocaleData(localeIt);
|
|
458
479
|
registerLocaleData(localeFr);
|
|
@@ -464,16 +485,16 @@ registerLocaleData(localePl);
|
|
|
464
485
|
registerLocaleData(localePt);
|
|
465
486
|
registerLocaleData(localeRu);
|
|
466
487
|
class NgxTimelineModule {
|
|
467
|
-
static
|
|
468
|
-
static
|
|
469
|
-
static
|
|
488
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
489
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineModule, imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent], exports: [NgxDatePipe, NgxTimelineComponent] });
|
|
490
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineModule, imports: [NgxTimelineComponent] });
|
|
470
491
|
}
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxTimelineModule, decorators: [{
|
|
472
493
|
type: NgModule,
|
|
473
494
|
args: [{
|
|
474
495
|
declarations: [],
|
|
475
|
-
imports: [
|
|
476
|
-
exports: [
|
|
496
|
+
imports: [NgxDatePipe, NgxTimelineComponent, NgxTimelineEventComponent],
|
|
497
|
+
exports: [NgxDatePipe, NgxTimelineComponent],
|
|
477
498
|
}]
|
|
478
499
|
}] });
|
|
479
500
|
|