@frxjs/ngx-timeline 17.0.5 → 17.0.8
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 +24 -17
- package/esm2022/lib/components/ngx-timeline-event/ngx-timeline-event.component.mjs +13 -6
- package/esm2022/lib/components/ngx-timeline.component.mjs +14 -7
- package/esm2022/lib/models/NgxConfigObj.mjs +9 -1
- package/esm2022/lib/ngx-timeline.module.mjs +4 -4
- package/esm2022/lib/pipes/ngx-date-pipe.mjs +3 -3
- package/fesm2022/frxjs-ngx-timeline.mjs +39 -17
- package/fesm2022/frxjs-ngx-timeline.mjs.map +1 -1
- package/lib/components/ngx-timeline-event/ngx-timeline-event.component.d.ts +7 -1
- package/lib/components/ngx-timeline.component.d.ts +8 -3
- package/lib/models/NgxConfigObj.d.ts +7 -0
- package/package.json +1 -1
|
@@ -105,6 +105,14 @@ export var NgxTimelineEventGroup;
|
|
|
105
105
|
NgxTimelineEventGroup["MONTH_YEAR"] = "MONTH_YEAR";
|
|
106
106
|
NgxTimelineEventGroup["DAY_MONTH_YEAR"] = "DAY_MONTH_YEAR";
|
|
107
107
|
})(NgxTimelineEventGroup || (NgxTimelineEventGroup = {}));
|
|
108
|
+
/**
|
|
109
|
+
* Enum used to set the group event logic
|
|
110
|
+
*/
|
|
111
|
+
export var NgxTimelineOrientation;
|
|
112
|
+
(function (NgxTimelineOrientation) {
|
|
113
|
+
NgxTimelineOrientation["HORIZONTAL"] = "HORIZONTAL";
|
|
114
|
+
NgxTimelineOrientation["VERTICAL"] = "VERTICAL";
|
|
115
|
+
})(NgxTimelineOrientation || (NgxTimelineOrientation = {}));
|
|
108
116
|
export const fieldsToAddEventGroup = {
|
|
109
117
|
YEAR: ['getFullYear'],
|
|
110
118
|
MONTH_YEAR: ['getFullYear', 'getMonth'],
|
|
@@ -131,4 +139,4 @@ export const fieldsToCheckEventChangeSideInGroup = {
|
|
|
131
139
|
ON_DIFFERENT_MONTH_IN_GROUP: ['getFullYear', 'getMonth'],
|
|
132
140
|
ON_DIFFERENT_HMS_IN_GROUP: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'],
|
|
133
141
|
};
|
|
134
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
142
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmd4Q29uZmlnT2JqLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXRpbWVsaW5lL3NyYy9saWIvbW9kZWxzL05neENvbmZpZ09iai50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSxzQkFBc0IsR0FBRyxDQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDO0FBZW5HLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBa0I7SUFDMUMsRUFBRSxFQUFFO1FBQ0YsSUFBSSxFQUFFLE9BQU87UUFDYixRQUFRLEVBQUUsbUJBQW1CO1FBQzdCLFlBQVksRUFBRSxjQUFjO1FBQzVCLFNBQVMsRUFBRSxXQUFXO1FBQ3RCLElBQUksRUFBRSxNQUFNO1FBQ1osWUFBWSxFQUFFLFNBQVM7S0FDeEI7SUFDRCxFQUFFLEVBQUU7UUFDRixJQUFJLEVBQUUsT0FBTztRQUNiLFFBQVEsRUFBRSxpQkFBaUI7UUFDM0IsWUFBWSxFQUFFLGNBQWM7UUFDNUIsU0FBUyxFQUFFLFdBQVc7UUFDdEIsSUFBSSxFQUFFLE1BQU07UUFDWixZQUFZLEVBQUUsT0FBTztLQUN0QjtJQUNELEVBQUUsRUFBRTtRQUNGLElBQUksRUFBRSxPQUFPO1FBQ2IsUUFBUSxFQUFFLGlCQUFpQjtRQUMzQixZQUFZLEVBQUUsY0FBYztRQUM1QixTQUFTLEVBQUUsV0FBVztRQUN0QixJQUFJLEVBQUUsTUFBTTtRQUNaLFlBQVksRUFBRSxPQUFPO0tBQ3RCO0lBQ0QsRUFBRSxFQUFFO1FBQ0YsSUFBSSxFQUFFLElBQUk7UUFDVixRQUFRLEVBQUUsaUJBQWlCO1FBQzNCLFlBQVksRUFBRSxjQUFjO1FBQzVCLFNBQVMsRUFBRSxXQUFXO1FBQ3RCLElBQUksRUFBRSxNQUFNO1FBQ1osWUFBWSxFQUFFLE9BQU87S0FDdEI7SUFDRCxFQUFFLEVBQUU7UUFDRixJQUFJLEVBQUUsSUFBSTtRQUNWLFFBQVEsRUFBRSxpQkFBaUI7UUFDM0IsWUFBWSxFQUFFLGNBQWM7UUFDNUIsU0FBUyxFQUFFLFdBQVc7UUFDdEIsSUFBSSxFQUFFLE1BQU07UUFDWixZQUFZLEVBQUUsT0FBTztLQUN0QjtJQUNELEVBQUUsRUFBRTtRQUNGLElBQUksRUFBRSxPQUFPO1FBQ2IsUUFBUSxFQUFFLGlCQUFpQjtRQUMzQixZQUFZLEVBQUUsY0FBYztRQUM1QixTQUFTLEVBQUUsV0FBVztRQUN0QixJQUFJLEVBQUUsTUFBTTtRQUNaLFlBQVksRUFBRSxPQUFPO0tBQ3RCO0lBQ0QsRUFBRSxFQUFFO1FBQ0YsSUFBSSxFQUFFLElBQUk7UUFDVixRQUFRLEVBQUUsaUJBQWlCO1FBQzNCLFlBQVksRUFBRSxjQUFjO1FBQzVCLFNBQVMsRUFBRSxXQUFXO1FBQ3RCLElBQUksRUFBRSxNQUFNO1FBQ1osWUFBWSxFQUFFLE9BQU87S0FDdEI7SUFDRCxFQUFFLEVBQUU7UUFDRixJQUFJLEVBQUUsSUFBSTtRQUNWLFFBQVEsRUFBRSxpQkFBaUI7UUFDM0IsWUFBWSxFQUFFLGNBQWM7UUFDNUIsU0FBUyxFQUFFLFdBQVc7UUFDdEIsSUFBSSxFQUFFLE1BQU07UUFDWixZQUFZLEVBQUUsT0FBTztLQUN0QjtJQUNELEVBQUUsRUFBRTtRQUNGLElBQUksRUFBRSxJQUFJO1FBQ1YsUUFBUSxFQUFFLGlCQUFpQjtRQUMzQixZQUFZLEVBQUUsY0FBYztRQUM1QixTQUFTLEVBQUUsV0FBVztRQUN0QixJQUFJLEVBQUUsTUFBTTtRQUNaLFlBQVksRUFBRSxPQUFPO0tBQ3RCO0lBQ0QsRUFBRSxFQUFFO1FBQ0YsSUFBSSxFQUFFLE9BQU87UUFDYixRQUFRLEVBQUUsaUJBQWlCO1FBQzNCLFlBQVksRUFBRSxjQUFjO1FBQzVCLFNBQVMsRUFBRSxXQUFXO1FBQ3RCLElBQUksRUFBRSxNQUFNO1FBQ1osWUFBWSxFQUFFLE9BQU87S0FDdEI7Q0FDRixDQUFDO0FBRUYsTUFBTSxDQUFOLElBQVksYUFNWDtBQU5ELFdBQVksYUFBYTtJQUN2QixrREFBaUMsQ0FBQTtJQUNqQyx3Q0FBdUIsQ0FBQTtJQUN2QiwwQ0FBeUIsQ0FBQTtJQUN6QixnREFBK0IsQ0FBQTtJQUMvQiw4QkFBYSxDQUFBO0FBQ2YsQ0FBQyxFQU5XLGFBQWEsS0FBYixhQUFhLFFBTXhCO0FBRUQsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHO0lBQzdCLFVBQVUsRUFBRSxXQUFXO0lBQ3ZCLElBQUksRUFBRSxNQUFNO0lBQ1osYUFBYSxFQUFFLGNBQWM7SUFDN0IsU0FBUyxFQUFFLFVBQVU7SUFDckIsY0FBYyxFQUFFLGNBQWM7Q0FDL0IsQ0FBQztBQUVGOztHQUVHO0FBQ0gsTUFBTSxDQUFOLElBQVkscUJBSVg7QUFKRCxXQUFZLHFCQUFxQjtJQUMvQixzQ0FBYSxDQUFBO0lBQ2Isa0RBQXlCLENBQUE7SUFDekIsMERBQWlDLENBQUE7QUFDbkMsQ0FBQyxFQUpXLHFCQUFxQixLQUFyQixxQkFBcUIsUUFJaEM7QUFFRDs7R0FFRztBQUNILE1BQU0sQ0FBTixJQUFZLHNCQUdYO0FBSEQsV0FBWSxzQkFBc0I7SUFDaEMsbURBQXlCLENBQUE7SUFDekIsK0NBQXFCLENBQUE7QUFDdkIsQ0FBQyxFQUhXLHNCQUFzQixLQUF0QixzQkFBc0IsUUFHakM7QUFFRCxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRztJQUNuQyxJQUFJLEVBQUUsQ0FBQyxhQUFhLENBQUM7SUFDckIsVUFBVSxFQUFFLENBQUMsYUFBYSxFQUFFLFVBQVUsQ0FBQztJQUN2QyxjQUFjLEVBQUUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxFQUFFLFNBQVMsQ0FBQztDQUN2RCxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQUc7SUFDakMsSUFBSSxFQUFFLGFBQWEsQ0FBQyxJQUFJO0lBQ3hCLFVBQVUsRUFBRSxhQUFhLENBQUMsVUFBVTtJQUNwQyxjQUFjLEVBQUUsYUFBYSxDQUFDLGNBQWM7Q0FDN0MsQ0FBQztBQUVGOztHQUVHO0FBQ0gsTUFBTSxDQUFOLElBQVksMEJBTVg7QUFORCxXQUFZLDBCQUEwQjtJQUNwQyx5Q0FBVyxDQUFBO0lBQ1gsMkRBQTZCLENBQUE7SUFDN0IscUZBQXVELENBQUE7SUFDdkQscUZBQXVELENBQUE7SUFDdkQseUZBQTJELENBQUE7QUFDN0QsQ0FBQyxFQU5XLDBCQUEwQixLQUExQiwwQkFBMEIsUUFNckM7QUFFRCxNQUFNLENBQUMsTUFBTSxtQ0FBbUMsR0FBRztJQUNqRCx5QkFBeUIsRUFBRSxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsU0FBUyxDQUFDO0lBQ2pFLDJCQUEyQixFQUFFLENBQUMsYUFBYSxFQUFFLFVBQVUsQ0FBQztJQUN4RCx5QkFBeUIsRUFBRSxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsWUFBWSxDQUFDO0NBQzFHLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3Qgc3VwcG9ydGVkTGFuZ3VhZ2VDb2RlcyA9IFsnZW4nLCAnaXQnLCAnZnInLCAnZGUnLCAnZXMnLCAnc2wnLCAndHInLCAncGwnLCAncHQnLCAncnUnXTtcblxuZXhwb3J0IGludGVyZmFjZSBOZ3hDb25maWdEYXRlIHtcbiAgY29kZTogc3RyaW5nO1xuICBkYXlNb250aFllYXI6IHN0cmluZztcbiAgZnVsbERhdGU6IHN0cmluZztcbiAgaG91cnNNaW51dGVzOiBzdHJpbmc7XG4gIG1vbnRoWWVhcjogc3RyaW5nO1xuICB5ZWFyOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgTmd4RGF0ZU9iak1hcCB7XG4gIFtrZXk6IHN0cmluZ106IE5neENvbmZpZ0RhdGU7XG59XG5cbmV4cG9ydCBjb25zdCBkYXRlQ29uZmlnTWFwOiBOZ3hEYXRlT2JqTWFwID0ge1xuICBlbjoge1xuICAgIGNvZGU6ICdlbi1VUycsXG4gICAgZnVsbERhdGU6ICdNTS9kZC95eXl5IGg6bW0gYScsXG4gICAgZGF5TW9udGhZZWFyOiAnZGQgTU1NTSB5eXl5JyxcbiAgICBtb250aFllYXI6ICdNTU1NIHl5eXknLFxuICAgIHllYXI6ICd5eXl5JyxcbiAgICBob3Vyc01pbnV0ZXM6ICdoaDptbSBhJyxcbiAgfSxcbiAgaXQ6IHtcbiAgICBjb2RlOiAnaXQtSVQnLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfSxcbiAgZnI6IHtcbiAgICBjb2RlOiAnZnItRlInLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfSxcbiAgZGU6IHtcbiAgICBjb2RlOiAnZGUnLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfSxcbiAgZXM6IHtcbiAgICBjb2RlOiAnZXMnLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfSxcbiAgc2w6IHtcbiAgICBjb2RlOiAnc2wtU0wnLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfSxcbiAgdHI6IHtcbiAgICBjb2RlOiAndHInLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfSxcbiAgcGw6IHtcbiAgICBjb2RlOiAncGwnLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfSxcbiAgcHQ6IHtcbiAgICBjb2RlOiAncHQnLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfSxcbiAgcnU6IHtcbiAgICBjb2RlOiAncnUtUlUnLFxuICAgIGZ1bGxEYXRlOiAnZGQvTU0veXl5eSBIOm1tJyxcbiAgICBkYXlNb250aFllYXI6ICdkZCBNTU1NIHl5eXknLFxuICAgIG1vbnRoWWVhcjogJ01NTU0geXl5eScsXG4gICAgeWVhcjogJ3l5eXknLFxuICAgIGhvdXJzTWludXRlczogJ0hIOm1tJyxcbiAgfVxufTtcblxuZXhwb3J0IGVudW0gTmd4RGF0ZUZvcm1hdCB7XG4gIERBWV9NT05USF9ZRUFSID0gJ0RBWV9NT05USF9ZRUFSJyxcbiAgRlVMTF9EQVRFID0gJ0ZVTExfREFURScsXG4gIE1PTlRIX1lFQVIgPSAnTU9OVEhfWUVBUicsXG4gIEhPVVJTX01JTlVURVMgPSAnSE9VUlNfTUlOVVRFUycsXG4gIFlFQVIgPSAnWUVBUidcbn1cblxuZXhwb3J0IGNvbnN0IGZpZWxkQ29uZmlnRGF0ZSA9IHtcbiAgTU9OVEhfWUVBUjogJ21vbnRoWWVhcicsXG4gIFlFQVI6ICd5ZWFyJyxcbiAgSE9VUlNfTUlOVVRFUzogJ2hvdXJzTWludXRlcycsXG4gIEZVTExfREFURTogJ2Z1bGxEYXRlJyxcbiAgREFZX01PTlRIX1lFQVI6ICdkYXlNb250aFllYXInLFxufTtcblxuLyoqXG4gKiBFbnVtIHVzZWQgdG8gc2V0IHRoZSBncm91cCBldmVudCBsb2dpY1xuICovXG5leHBvcnQgZW51bSBOZ3hUaW1lbGluZUV2ZW50R3JvdXAge1xuICBZRUFSID0gJ1lFQVInLFxuICBNT05USF9ZRUFSID0gJ01PTlRIX1lFQVInLFxuICBEQVlfTU9OVEhfWUVBUiA9ICdEQVlfTU9OVEhfWUVBUidcbn1cblxuLyoqXG4gKiBFbnVtIHVzZWQgdG8gc2V0IHRoZSBncm91cCBldmVudCBsb2dpY1xuICovXG5leHBvcnQgZW51bSBOZ3hUaW1lbGluZU9yaWVudGF0aW9uIHtcbiAgSE9SSVpPTlRBTCA9ICdIT1JJWk9OVEFMJyxcbiAgVkVSVElDQUwgPSAnVkVSVElDQUwnLFxufVxuXG5leHBvcnQgY29uc3QgZmllbGRzVG9BZGRFdmVudEdyb3VwID0ge1xuICBZRUFSOiBbJ2dldEZ1bGxZZWFyJ10sXG4gIE1PTlRIX1lFQVI6IFsnZ2V0RnVsbFllYXInLCAnZ2V0TW9udGgnXSxcbiAgREFZX01PTlRIX1lFQVI6IFsnZ2V0RnVsbFllYXInLCAnZ2V0TW9udGgnLCAnZ2V0RGF0ZSddLFxufTtcblxuZXhwb3J0IGNvbnN0IHBlcmlvZEtleURhdGVGb3JtYXQgPSB7XG4gIFlFQVI6IE5neERhdGVGb3JtYXQuWUVBUixcbiAgTU9OVEhfWUVBUjogTmd4RGF0ZUZvcm1hdC5NT05USF9ZRUFSLFxuICBEQVlfTU9OVEhfWUVBUjogTmd4RGF0ZUZvcm1hdC5EQVlfTU9OVEhfWUVBUixcbn07XG5cbi8qKlxuICogRW51bSB1c2VkIHRvIHNldCB0aGUgY2hhbmdlIHNpZGUgZXZlbnQgbG9naWNcbiAqL1xuZXhwb3J0IGVudW0gTmd4VGltZWxpbmVFdmVudENoYW5nZVNpZGUge1xuICBBTEwgPSAnQUxMJyxcbiAgQUxMX0lOX0dST1VQID0gJ0FMTF9JTl9HUk9VUCcsXG4gIE9OX0RJRkZFUkVOVF9EQVlfSU5fR1JPVVAgPSAnT05fRElGRkVSRU5UX0RBWV9JTl9HUk9VUCcsXG4gIE9OX0RJRkZFUkVOVF9ITVNfSU5fR1JPVVAgPSAnT05fRElGRkVSRU5UX0hNU19JTl9HUk9VUCcsXG4gIE9OX0RJRkZFUkVOVF9NT05USF9JTl9HUk9VUCA9ICdPTl9ESUZGRVJFTlRfTU9OVEhfSU5fR1JPVVAnXG59XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNUb0NoZWNrRXZlbnRDaGFuZ2VTaWRlSW5Hcm91cCA9IHtcbiAgT05fRElGRkVSRU5UX0RBWV9JTl9HUk9VUDogWydnZXRGdWxsWWVhcicsICdnZXRNb250aCcsICdnZXREYXRlJ10sXG4gIE9OX0RJRkZFUkVOVF9NT05USF9JTl9HUk9VUDogWydnZXRGdWxsWWVhcicsICdnZXRNb250aCddLFxuICBPTl9ESUZGRVJFTlRfSE1TX0lOX0dST1VQOiBbJ2dldEZ1bGxZZWFyJywgJ2dldE1vbnRoJywgJ2dldERhdGUnLCAnZ2V0SG91cnMnLCAnZ2V0TWludXRlcycsICdnZXRTZWNvbmRzJ10sXG59O1xuIl19
|
|
@@ -23,11 +23,11 @@ registerLocaleData(localePl);
|
|
|
23
23
|
registerLocaleData(localePt);
|
|
24
24
|
registerLocaleData(localeRu);
|
|
25
25
|
export class NgxTimelineModule {
|
|
26
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
27
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.
|
|
28
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.
|
|
26
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
27
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineModule, declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe], imports: [CommonModule], exports: [NgxTimelineComponent, NgxDatePipe] }); }
|
|
28
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule] }); }
|
|
29
29
|
}
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineModule, decorators: [{
|
|
31
31
|
type: NgModule,
|
|
32
32
|
args: [{
|
|
33
33
|
declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],
|
|
@@ -21,10 +21,10 @@ export class NgxDatePipe {
|
|
|
21
21
|
const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];
|
|
22
22
|
return configDate;
|
|
23
23
|
}
|
|
24
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
25
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.
|
|
24
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
25
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: NgxDatePipe, name: "ngxdate", pure: false }); }
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxDatePipe, decorators: [{
|
|
28
28
|
type: Pipe,
|
|
29
29
|
args: [{ name: 'ngxdate', pure: false }]
|
|
30
30
|
}], ctorParameters: () => [] });
|
|
@@ -120,6 +120,14 @@ var NgxTimelineEventGroup;
|
|
|
120
120
|
NgxTimelineEventGroup["MONTH_YEAR"] = "MONTH_YEAR";
|
|
121
121
|
NgxTimelineEventGroup["DAY_MONTH_YEAR"] = "DAY_MONTH_YEAR";
|
|
122
122
|
})(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 = {}));
|
|
123
131
|
const fieldsToAddEventGroup = {
|
|
124
132
|
YEAR: ['getFullYear'],
|
|
125
133
|
MONTH_YEAR: ['getFullYear', 'getMonth'],
|
|
@@ -159,11 +167,16 @@ class NgxTimelineEventComponent {
|
|
|
159
167
|
* Boolean used to enable or disable the animations
|
|
160
168
|
*/
|
|
161
169
|
this.enableAnimation = true;
|
|
170
|
+
/**
|
|
171
|
+
* Orientation of the timeline
|
|
172
|
+
*/
|
|
173
|
+
this.orientation = NgxTimelineOrientation.VERTICAL;
|
|
162
174
|
/**
|
|
163
175
|
* Output click event emitter
|
|
164
176
|
*/
|
|
165
177
|
this.clickEmitter = new BehaviorSubject(null);
|
|
166
178
|
this.ngxTimelineItemPosition = NgxTimelineItemPosition;
|
|
179
|
+
this.ngxTimelineOrientation = NgxTimelineOrientation;
|
|
167
180
|
this.monthAbbr = 'MMM';
|
|
168
181
|
this.dayFormat = 'dd';
|
|
169
182
|
}
|
|
@@ -184,12 +197,12 @@ class NgxTimelineEventComponent {
|
|
|
184
197
|
getLangCode() {
|
|
185
198
|
return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];
|
|
186
199
|
}
|
|
187
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
200
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NgxTimelineEventComponent, 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 <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <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 <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: [".event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.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 white;border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid white;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 white}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid white}.event{background:#fff;border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:#fff 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #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 .icon-container nb-icon{color:orange;width:1.5rem;height:1.5rem;margin-bottom:.1rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .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-info-container .event-info-footer .footer-inner-container nb-icon{color:#006cb4;width:1rem;height:1rem;margin-bottom:.1rem}.event-container .event-info-container .event-info-footer p{margin:0;color:#006cb4}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:#e9e9e9}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] }); }
|
|
189
202
|
}
|
|
190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
|
|
191
204
|
type: Component,
|
|
192
|
-
args: [{ selector: 'ngx-timeline-event', template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\">\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <ng-container *ngTemplateOutlet=\"eventDescriptionCustomTemplate || eventDescriptionContainer; context: {event: event}\"></ng-container>\n </div>\n </div>\n\n <div class=\"event-divider-container\">\n <hr
|
|
205
|
+
args: [{ selector: 'ngx-timeline-event', template: "<div class=\"event-wrapper-container\" (click)=\"clickEmitter.next(event)\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_RIGHT\" class=\"arrow left\"></div>\n <div class=\"event\" [ngClass]=\"{'enableAnimation': enableAnimation}\">\n <ng-container *ngTemplateOutlet=\"innerEventCustomTemplate || innerEventContainer; context: {event: event}\"\n >\n </ng-container>\n </div>\n <div *ngIf=\"colSidePosition===ngxTimelineItemPosition.ON_LEFT\" class=\"arrow right\"></div>\n</div>\n\n<ng-template #innerEventContainer let-event=event>\n <div class=\"event-container\" [ngClass]=\"{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}\">\n <div class=\"event-info-container\">\n <div class=\"event-info-header\">\n <div class=\"title-container\">{{event?.eventInfo?.title | titlecase}}</div>\n </div>\n <div class=\"event-info-body\">\n <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 <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n <div>\n <p>{{dateObj?.month}}</p>\n </div>\n <div>\n <p class=\"day\">{{dateObj?.day}}</p>\n </div>\n <div>\n <p>{{dateObj?.year}}</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n<ng-template #eventDescriptionContainer let-event=event>\n <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n</ng-template>\n", styles: [".event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer}.event-wrapper-container.horizontal{display:flex;flex-direction:column;padding:0 3rem}.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 white;border-bottom:none}.event-wrapper-container.horizontal .arrow.left{border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid white;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 white}.arrow.left{filter:drop-shadow(-1px 0px 0px rgba(36,74,110,.1333333333));border-right:.5rem solid white}.event{background:#fff;border-radius:.8rem;padding:1rem;width:100%;margin:1rem 0}.event.enableAnimation:hover{padding:2rem;transition:all .5s ease-in-out}.event.enableAnimation:not(:hover){padding:1rem;transition:all .5s ease-in-out}.event:not(.hour){background:#fff 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #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 .icon-container nb-icon{color:orange;width:1.5rem;height:1.5rem;margin-bottom:.1rem}.event-container .event-info-container .event-info-header .title-container{font-weight:700;font-size:15px}.event-container .event-info-container .event-info-body{padding:.5rem 0;display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:anywhere}.event-container .event-info-container .event-info-body .event-info-description{margin-bottom:.5rem;font-size:13px}.event-container .event-info-container .event-info-body .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-info-container .event-info-footer .footer-inner-container nb-icon{color:#006cb4;width:1rem;height:1rem;margin-bottom:.1rem}.event-container .event-info-container .event-info-footer p{margin:0;color:#006cb4}.event-container .event-divider-container{display:flex;justify-content:center;align-items:center;padding:.1rem;flex:5 5 0}.event-container .event-divider-container hr{height:100%;width:1px;background:#e9e9e9}.event-container .event-date-container{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:.1rem;flex:15 15 0}.event-container .event-date-container p{margin:0;text-align:center}.event-container .event-date-container p.day{font-size:32px;font-weight:700;padding:.5rem 0}\n"] }]
|
|
193
206
|
}], ctorParameters: () => [], propDecorators: { event: [{
|
|
194
207
|
type: Input
|
|
195
208
|
}], colSidePosition: [{
|
|
@@ -202,6 +215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
202
215
|
type: Input
|
|
203
216
|
}], enableAnimation: [{
|
|
204
217
|
type: Input
|
|
218
|
+
}], orientation: [{
|
|
219
|
+
type: Input
|
|
205
220
|
}], clickEmitter: [{
|
|
206
221
|
type: Output
|
|
207
222
|
}] } });
|
|
@@ -225,10 +240,10 @@ class NgxDatePipe {
|
|
|
225
240
|
const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];
|
|
226
241
|
return configDate;
|
|
227
242
|
}
|
|
228
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
229
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.
|
|
243
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
244
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: NgxDatePipe, name: "ngxdate", pure: false }); }
|
|
230
245
|
}
|
|
231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxDatePipe, decorators: [{
|
|
232
247
|
type: Pipe,
|
|
233
248
|
args: [{ name: 'ngxdate', pure: false }]
|
|
234
249
|
}], ctorParameters: () => [] });
|
|
@@ -243,12 +258,16 @@ class NgxTimelineComponent {
|
|
|
243
258
|
* Boolean used to reverse sort order (default older first)
|
|
244
259
|
*/
|
|
245
260
|
this.reverseOrder = false;
|
|
261
|
+
/**
|
|
262
|
+
* Orientation of the timeline
|
|
263
|
+
*/
|
|
264
|
+
this.orientation = NgxTimelineOrientation.VERTICAL;
|
|
246
265
|
/**
|
|
247
266
|
* Logic to be applied in order to group events
|
|
248
267
|
*/
|
|
249
268
|
this.groupEvent = NgxTimelineEventGroup.MONTH_YEAR;
|
|
250
269
|
/**
|
|
251
|
-
* Logic to be applied in order to put
|
|
270
|
+
* Logic to be applied in order to put events on LEFT or RIGHT
|
|
252
271
|
*/
|
|
253
272
|
this.changeSide = NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP;
|
|
254
273
|
/**
|
|
@@ -259,6 +278,7 @@ class NgxTimelineComponent {
|
|
|
259
278
|
this.periods = [];
|
|
260
279
|
this.items = [];
|
|
261
280
|
this.ngxTimelineItemPosition = NgxTimelineItemPosition;
|
|
281
|
+
this.ngxTimelineOrientation = NgxTimelineOrientation;
|
|
262
282
|
this.ngxDateFormat = NgxDateFormat;
|
|
263
283
|
this.differs = inject(IterableDiffers);
|
|
264
284
|
this.iterableDiffer = this.differs.find([]).create();
|
|
@@ -378,12 +398,12 @@ class NgxTimelineComponent {
|
|
|
378
398
|
getPeriodKeyFromEvent(event) {
|
|
379
399
|
return fieldsToAddEventGroup[this.groupEvent].map((field) => event.timestamp[field]()).join(this.separator);
|
|
380
400
|
}
|
|
381
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
382
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NgxTimelineComponent, selector: "ngx-timeline", inputs: { events: "events", langCode: "langCode", enableAnimation: "enableAnimation", reverseOrder: "reverseOrder", 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\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index 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 #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [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: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.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:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:18 18 0}.col-left.col-event{flex:18 18 0;padding:0;align-items:flex-end}.col-right{align-items:flex-start}.col-right.col-period{flex:77 77 0}.col-right.col-event{flex:77 77 0;padding:0}.col-center{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }] }); }
|
|
401
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NgxTimelineComponent, 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 <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index 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 #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [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: [".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;min-width:250px}.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:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: ["event", "colSidePosition", "langCode", "innerEventCustomTemplate", "eventDescriptionCustomTemplate", "enableAnimation", "orientation"], outputs: ["clickEmitter"] }, { kind: "pipe", type: NgxDatePipe, name: "ngxdate" }] }); }
|
|
383
403
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineComponent, decorators: [{
|
|
385
405
|
type: Component,
|
|
386
|
-
args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index 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 #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [enableAnimation]=\"enableAnimation\"\r\n [innerEventCustomTemplate]=\"innerEventCustomTemplate\"\r\n [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: [".main-container{display:flex;justify-content:center;width:100%}.items-container{padding:1rem 0;min-width:max(20rem,100%)}.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:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:
|
|
406
|
+
args: [{ selector: 'ngx-timeline', template: "<div class=\"main-container\">\r\n <div class=\"items-container\" [ngClass]=\"{'horizontal': orientation === ngxTimelineOrientation.HORIZONTAL}\">\r\n <div *ngFor=\"let item of items; let index = index;\" class=\"row\">\r\n <!-- DESKTOP -->\r\n <div class=\"col col-left desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}\"></ng-container>\r\n </div>\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right desktop\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n <div class=\"hour right\" *ngIf=\"item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"col col-left mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"hour left\" *ngIf=\"item.eventInfo\">\r\n <div class=\"hour-inner-container\">\r\n <ng-container *ngTemplateOutlet=\"dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}\" ></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-center mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"center-inner\" *ngIf=\"item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index, event: item}\"></ng-container>\r\n </div>\r\n <div class=\"center-inner no-period-key\" *ngIf=\"!item.periodInfo;\">\r\n <ng-container *ngTemplateOutlet=\"centerLinesIconTemplate; context: {event: item, index: index}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col col-right mobile\" [ngClass]=\"item.periodInfo ? 'col-period' : 'col-event'\">\r\n <div class=\"event-outer-container\" *ngIf=\"item.eventInfo\">\r\n <ng-container *ngTemplateOutlet=\"eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #centerLinesIconTemplate let-index=index 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 #periodTemplate let-period=period let-index=index let-event=event>\r\n <div [ngClass]=\"{'transparent first-line': !index}\" class=\"line\"></div>\r\n <div class=\"period-container\">\r\n <div class=\"period-inner-container\">\r\n <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n</ng-template>\r\n\r\n<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>\r\n <ngx-timeline-event\r\n [event]=\"event\"\r\n [langCode]=\"langCode\"\r\n [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: [".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;min-width:250px}.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:49 49 0}.col-right{align-items:flex-start;padding:0;flex:49 49 0}.col-center{min-height:6rem;padding:0;flex:2 2 0}.center-inner{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-inner .line{min-height:50%;max-height:50%;height:50%;background:#464646;width:.1rem}.center-inner .line.transparent{background:transparent}.period-container{background:orange;color:#fff;margin:0;padding:.2rem .5rem}.period-container .period-inner-container{width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{padding:.8rem 0;display:flex;justify-content:center;align-items:center;position:relative;height:10px;width:10px;background:#fff}.center-icon-container .icon{height:1rem;width:1rem;border-radius:50%;background:orange;margin:0;position:absolute}.event-outer-container{margin:0 .5rem;width:100%}.hour{padding:.5rem;background:none;display:flex;justify-content:center;align-items:center}.hour.right{justify-content:flex-start}.hour.left{justify-content:flex-end}.hour .hour-inner-container{margin:0}.desktop{display:flex!important}.mobile{display:none!important}@media (max-width: 900px){.desktop{display:none!important}.mobile{display:flex!important}.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}.items-container.horizontal .period-container{padding:0}.items-container.horizontal .period-container .period-inner-container{position:relative}.event-outer-container{margin:.5rem .3rem}.col-left{align-items:flex-start}.col-left .hour{font-size:12px;padding:0;margin-right:.3rem}.col-left.col-period{flex:17 17 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{min-height:6rem;justify-content:center;margin:0}.col-center.col-period{flex:5 5 0;min-height:3rem}.col-center.col-event{flex:5 5 0}.center-inner{align-items:center}.period-container{min-height:20%;height:20%;max-height:20%;background:transparent;display:flex;justify-content:center;align-items:center;border-radius:6px}.period-container .period-inner-container{position:absolute;background:orange;color:#fff;width:max-content;padding:.2rem .5rem;z-index:10}.center-icon-container{align-items:center;justify-content:center}.center-icon-container .icon{height:1rem;width:1rem;position:absolute}}\n"] }]
|
|
387
407
|
}], propDecorators: { events: [{
|
|
388
408
|
type: Input
|
|
389
409
|
}], langCode: [{
|
|
@@ -392,6 +412,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
392
412
|
type: Input
|
|
393
413
|
}], reverseOrder: [{
|
|
394
414
|
type: Input
|
|
415
|
+
}], orientation: [{
|
|
416
|
+
type: Input
|
|
395
417
|
}], groupEvent: [{
|
|
396
418
|
type: Input
|
|
397
419
|
}], changeSide: [{
|
|
@@ -422,11 +444,11 @@ registerLocaleData(localePl);
|
|
|
422
444
|
registerLocaleData(localePt);
|
|
423
445
|
registerLocaleData(localeRu);
|
|
424
446
|
class NgxTimelineModule {
|
|
425
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
426
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.
|
|
427
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.
|
|
447
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
448
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineModule, declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe], imports: [CommonModule], exports: [NgxTimelineComponent, NgxDatePipe] }); }
|
|
449
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineModule, imports: [CommonModule] }); }
|
|
428
450
|
}
|
|
429
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NgxTimelineModule, decorators: [{
|
|
430
452
|
type: NgModule,
|
|
431
453
|
args: [{
|
|
432
454
|
declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],
|
|
@@ -443,5 +465,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
443
465
|
* Generated bundle index. Do not edit.
|
|
444
466
|
*/
|
|
445
467
|
|
|
446
|
-
export { NgxDateFormat, NgxDatePipe, NgxTimelineComponent, NgxTimelineEventChangeSide, NgxTimelineEventComponent, NgxTimelineEventGroup, NgxTimelineItemPosition, NgxTimelineModule, dateConfigMap, fieldConfigDate, fieldsToAddEventGroup, fieldsToCheckEventChangeSideInGroup, periodKeyDateFormat, supportedLanguageCodes };
|
|
468
|
+
export { NgxDateFormat, NgxDatePipe, NgxTimelineComponent, NgxTimelineEventChangeSide, NgxTimelineEventComponent, NgxTimelineEventGroup, NgxTimelineItemPosition, NgxTimelineModule, NgxTimelineOrientation, dateConfigMap, fieldConfigDate, fieldsToAddEventGroup, fieldsToCheckEventChangeSideInGroup, periodKeyDateFormat, supportedLanguageCodes };
|
|
447
469
|
//# sourceMappingURL=frxjs-ngx-timeline.mjs.map
|