@frxjs/ngx-timeline 1.0.3 → 1.0.7

package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.scss

@@ -1,197 +0,0 @@
-.event-wrapper-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.arrow {
-  width: 0;
-  height: 0;
-  border-top: 0.5rem solid transparent;
-  border-bottom: 0.5rem solid transparent;
-  border-radius: 6px;
-  z-index: 10;
-
-  &.right {
-    filter: drop-shadow(2px 0px 0px #244a6e22);
-    border-left: 0.5rem solid white;
-  }
-
-  &.left {
-    filter: drop-shadow(-1px 0px 0px #244a6e22);
-    border-right: 0.5rem solid white;
-  }
-}
-
-.event {
-  background: white;
-  border-radius: 0.8rem;
-  padding: 1rem;
-  width: 100%;
-  margin: 1rem 0;
-
-  &.enableAnimation:hover {
-    padding: 2rem;
-    transition: all 0.5s ease-in-out;
-  }
-
-  &.enableAnimation:not(:hover) {
-    padding: 1rem;
-    transition: all 0.5s ease-in-out;
-  }
-
-  &:not(.hour) {
-    background: #ffffff 0% 0% no-repeat padding-box;
-    box-shadow: 0px 3px 6px #244a6e52;
-  }
-
-  &.hour {
-    padding: 0.5rem;
-    background: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.right {
-      justify-content: flex-start;
-    }
-
-    &.left {
-      justify-content: flex-end;
-    }
-  }
-
-  .hour-inner-container {
-    margin: 0;
-  }
-}
-
-.event-container {
-  display: flex;
-
-  &.reverse {
-    flex-direction: row-reverse;
-  }
-
-  .event-info-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0.1rem;
-    flex: 88 88 0;
-
-    .event-info-header {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      .icon-container {
-        margin-right: 0.3rem;
-
-        nb-icon {
-          color: orange;
-          width: 1.5rem;
-          height: 1.5rem;
-          margin-bottom: 0.1rem;
-        }
-      }
-
-      .title-container {
-        font-weight: bold;
-        font-size: 15px;
-      }
-    }
-
-    .event-info-body {
-      padding: 0.5rem 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      overflow-wrap: anywhere;
-
-      .event-info-description {
-        margin-bottom: 0.5rem;
-        font-size: 13px;
-      }
-
-      .expiration-container, .category-container {
-        display: flex;
-        font-size: 13px;
-        justify-content: flex-start;
-        align-items: center;
-
-        p {
-          font-size: 13px;
-          margin: 0;
-        }
-
-        .expiration-label, .category-label {
-          margin-right: 0.5rem;
-        }
-
-        .expiration-value, .category-value {
-          font-weight: bold;
-        }
-      }
-    }
-
-    .event-info-footer {
-      font-size: 15px;
-      cursor: pointer;
-      padding-top: 1rem;
-
-      .footer-inner-container {
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-end;
-
-        nb-icon {
-          color: #006cb4;
-          width: 1rem;
-          height: 1rem;
-          margin-bottom: 0.1rem;
-        }
-      }
-
-      p {
-        margin: 0;
-        color: #006cb4;
-      }
-    }
-  }
-
-  .event-divider-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.1rem;
-    flex: 5 5 0;
-
-    hr {
-      height: 100%;
-      width: 1px;
-      background: #e9e9e9;
-    }
-  }
-
-  .event-date-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding: 0.1rem;
-    flex: 15 15 0;
-
-    p {
-      margin: 0;
-      text-align: center;
-
-      &.day {
-        font-size: 32px;
-        font-weight: bold;
-        padding: 0.5rem 0;
-      }
-    }
-  }
-}

package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.spec.ts

@@ -1,89 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NgxTimelineEventComponent } from './ngx-timeline-event.component';
-import { NgxTimelineItemPosition } from '../../models';
-import localeIt from '@angular/common/locales/it';
-import { registerLocaleData } from '@angular/common';
-
-registerLocaleData(localeIt);
-
-const year = 2021;
-const monthIndex = 7;
-const day = 19;
-const event = {
-  type: "event",
-  position: NgxTimelineItemPosition.ON_LEFT,
-  periodInfo: {
-    periodKey: '08/2021',
-    year: year,
-    month: monthIndex + 1,
-    day: day,
-    firstDate: new Date(year, monthIndex, day)
-  },
-  eventInfo: {
-    timestamp: new Date(year, monthIndex, day),
-    title: 'event title',
-    description: 'event description',
-    id: '1'
-  }
-};
-describe('NgxTimelineEventComponent', () => {
-  let component: NgxTimelineEventComponent;
-  let fixture: ComponentFixture<NgxTimelineEventComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ NgxTimelineEventComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NgxTimelineEventComponent);
-    component = fixture.componentInstance;
-    component.event = event;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('should getDateObj', () => {
-    it('without event', () => {
-      component.event = null;
-      const res = component.getDateObj();
-      expect(res).toEqual({day: undefined, month: undefined, year: undefined});
-    });
-    it('without event info', () => {
-      component.event = {};
-      const res = component.getDateObj();
-      expect(res).toEqual({day: undefined, month: undefined, year: undefined});
-    });
-    it('without event info timestamp', () => {
-      component.event = {eventInfo: null};
-      const res = component.getDateObj();
-      expect(res).toEqual({day: undefined, month: undefined, year: undefined});
-    });
-    it('should getDateObj without langCode', () => {
-      const res = component.getDateObj();
-      expect(res).toEqual({day: '19', month: 'Aug', year: 2021});
-    });
-    it('should getDateObj with supported langCode', () => {
-      component.langCode = 'en';
-      const res = component.getDateObj();
-      expect(res).toEqual({day: '19', month: 'Aug', year: 2021});
-    });
-    it('should getDateObj with another supported langCode', () => {
-      component.langCode = 'it';
-      const res = component.getDateObj();
-      expect(res).toEqual({day: '19', month: 'ago', year: 2021});
-    });
-    it('should getDateObj with unsupported langCode', () => {
-      component.langCode = 'xx';
-      const res = component.getDateObj();
-      expect(res).toEqual({day: '19', month: 'Aug', year: 2021});
-    });
-  });
-
-});

package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.ts

@@ -1,66 +0,0 @@
-import { Component, Input, Output, TemplateRef } from '@angular/core';
-import { NgxTimelineItem, NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';
-import { DatePipe } from '@angular/common';
-import { BehaviorSubject } from 'rxjs';
-import { supportedLanguageCodes } from '../../models';
-
-@Component({
-  selector: 'ngx-timeline-event',
-  templateUrl: './ngx-timeline-event.component.html',
-  styleUrls: ['./ngx-timeline-event.component.scss']
-})
-export class NgxTimelineEventComponent {
-
-  /**
-   * Event to be displayed
-   */
-  @Input() event: NgxTimelineItem;
-  /**
-   * Event position respect to the vertical line (LEFT or RIGHT)
-   */
-  @Input() colSidePosition: NgxTimelineItemPosition;
-  /**
-   * Language code used to format the dates
-   */
-  @Input() langCode?: string;
-  /**
-   * Inner custom template used to display the event detail
-   */
-  @Input() innerEventCustomTemplate?: TemplateRef<any>;
-  /**
-   * Boolean used to enable or disable the animations
-   */
-  @Input() enableAnimation = true;
-  /**
-   * Output click event emitter
-   */
-  @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);
-
-  ngxTimelineItemPosition = NgxTimelineItemPosition;
-
-  private readonly monthAbbr = 'MMM';
-  private readonly dayFormat = 'dd';
-
-  constructor() { }
-
-  getDateObj(): any {
-    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};
-  }
-
-  protected getLangCode(): string  {
-    return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];
-  }
-
-}

package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.html

@@ -1,98 +0,0 @@
-<div class="main-container">
-  <div class="items-container">
-    <div *ngFor="let item of items; let index = index;" class="row">
-      <!-- DESKTOP -->
-      <div class="col col-left desktop" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
-        <div class="event-outer-container" *ngIf="item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT">
-          <ng-container *ngTemplateOutlet="eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}"></ng-container>
-        </div>
-        <div class="hour left" *ngIf="item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT">
-          <ng-container *ngTemplateOutlet="dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}" ></ng-container>
-        </div>
-      </div>
-
-      <div class="col col-center desktop" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
-        <div class="center-inner" *ngIf="item.periodInfo">
-          <ng-container *ngTemplateOutlet="periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}"></ng-container>
-        </div>
-        <div class="center-inner no-period-key" *ngIf="!item.periodInfo">
-          <ng-container *ngTemplateOutlet="centerLinesIconTemplate; context: {index: index}"></ng-container>
-        </div>
-      </div>
-
-      <div class="col col-right desktop" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
-        <div class="event-outer-container" *ngIf="item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT">
-          <ng-container *ngTemplateOutlet="eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}"></ng-container>
-        </div>
-        <div class="hour right" *ngIf="item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT">
-          <ng-container *ngTemplateOutlet="dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}" ></ng-container>
-        </div>
-      </div>
-
-      <!-- MOBILE -->
-      <div class="col col-left mobile" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
-        <div class="hour left" *ngIf="item.eventInfo">
-          <div class="hour-inner-container">
-            <ng-container *ngTemplateOutlet="dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}" ></ng-container>
-          </div>
-        </div>
-      </div>
-
-      <div class="col col-center mobile" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
-        <div class="center-inner" *ngIf="item.periodInfo;">
-            <ng-container *ngTemplateOutlet="periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}"></ng-container>
-        </div>
-        <div class="center-inner no-period-key" *ngIf="!item.periodInfo;">
-          <ng-container *ngTemplateOutlet="centerLinesIconTemplate;context: {index: index}"></ng-container>
-        </div>
-      </div>
-
-      <div class="col col-right mobile" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
-        <div class="event-outer-container" *ngIf="item.eventInfo">
-          <ng-container *ngTemplateOutlet="eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}"></ng-container>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-<ng-template #centerLinesIconTemplate let-index=index>
-  <div class="line"></div>
-  <ng-container *ngTemplateOutlet="centerIconCustomTemplate || centerIconTemplate"></ng-container>
-  <div [ngClass]="{'transparent last-line': index === items.length - 1}" class="line"></div>
-</ng-template>
-
-<ng-template #centerIconTemplate>
-  <div class="center-icon-container">
-    <div class="icon"></div>
-  </div>
-</ng-template>
-
-<ng-template #dateInstantTemplate let-item=item>
-  <span>
-    {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}
-  </span>
-</ng-template>
-
-<ng-template #periodTemplate let-period=period let-index=index>
-  <div [ngClass]="{'transparent first-line': !index}" class="line"></div>
-  <div class="period-container">
-    <div class="period-inner-container">
-      <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>
-    </div>
-  </div>
-  <div class="line"></div>
-</ng-template>
-
-<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>
-  <ngx-timeline-event
-    [event]="event"
-    [langCode]="langCode"
-    [enableAnimation]="enableAnimation"
-    [innerEventCustomTemplate]="innerEventCustomTemplate"
-    [colSidePosition]="colSidePosition"
-    (clickEmitter)="clickEmitter.next($event)">
-  </ngx-timeline-event>
-</ng-template>
-

package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.spec.ts

@@ -1,160 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NgxTimelineComponent } from './ngx-timeline.component';
-import { NgxDateFormat, NgxTimelineEventGroup } from '../models';
-
-describe('NgxTimelineComponent', () => {
-  let component: NgxTimelineComponent;
-  let fixture: ComponentFixture<NgxTimelineComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ NgxTimelineComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NgxTimelineComponent);
-    component = fixture.componentInstance;
-    component.events = null;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should call the groupEvents when ngOnChanges', () => {
-    const spy = spyOn<any>(component, 'groupEvents');
-    component.ngOnChanges({});
-    expect(spy).toHaveBeenCalled();
-  });
-
-  it('should clear', () => {
-    component['clear']();
-    expect(component.groups).toEqual({});
-    expect(component.periods).toEqual([]);
-    expect(component.items).toEqual([]);
-  });
-
-  describe('should getPeriodKeyDateFormat', () => {
-    it('when default groupEvent is provided', () => {
-      const res = component.getPeriodKeyDateFormat();
-      expect(res).toEqual(NgxDateFormat.MONTH_YEAR);
-    });
-
-    [{groupEvent: NgxTimelineEventGroup.YEAR, formatDate: NgxDateFormat.YEAR},
-      {groupEvent: NgxTimelineEventGroup.DAY_MONTH_YEAR, formatDate: NgxDateFormat.DAY_MONTH_YEAR}
-    ].forEach(elem => {
-      it(`when groupEvent ${elem.groupEvent} is provided`, () => {
-        component.groupEvent =  elem.groupEvent;
-        expect(component.getPeriodKeyDateFormat()).toEqual(elem.formatDate);
-      });
-    });
-
-  });
-
-
-  describe('should groupEvents', ()=> {
-    it('when no events', () => {
-      const spies = [];
-      spies.push(spyOn<any>(component, 'clear'));
-      spies.push(spyOn<any>(component, 'sortEvents'));
-      spies.push(spyOn<any>(component, 'setGroups'));
-      spies.push(spyOn<any>(component, 'setPeriods'));
-      spies.push(spyOn<any>(component, 'setItems'));
-      component['groupEvents'](null);
-      spies.forEach(spy => expect(spy).not.toHaveBeenCalled());
-    });
-    it('when events', () => {
-      const spies = [];
-      spies.push(spyOn<any>(component, 'clear'));
-      spies.push(spyOn<any>(component, 'sortEvents'));
-      spies.push(spyOn<any>(component, 'setGroups'));
-      spies.push(spyOn<any>(component, 'setPeriods'));
-      spies.push(spyOn<any>(component, 'setItems'));
-      component['groupEvents']([]);
-      spies.forEach(spy => expect(spy).toHaveBeenCalled());
-    });
-  });
-
-  describe('should sortEvents', ()=> {
-    it('when events', () => {
-      const event = {timestamp: new Date(2021, 11, 10)};
-      const event2 = {timestamp: new Date(2021, 8, 10)};
-      const events = [event, event2];
-      component['sortEvents'](events);
-      expect(events[0]).toEqual(event2);
-      expect(events[1]).toEqual(event);
-    });
-  });
-
-  describe('should setGroups', ()=> {
-    it('when events', () => {
-      const event = {timestamp: new Date(2021, 11, 10)};
-      const event2 = {timestamp: new Date(2021, 8, 10)};
-      const event3 = {timestamp: new Date(2021, 8, 11)};
-      const events = [event, event2, event3];
-      component['setGroups'](events);
-      expect(Object.keys(component.groups).length).toEqual(2);
-    });
-  });
-
-  describe('should setItems', ()=> {
-    it('when events', () => {
-      const period = {periodInfo: {periodKey: '2021/7'}};
-      const period2 = {periodInfo: {periodKey: '2021/8'}};
-      component.periods = [period, period2];
-      const event = {timestamp: new Date(2021, 7, 10)};
-      const event2 = {timestamp: new Date(2021, 8, 10)};
-      const event3 = {timestamp: new Date(2021, 8, 11)};
-      component.groups['2021/7'] = [event];
-      component.groups['2021/8'] = [event2, event3];
-      component['setItems']();
-      expect(component.items.length).toEqual(5);
-    });
-  });
-
-  describe('should setPeriods', ()=> {
-    it('when events', () => {
-      const date = new Date(2021, 7, 10);
-      const date2 = new Date(2021, 8, 10);
-      const date3= new Date(2021, 8, 11);
-      const event = {timestamp: date}
-      const event2 = {timestamp: date2};
-      const event3 = {timestamp: date3};
-      component.groups['2021/7'] = [event];
-      component.groups['2021/8'] = [event2, event3];
-      component['setPeriods']();
-      expect(component.periods.length).toEqual(2);
-      expect(component.periods[0]).toEqual({periodInfo: {year: 2021, month: 7, day: NaN, periodKey: '2021/7', firstDate: date }})
-      expect(component.periods[1]).toEqual({periodInfo: {year: 2021, month: 8, day: NaN, periodKey: '2021/8', firstDate: date2 }})
-    });
-  });
-
-  describe('should getPeriodKeyFromEvent', ()=> {
-    it('when groupEvent by year', () => {
-      component.groupEvent = NgxTimelineEventGroup.YEAR;
-      const event = {timestamp: new Date(2021, 7, 10)};
-      const event2 = {timestamp: new Date(2021, 8, 9)};
-      expect(component['getPeriodKeyFromEvent'](event)).toBe('2021');
-      expect(component['getPeriodKeyFromEvent'](event2)).toBe('2021');
-    });
-    it('when groupEvent by month year', () => {
-      component.groupEvent = NgxTimelineEventGroup.MONTH_YEAR;
-      const event = {timestamp: new Date(2021, 7, 10)};
-      const event2 = {timestamp: new Date(2021, 8, 9)};
-      expect(component['getPeriodKeyFromEvent'](event)).toBe('2021/7');
-      expect(component['getPeriodKeyFromEvent'](event2)).toBe('2021/8');
-    });
-    it('when groupEvent by day month year', () => {
-      component.groupEvent = NgxTimelineEventGroup.DAY_MONTH_YEAR;
-      const event = {timestamp: new Date(2021, 7, 10)};
-      const event2 = {timestamp: new Date(2021, 8, 9)};
-      expect(component['getPeriodKeyFromEvent'](event)).toBe('2021/7/10');
-      expect(component['getPeriodKeyFromEvent'](event2)).toBe('2021/8/9');
-    });
-  });
-
-});