@frxjs/ngx-timeline 1.0.6 → 1.2.0

package/README.md

@@ -1,136 +1,138 @@
-# NgxTimeline ![check-code-coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)
-
-The main goal of this angular library is to give you the possibility to integrate a timeline in your app.
-<br/>
-Go to [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline 
-
-![image](https://user-images.githubusercontent.com/26500344/130092921-8338496a-31df-46fa-b75f-40989eb53d33.png)
-<p align = "center">
-Fig.1 - Preview of <a href="https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/">Timeline example configuration page</a>
-</p>
-<br/><br/>
-
-
-## Installation
-Running the following command to install the library
-```
-npm install @frxjs/ngx-timeline
-```
-<br/><br/>
-
-
-
-## Examples of Usage
-
-After installing the library and including NgxTimelineModule in your imports module you could add one of following examples to your template in order to display your timeline
-
-```
-<ngx-timeline [events]="events"></ngx-timeline>
-<ngx-timeline [events]="events" [langCode]="it"></ngx-timeline>
-<ngx-timeline [events]="events" [langCode]="it" [enableAnimation]="false"></ngx-timeline>
-```
-<br/><br/>
-
-## Configuration
-
-### Input
-Input name                    | Explanation                                                 | Mandatory | Type/Supported Values                     | Default value
----                           | ---                                                         | ---       | ---                                       | ---           
-events                        | list of events to be displayed                              | yes       | NgxTimelineEvent                          | no default    
-langCode                      | language code use to format dates                           | no        | <ul><li>'en'</li><li>'it'</li><li>'fr'</li><li>'de'</li><li>'es'</li></ul>             | 'en'          
-enableAnimation               | Boolean used to enable or disable the animations            | no        | boolean                                   | true   
-groupEvent                    | Logic to be applied in order to group events                | no        | enum NgxTimelineEventGroup                | NgxTimelineEventGroup.MONTH_YEAR
-changeSideInGroup             | Logic to be applied in order to put evetns on LEFT or RIGHT | no        | enum NgxTimelineEventChangeSideInGroup    | NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY    
-periodCustomTemplate          | Custom Template displayed before a group of events          | no        | TemplateRef<any>                          | no default 
-eventCustomTemplate           | Custom Template displayed to show a single event            | no        | TemplateRef<any>                          | no default 
-centerIconCustomTemplate      | Custom Template displayed to show an separator icon         | no        | TemplateRef<any>                          | no default 
-dateInstantCustomTemplate     | Custom Template displayed to show the side date             | no        | TemplateRef<any>                          | no default 
-innerEventCustomTemplate      | Custom Template displayed to show the inner event           | no        | TemplateRef<any>                          | no default 
-<br/>
-
-### Output
-Output name                   | Explanation                                                 | Mandatory | Type/Supported Values                     | Default value
----                           | ---                                                         | ---       | ---                                       | ---           
-clickEmitter                  |  Output click event emitter                                 | no        | BehaviorSubject<NgxTimelineItem>          | no default 
-<br/>
-
-### Types and Enums
-```typescript
-interface NgxTimelineEvent {
-  timestamp?: Date;
-  title?: string;
-  description?: string;
-  id?: any;
-}
-```
-```typescript
-enum NgxTimelineEventGroup {
-  YEAR = 'YEAR',
-  MONTH_YEAR = 'MONTH_YEAR',
-  DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'
-}
-```
-```typescript
-enum NgxTimelineEventChangeSideInGroup {
-  ALL = 'ALL',
-  ON_DIFFERENT_HMS = 'ON_DIFFERENT_HMS',
-  ON_DIFFERENT_DAY = 'ON_DIFFERENT_DAY',
-  ON_DIFFERENT_MONTH = 'ON_DIFFERENT_MONTH'
-}
-```
-<br/>
-  
-### Examples with contexts of custom templates
-```html
-  <ng-template #periodCustomTemplate let-period=period let-index=index>
-    <div [ngClass]="{'transparent first-line': !index}" class="line"></div>
-    <div class="period-container">
-      <p>
-        {{index}} - {{period | json  }}
-      </p>
-    </div>
-    <div class="line"></div>
-  </ng-template>
-```  
-```html
-  <ng-template #centerIconCustomTemplate>
-    <div class="icon-container">
-      <img src="assets/image.png"/>
-    </div>
-  </ng-template>
-```
-```html
-  <ng-template #innerEventCustomTemplate let-event=event>
-    <div class="event" (click)="handleClick(event)">
-      {{event | json}}
-    </div>
-  </ng-template>
-```
-```html
-  <ng-template #eventCustomTemplate let-event=event let-colSidePosition=colSidePosition>
-    <div class="event" (click)="handleClick(event)">
-      {{event | json}}
-    </div>
-  </ng-template>
-```
-```html
-  <ng-template #dateInstantCustomTemplate let-item=item>
-    <span>
-      {{item | json}}
-    </span>
-  </ng-template>
-```    
-<br/><br/>
-  
-## How to contribute
-First of all, in order to track everything, open an issue describing the problem or a missing functionality you would like to add to the lib.
-
-To start the contribution:
-- `npm run watch-lib` (you are builduing the lib with --watch options)
-- `npm run start-dev` (you are linking the lib and starting the demo app )
-
-Every time you will change the code in your lib, any update will trigger the re-load of the app.
-When your code will be ready, create a Pull Request and put the link in a comment under the issue you opened before.
-Now is time to enjoy and start to code.
-
-Thanks in advance for your contribution
+# NgxTimeline ![check-code-coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)
+
+The main goal of this angular library is to give you the possibility to integrate a timeline in your app.
+<br/>
+Version 1.2.0 is compatible with angular 13.
+<br/>
+Go [here](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) and discover all possible configurations for the timeline 
+
+![image](https://user-images.githubusercontent.com/26500344/130092921-8338496a-31df-46fa-b75f-40989eb53d33.png)
+<p align = "center">
+Fig.1 - Preview of <a href="https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/">Timeline example configuration page</a>
+</p>
+<br/><br/>
+
+
+## Installation
+Running the following command to install the library
+```
+npm install @frxjs/ngx-timeline
+```
+<br/><br/>
+
+
+
+## Examples of Usage
+
+After installing the library and including NgxTimelineModule in your imports module you could add one of following examples to your template in order to display your timeline
+
+```
+<ngx-timeline [events]="events"></ngx-timeline>
+<ngx-timeline [events]="events" [langCode]="it"></ngx-timeline>
+<ngx-timeline [events]="events" [langCode]="it" [enableAnimation]="false"></ngx-timeline>
+```
+<br/><br/>
+
+## Configuration
+
+### Input
+Input name                    | Explanation                                                 | Mandatory | Type/Supported Values                     | Default value
+---                           | ---                                                         | ---       | ---                                       | ---           
+events                        | list of events to be displayed                              | yes       | NgxTimelineEvent                          | no default    
+langCode                      | language code use to format dates                           | no        | <ul><li>'en'</li><li>'it'</li><li>'fr'</li><li>'de'</li><li>'es'</li></ul>             | 'en'          
+enableAnimation               | Boolean used to enable or disable the animations            | no        | boolean                                   | true   
+groupEvent                    | Logic to be applied in order to group events                | no        | enum NgxTimelineEventGroup                | NgxTimelineEventGroup.MONTH_YEAR
+changeSideInGroup             | Logic to be applied in order to put evetns on LEFT or RIGHT | no        | enum NgxTimelineEventChangeSideInGroup    | NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY    
+periodCustomTemplate          | Custom Template displayed before a group of events          | no        | TemplateRef<any>                          | no default 
+eventCustomTemplate           | Custom Template displayed to show a single event            | no        | TemplateRef<any>                          | no default 
+centerIconCustomTemplate      | Custom Template displayed to show an separator icon         | no        | TemplateRef<any>                          | no default 
+dateInstantCustomTemplate     | Custom Template displayed to show the side date             | no        | TemplateRef<any>                          | no default 
+innerEventCustomTemplate      | Custom Template displayed to show the inner event           | no        | TemplateRef<any>                          | no default 
+<br/>
+
+### Output
+Output name                   | Explanation                                                 | Mandatory | Type/Supported Values                     | Default value
+---                           | ---                                                         | ---       | ---                                       | ---           
+clickEmitter                  |  Output click event emitter                                 | no        | BehaviorSubject<NgxTimelineItem>          | no default 
+<br/>
+
+### Types and Enums
+```typescript
+interface NgxTimelineEvent {
+  timestamp?: Date;
+  title?: string;
+  description?: string;
+  id?: any;
+}
+```
+```typescript
+enum NgxTimelineEventGroup {
+  YEAR = 'YEAR',
+  MONTH_YEAR = 'MONTH_YEAR',
+  DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'
+}
+```
+```typescript
+enum NgxTimelineEventChangeSideInGroup {
+  ALL = 'ALL',
+  ON_DIFFERENT_HMS = 'ON_DIFFERENT_HMS',
+  ON_DIFFERENT_DAY = 'ON_DIFFERENT_DAY',
+  ON_DIFFERENT_MONTH = 'ON_DIFFERENT_MONTH'
+}
+```
+<br/>
+  
+### Examples with contexts of custom templates
+```html
+  <ng-template #periodCustomTemplate let-period=period let-index=index>
+    <div [ngClass]="{'transparent first-line': !index}" class="line"></div>
+    <div class="period-container">
+      <p>
+        {{index}} - {{period | json  }}
+      </p>
+    </div>
+    <div class="line"></div>
+  </ng-template>
+```  
+```html
+  <ng-template #centerIconCustomTemplate>
+    <div class="icon-container">
+      <img src="assets/image.png"/>
+    </div>
+  </ng-template>
+```
+```html
+  <ng-template #innerEventCustomTemplate let-event=event>
+    <div class="event" (click)="handleClick(event)">
+      {{event | json}}
+    </div>
+  </ng-template>
+```
+```html
+  <ng-template #eventCustomTemplate let-event=event let-colSidePosition=colSidePosition>
+    <div class="event" (click)="handleClick(event)">
+      {{event | json}}
+    </div>
+  </ng-template>
+```
+```html
+  <ng-template #dateInstantCustomTemplate let-item=item>
+    <span>
+      {{item | json}}
+    </span>
+  </ng-template>
+```    
+<br/><br/>
+  
+## How to contribute
+First of all, in order to track everything, open an issue describing the problem or a missing functionality you would like to add to the lib.
+
+To start the contribution:
+- `npm run watch-lib` (you are builduing the lib with --watch options)
+- `npm run start-dev` (you are linking the lib and starting the demo app )
+
+Every time you will change the code in your lib, any update will trigger the re-load of the app.
+When your code will be ready, create a Pull Request and put the link in a comment under the issue you opened before.
+Now is time to enjoy and start to code.
+
+Thanks in advance for your contribution

package/esm2020/frxjs-ngx-timeline.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJ4anMtbmd4LXRpbWVsaW5lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvbmd4LXRpbWVsaW5lL3NyYy9mcnhqcy1uZ3gtdGltZWxpbmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/{esm2015/lib/components/index.js → esm2020/lib/components/index.mjs}

@@ -1,3 +1,3 @@
-export * from './ngx-timeline.component';
-export * from './ngx-timeline-event/ngx-timeline-event.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdGltZWxpbmUvc3JjL2xpYi9jb21wb25lbnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxtREFBbUQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbmd4LXRpbWVsaW5lLmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbmd4LXRpbWVsaW5lLWV2ZW50L25neC10aW1lbGluZS1ldmVudC5jb21wb25lbnQnO1xyXG4iXX0=
+export * from './ngx-timeline.component';
+export * from './ngx-timeline-event/ngx-timeline-event.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdGltZWxpbmUvc3JjL2xpYi9jb21wb25lbnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxtREFBbUQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbmd4LXRpbWVsaW5lLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL25neC10aW1lbGluZS1ldmVudC9uZ3gtdGltZWxpbmUtZXZlbnQuY29tcG9uZW50JztcbiJdfQ==

package/esm2020/lib/components/ngx-timeline-event/ngx-timeline-event.component.mjs

@@ -0,0 +1,58 @@
+import { Component, Input, Output } from '@angular/core';
+import { NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';
+import { DatePipe } from '@angular/common';
+import { BehaviorSubject } from 'rxjs';
+import { supportedLanguageCodes } from '../../models';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class NgxTimelineEventComponent {
+    constructor() {
+        /**
+         * Boolean used to enable or disable the animations
+         */
+        this.enableAnimation = true;
+        /**
+         * Output click event emitter
+         */
+        this.clickEmitter = new BehaviorSubject(null);
+        this.ngxTimelineItemPosition = NgxTimelineItemPosition;
+        this.monthAbbr = 'MMM';
+        this.dayFormat = 'dd';
+    }
+    getDateObj() {
+        let day;
+        let month;
+        let year;
+        const dateTimestamp = this.event?.eventInfo?.timestamp;
+        if (dateTimestamp) {
+            const timestamp = new Date(dateTimestamp);
+            const langCode = this.getLangCode();
+            month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);
+            day = new DatePipe(langCode).transform(timestamp, this.dayFormat);
+            year = timestamp.getFullYear();
+        }
+        return { day, month, year };
+    }
+    getLangCode() {
+        return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];
+    }
+}
+NgxTimelineEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxTimelineEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: NgxTimelineEventComponent, selector: "ngx-timeline-event", inputs: { event: "event", colSidePosition: "colSidePosition", langCode: "langCode", innerEventCustomTemplate: "innerEventCustomTemplate", enableAnimation: "enableAnimation" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, 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        <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr/>\n    </div>\n\n    <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n      <div>\n        <p>{{dateObj?.month}}</p>\n      </div>\n      <div>\n        <p class=\"day\">{{dateObj?.day}}</p>\n      </div>\n      <div>\n        <p>{{dateObj?.year}}</p>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px #244a6e22);border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px #244a6e22);border-right:.5rem solid white}.event{background:white;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:#ffffff 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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "titlecase": i1.TitleCasePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: NgxTimelineEventComponent, decorators: [{
+            type: Component,
+            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        <p class=\"event-info-description\">{{event?.eventInfo?.description}}</p>\n      </div>\n    </div>\n\n    <div class=\"event-divider-container\">\n      <hr/>\n    </div>\n\n    <div class=\"event-date-container\" *ngIf=\"getDateObj() as dateObj\">\n      <div>\n        <p>{{dateObj?.month}}</p>\n      </div>\n      <div>\n        <p class=\"day\">{{dateObj?.day}}</p>\n      </div>\n      <div>\n        <p>{{dateObj?.year}}</p>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".event-wrapper-container{display:flex;justify-content:center;align-items:center;cursor:pointer}.arrow{width:0;height:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-radius:6px;z-index:10}.arrow.right{filter:drop-shadow(2px 0px 0px #244a6e22);border-left:.5rem solid white}.arrow.left{filter:drop-shadow(-1px 0px 0px #244a6e22);border-right:.5rem solid white}.event{background:white;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:#ffffff 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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { event: [{
+                type: Input
+            }], colSidePosition: [{
+                type: Input
+            }], langCode: [{
+                type: Input
+            }], innerEventCustomTemplate: [{
+                type: Input
+            }], enableAnimation: [{
+                type: Input
+            }], clickEmitter: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRpbWVsaW5lLWV2ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXRpbWVsaW5lLWV2ZW50L25neC10aW1lbGluZS1ldmVudC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdGltZWxpbmUvc3JjL2xpYi9jb21wb25lbnRzL25neC10aW1lbGluZS1ldmVudC9uZ3gtdGltZWxpbmUtZXZlbnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFjLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBa0IsdUJBQXVCLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUN2RixPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDekMsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUNyQyxPQUFPLEVBQUMsc0JBQXNCLEVBQUMsTUFBTSxjQUFjLENBQUM7OztBQU9wRCxNQUFNLE9BQU8seUJBQXlCO0lBK0JwQztRQWRBOztXQUVHO1FBQ00sb0JBQWUsR0FBRyxJQUFJLENBQUM7UUFDaEM7O1dBRUc7UUFDTyxpQkFBWSxHQUFxQyxJQUFJLGVBQWUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVyRiw0QkFBdUIsR0FBRyx1QkFBdUIsQ0FBQztRQUVqQyxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLGNBQVMsR0FBRyxJQUFJLENBQUM7SUFFbEIsQ0FBQztJQUVqQixVQUFVO1FBQ1IsSUFBSSxHQUFHLENBQUM7UUFDUixJQUFJLEtBQUssQ0FBQztRQUNWLElBQUksSUFBSSxDQUFDO1FBQ1QsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDO1FBQ3ZELElBQUksYUFBYSxFQUFFO1lBQ2pCLE1BQU0sU0FBUyxHQUFHLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQzFDLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNwQyxLQUFLLEdBQUcsSUFBSSxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUMsU0FBUyxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDcEUsR0FBRyxHQUFHLElBQUksUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQ2xFLElBQUksR0FBRyxTQUFTLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDaEM7UUFFRCxPQUFPLEVBQUMsR0FBRyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQztJQUM1QixDQUFDO0lBRVMsV0FBVztRQUNuQixPQUFPLElBQUksQ0FBQyxRQUFRLElBQUksc0JBQXNCLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsc0JBQXNCLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDckgsQ0FBQzs7c0hBbkRVLHlCQUF5QjswR0FBekIseUJBQXlCLHFSQ1h0QyxnM0NBc0NBOzJGRDNCYSx5QkFBeUI7a0JBTHJDLFNBQVM7K0JBQ0Usb0JBQW9COzBFQVFyQixLQUFLO3NCQUFiLEtBQUs7Z0JBSUcsZUFBZTtzQkFBdkIsS0FBSztnQkFJRyxRQUFRO3NCQUFoQixLQUFLO2dCQUlHLHdCQUF3QjtzQkFBaEMsS0FBSztnQkFJRyxlQUFlO3NCQUF2QixLQUFLO2dCQUlJLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgVGVtcGxhdGVSZWZ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOZ3hUaW1lbGluZUl0ZW0sIE5neFRpbWVsaW5lSXRlbVBvc2l0aW9ufSBmcm9tICcuLi8uLi9tb2RlbHMvTmd4VGltZWxpbmVFdmVudCc7XG5pbXBvcnQge0RhdGVQaXBlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtCZWhhdmlvclN1YmplY3R9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtzdXBwb3J0ZWRMYW5ndWFnZUNvZGVzfSBmcm9tICcuLi8uLi9tb2RlbHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtdGltZWxpbmUtZXZlbnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LXRpbWVsaW5lLWV2ZW50LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LXRpbWVsaW5lLWV2ZW50LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIE5neFRpbWVsaW5lRXZlbnRDb21wb25lbnQge1xuICAvKipcbiAgICogRXZlbnQgdG8gYmUgZGlzcGxheWVkXG4gICAqL1xuICBASW5wdXQoKSBldmVudDogTmd4VGltZWxpbmVJdGVtO1xuICAvKipcbiAgICogRXZlbnQgcG9zaXRpb24gcmVzcGVjdCB0byB0aGUgdmVydGljYWwgbGluZSAoTEVGVCBvciBSSUdIVClcbiAgICovXG4gIEBJbnB1dCgpIGNvbFNpZGVQb3NpdGlvbjogTmd4VGltZWxpbmVJdGVtUG9zaXRpb247XG4gIC8qKlxuICAgKiBMYW5ndWFnZSBjb2RlIHVzZWQgdG8gZm9ybWF0IHRoZSBkYXRlc1xuICAgKi9cbiAgQElucHV0KCkgbGFuZ0NvZGU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBJbm5lciBjdXN0b20gdGVtcGxhdGUgdXNlZCB0byBkaXNwbGF5IHRoZSBldmVudCBkZXRhaWxcbiAgICovXG4gIEBJbnB1dCgpIGlubmVyRXZlbnRDdXN0b21UZW1wbGF0ZT86IFRlbXBsYXRlUmVmPGFueT47XG4gIC8qKlxuICAgKiBCb29sZWFuIHVzZWQgdG8gZW5hYmxlIG9yIGRpc2FibGUgdGhlIGFuaW1hdGlvbnNcbiAgICovXG4gIEBJbnB1dCgpIGVuYWJsZUFuaW1hdGlvbiA9IHRydWU7XG4gIC8qKlxuICAgKiBPdXRwdXQgY2xpY2sgZXZlbnQgZW1pdHRlclxuICAgKi9cbiAgQE91dHB1dCgpIGNsaWNrRW1pdHRlcjogQmVoYXZpb3JTdWJqZWN0PE5neFRpbWVsaW5lSXRlbT4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0KG51bGwpO1xuXG4gIG5neFRpbWVsaW5lSXRlbVBvc2l0aW9uID0gTmd4VGltZWxpbmVJdGVtUG9zaXRpb247XG5cbiAgcHJpdmF0ZSByZWFkb25seSBtb250aEFiYnIgPSAnTU1NJztcbiAgcHJpdmF0ZSByZWFkb25seSBkYXlGb3JtYXQgPSAnZGQnO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgZ2V0RGF0ZU9iaigpOiBhbnkge1xuICAgIGxldCBkYXk7XG4gICAgbGV0IG1vbnRoO1xuICAgIGxldCB5ZWFyO1xuICAgIGNvbnN0IGRhdGVUaW1lc3RhbXAgPSB0aGlzLmV2ZW50Py5ldmVudEluZm8/LnRpbWVzdGFtcDtcbiAgICBpZiAoZGF0ZVRpbWVzdGFtcCkge1xuICAgICAgY29uc3QgdGltZXN0YW1wID0gbmV3IERhdGUoZGF0ZVRpbWVzdGFtcCk7XG4gICAgICBjb25zdCBsYW5nQ29kZSA9IHRoaXMuZ2V0TGFuZ0NvZGUoKTtcbiAgICAgIG1vbnRoID0gbmV3IERhdGVQaXBlKGxhbmdDb2RlKS50cmFuc2Zvcm0odGltZXN0YW1wLCB0aGlzLm1vbnRoQWJicik7XG4gICAgICBkYXkgPSBuZXcgRGF0ZVBpcGUobGFuZ0NvZGUpLnRyYW5zZm9ybSh0aW1lc3RhbXAsIHRoaXMuZGF5Rm9ybWF0KTtcbiAgICAgIHllYXIgPSB0aW1lc3RhbXAuZ2V0RnVsbFllYXIoKTtcbiAgICB9XG5cbiAgICByZXR1cm4ge2RheSwgbW9udGgsIHllYXJ9O1xuICB9XG5cbiAgcHJvdGVjdGVkIGdldExhbmdDb2RlKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMubGFuZ0NvZGUgJiYgc3VwcG9ydGVkTGFuZ3VhZ2VDb2Rlcy5pbmNsdWRlcyh0aGlzLmxhbmdDb2RlKSA/IHRoaXMubGFuZ0NvZGUgOiBzdXBwb3J0ZWRMYW5ndWFnZUNvZGVzWzBdO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZXZlbnQtd3JhcHBlci1jb250YWluZXJcIiAoY2xpY2spPVwiY2xpY2tFbWl0dGVyLm5leHQoZXZlbnQpXCI+XG4gIDxkaXYgKm5nSWY9XCJjb2xTaWRlUG9zaXRpb249PT1uZ3hUaW1lbGluZUl0ZW1Qb3NpdGlvbi5PTl9SSUdIVFwiIGNsYXNzPVwiYXJyb3cgbGVmdFwiPjwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiZXZlbnRcIiBbbmdDbGFzc109XCJ7J2VuYWJsZUFuaW1hdGlvbic6IGVuYWJsZUFuaW1hdGlvbn1cIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaW5uZXJFdmVudEN1c3RvbVRlbXBsYXRlIHx8IGlubmVyRXZlbnRDb250YWluZXI7IGNvbnRleHQ6IHtldmVudDogZXZlbnR9XCJcbiAgICA+XG4gIDwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cImNvbFNpZGVQb3NpdGlvbj09PW5neFRpbWVsaW5lSXRlbVBvc2l0aW9uLk9OX0xFRlRcIiBjbGFzcz1cImFycm93IHJpZ2h0XCI+PC9kaXY+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNpbm5lckV2ZW50Q29udGFpbmVyIGxldC1ldmVudD1ldmVudD5cbiAgPGRpdiBjbGFzcz1cImV2ZW50LWNvbnRhaW5lclwiIFtuZ0NsYXNzXT1cInsncmV2ZXJzZSc6IGNvbFNpZGVQb3NpdGlvbiA9PT0gbmd4VGltZWxpbmVJdGVtUG9zaXRpb24uT05fTEVGVH1cIj5cbiAgICA8ZGl2IGNsYXNzPVwiZXZlbnQtaW5mby1jb250YWluZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJldmVudC1pbmZvLWhlYWRlclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidGl0bGUtY29udGFpbmVyXCI+e3tldmVudD8uZXZlbnRJbmZvPy50aXRsZSB8IHRpdGxlY2FzZX19PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJldmVudC1pbmZvLWJvZHlcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJldmVudC1pbmZvLWRlc2NyaXB0aW9uXCI+e3tldmVudD8uZXZlbnRJbmZvPy5kZXNjcmlwdGlvbn19PC9wPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwiZXZlbnQtZGl2aWRlci1jb250YWluZXJcIj5cbiAgICAgIDxoci8+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwiZXZlbnQtZGF0ZS1jb250YWluZXJcIiAqbmdJZj1cImdldERhdGVPYmooKSBhcyBkYXRlT2JqXCI+XG4gICAgICA8ZGl2PlxuICAgICAgICA8cD57e2RhdGVPYmo/Lm1vbnRofX08L3A+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXY+XG4gICAgICAgIDxwIGNsYXNzPVwiZGF5XCI+e3tkYXRlT2JqPy5kYXl9fTwvcD5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdj5cbiAgICAgICAgPHA+e3tkYXRlT2JqPy55ZWFyfX08L3A+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19