@frxjs/ngx-timeline 1.0.3 → 1.0.7

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

@@ -1,187 +0,0 @@
-import { Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output } from '@angular/core';
-import {
-  NgxTimelineEvent,
-  NgxTimelineItem,
-  NgxTimelineItemPosition,
-  NgxTimelinePeriodInfo,
-  NgxDateFormat,
-  NgxTimelineEventGroup,
-  NgxTimelineEventChangeSideInGroup,
-  periodKeyDateFormat,
-  fieldsToCheckEventChangeSideInGroup,
-  fieldsToAddEventGroup } from '../models';
-import { BehaviorSubject } from 'rxjs';
-
-@Component({
-  selector: 'ngx-timeline',
-  templateUrl: './ngx-timeline.component.html',
-  styleUrls: ['./ngx-timeline.scss'],
-})
-export class NgxTimelineComponent implements OnInit, OnChanges {
-  /**
-   * List of events to be displayed
-   */
-  @Input() events: NgxTimelineEvent[];
-  /**
-   * Language code used to show the date formatted
-   */
-  @Input() langCode?: string;
-  /**
-   * Boolean used to enable or disable the animations
-   */
-  @Input() enableAnimation = true;
-  /**
-   * Logic to be applied in order to group events
-   */
-  @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;
-  /**
-   * Logic to be applied in order to put evetns on LEFT or RIGHT
-   */
-  @Input() changeSideInGroup?: NgxTimelineEventChangeSideInGroup = NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY;
-  /**
-   * Custom Template displayed before a group of events
-   */
-  @Input() periodCustomTemplate: TemplateRef<any>;
-  /**
-   * Custom Template displayed to show a single event
-   */
-  @Input() eventCustomTemplate: TemplateRef<any>;
-  /**
-   * Custom Template displayed to show an separator icon
-   */
-  @Input() centerIconCustomTemplate: TemplateRef<any>;
-  /**
-   * Custom Template displayed to show the side date
-   */
-  @Input() dateInstantCustomTemplate: TemplateRef<any>;
-  /**
-   * Custom Template displayed to show the inner event
-   */
-  @Input() innerEventCustomTemplate: TemplateRef<any>;
-  /**
-   * Output click event emitter
-   */
-  @Output()
-  clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);
-
-  groups: { [key: string]: NgxTimelineEvent[] } = {};
-  periods: NgxTimelineItem[] = [];
-  items: NgxTimelineItem[] = [];
-  ngxTimelineItemPosition = NgxTimelineItemPosition;
-  ngxDateFormat = NgxDateFormat;
-
-  private readonly separator = '/';
-
-  constructor() {}
-
-
-  ngOnInit(): void {
-    this.groupEvents(this.events);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.groupEvents(this.events);
-  }
-
-  getPeriodKeyDateFormat(): string {
-    return periodKeyDateFormat[this.groupEvent];
-  }
-
-  protected clear(): void {
-    this.groups = {};
-    this.periods = [];
-    this.items = [];
-  }
-
-  protected groupEvents(events: NgxTimelineEvent[]): void {
-    if (events) {
-      this.clear();
-      this.sortEvents(events);
-      this.setGroups(events);
-      this.setPeriods();
-      this.setItems();
-    }
-  }
-
-  protected sortEvents(events: NgxTimelineEvent[]): void {
-    events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-  }
-
-  protected setGroups(events: NgxTimelineEvent[]): void {
-    events.forEach((event) => {
-      // conversion from string to actual Date
-      event.timestamp = new Date(event.timestamp);
-      const periodKey = this.getPeriodKeyFromEvent(event);
-      if (!this.groups[periodKey]) {
-        this.groups[periodKey] = [];
-      }
-      this.groups[periodKey].push(event);
-    });
-  }
-
-  protected setItems(): void {
-    this.periods.forEach((p) => {
-      // insert first the period
-      this.items.push(p);
-      // in each period putting items on left
-      const onLeft = true;
-      const periodInfo = p.periodInfo;
-      // insert then all the events in this period
-      this.addPeriodEvents(periodInfo, onLeft);
-      // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);
-    });
-  }
-
-  protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void {
-    this.groups[periodInfo.periodKey].forEach((event, index) => {
-      const prevEvent = this.groups[periodInfo.periodKey][index - 1];
-      if (index > 0 && this.compareEvents(prevEvent, event)) {
-        onLeft = !onLeft;
-      }
-      this.pushEventOnItems(event, onLeft);
-    });
-    // return onLeft;
-  }
-
-  protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {
-    this.items.push({
-      eventInfo: { ...event }, position: onLeft ?
-        this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT
-    });
-  }
-
-  /**
-   * Compare the events inside the same group
-   */
-  protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {
-    return this.changeSideInGroup === NgxTimelineEventChangeSideInGroup.ALL ||
-      this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSideInGroup]);
-  }
-
-  protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {
-    return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);
-  }
-
-  protected setPeriods(): void {
-    this.periods = Object.keys(this.groups).map((periodKey) => {
-      const split = periodKey.split(this.separator);
-      return this.getPeriodInfo(split, periodKey);
-    });
-  }
-
-  private getPeriodInfo(split: string[], periodKey: string): { periodInfo: NgxTimelinePeriodInfo } {
-    return {
-      periodInfo: {
-        year: Number(split[0]),
-        month: Number(split[1]),
-        day: Number(split[2]),
-        periodKey,
-        firstDate: this.groups[periodKey][0].timestamp as Date,
-      },
-    };
-  }
-
-  protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {
-    return fieldsToAddEventGroup[this.groupEvent].map(field => event.timestamp[field]()).join(this.separator);
-  }
-}

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

@@ -1,226 +0,0 @@
-$flex-display-col: 49 49 0;
-$flex-display-col-center: 2 2 0;
-$background-line: #464646;
-$background-orange: orange;
-
-.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: $flex-display-col;
-}
-
-.col-right {
-  align-items: flex-start;
-  padding: 0;
-  flex: $flex-display-col;
-}
-
-.col-center {
-  min-height: 6rem;
-  padding: 0;
-  flex: $flex-display-col-center;
-}
-
-.center-inner {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-
-  .line {
-    min-height: 50%;
-    max-height: 50%;
-    height: 50%;
-    background: $background-line;
-    width: 0.1rem;
-
-    &.transparent {
-      background: transparent;
-    }
-  }
-}
-
-.period-container {
-  background: $background-orange;
-  color: white;
-  margin: 0;
-  padding: 0.2rem 0.5rem;
-
-  .period-inner-container {
-    width: max-content;
-    padding: 0.2rem 0.5rem;
-    z-index: 10;
-  }
-}
-
-.center-icon-container {
-  padding: .8rem 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  height: 10px;
-  width: 10px;
-  background: white;
-
-  .icon {
-    height: 1rem;
-    width: 1rem;
-    border-radius: 50%;
-    background: $background-orange;
-    margin: 0;
-    position: absolute;
-  }
-}
-
-.event-outer-container {
-  margin: 0 0.5rem;
-  width: 100%;
-}
-
-.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;
-  }
-}
-
-.desktop {
-  display: flex !important;
-}
-.mobile {
-  display: none !important;
-}
-
-@media (max-width: 900px) {
-  .desktop {
-    display: none !important;
-  }
-  .mobile {
-    display: flex !important;
-  }
-
-  .event-outer-container {
-    margin: 0.5rem 0.3rem;
-  }
-
-  .col-left {
-    align-items: flex-start;
-
-    .hour {
-      font-size: 12px;
-      padding: 0;
-      margin-right: 0.3rem;
-    }
-
-    &.col-period {
-      flex: 18 18 0;
-    }
-    &.col-event {
-      flex: 18 18 0;
-      padding: 0;
-      align-items: flex-end;
-    }
-  }
-
-  .col-right {
-    align-items: flex-start;
-
-    &.col-period {
-      flex: 77 77 0;
-    }
-    &.col-event {
-      flex: 77 77 0;
-      padding: 0;
-    }
-  }
-
-  .col-center {
-    min-height: 6rem;
-    justify-content: center;
-    margin: 0;
-
-    &.col-period {
-      flex: 5 5 0;
-      min-height: 3rem;
-    }
-    &.col-event {
-      flex: 5 5 0;
-    }
-  }
-
-  .center-inner {
-    align-items: center;
-  }
-
-  .period-container {
-    min-height: 20%;
-    height: 20%;
-    max-height: 20%;
-    background: transparent;
-    background: transparent;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 6px;
-
-    .period-inner-container {
-      position: absolute;
-      background: $background-orange;
-      color: white;
-      width: max-content;
-      padding: 0.2rem 0.5rem;
-      z-index: 10;
-    }
-  }
-
-  .center-icon-container {
-    align-items: center;
-    justify-content: center;
-    .icon {
-      height: 1rem;
-      width: 1rem;
-      position: absolute;
-    }
-  }
-}

package/projects/ngx-timeline/src/lib/models/NgxConfigObj.ts

@@ -1,110 +0,0 @@
-export let supportedLanguageCodes = ['en', 'it', 'fr', 'de', 'es'];
-
-export interface NgxConfigDate {
-  code: string;
-  dayMonthYear: string;
-  fullDate: string;
-  hoursMinutes: string;
-  monthYear: string;
-  year: string;
-}
-
-export interface NgxDateObjMap {
-  [key: string]: NgxConfigDate;
-}
-
-export let dateConfigMap: NgxDateObjMap = {
-  en: {
-    code: 'en-US',
-    fullDate: 'MM/dd/yyyy h:mm a',
-    dayMonthYear: 'dd MMMM yyyy',
-    monthYear: 'MMMM yyyy',
-    year: 'yyyy',
-    hoursMinutes: 'hh:mm a'
-  },
-  it: {
-    code: 'it-IT',
-    fullDate: 'dd/MM/yyyy H:mm',
-    dayMonthYear: 'dd MMMM yyyy',
-    monthYear: 'MMMM yyyy',
-    year: 'yyyy',
-    hoursMinutes: 'HH:mm'
-  },
-  fr: {
-    code: 'fr-FR',
-    fullDate: 'dd/MM/yyyy H:mm',
-    dayMonthYear: 'dd MMMM yyyy',
-    monthYear: 'MMMM yyyy',
-    year: 'yyyy',
-    hoursMinutes: 'HH:mm'
-  },
-  de: {
-    code: 'de',
-    fullDate: 'dd/MM/yyyy H:mm',
-    dayMonthYear: 'dd MMMM yyyy',
-    monthYear: 'MMMM yyyy',
-    year: 'yyyy',
-    hoursMinutes: 'HH:mm'
-  },
-  es: {
-    code: 'es',
-    fullDate: 'dd/MM/yyyy H:mm',
-    dayMonthYear: 'dd MMMM yyyy',
-    monthYear: 'MMMM yyyy',
-    year: 'yyyy',
-    hoursMinutes: 'HH:mm'
-  }
-};
-
-export enum NgxDateFormat {
-  DAY_MONTH_YEAR  = 'DAY_MONTH_YEAR',
-  FULL_DATE  = 'FULL_DATE',
-  MONTH_YEAR  = 'MONTH_YEAR',
-  HOURS_MINUTES = 'HOURS_MINUTES',
-  YEAR  = 'YEAR'
-}
-
-export let fieldConfigDate = {
-  MONTH_YEAR: 'monthYear',
-  YEAR: 'year',
-  HOURS_MINUTES: 'hoursMinutes',
-  FULL_DATE: 'fullDate',
-  DAY_MONTH_YEAR: 'dayMonthYear'
-}
-
-/**
- * Enum used to set the group event logic
- */
-export enum NgxTimelineEventGroup {
-  YEAR = 'YEAR',
-  MONTH_YEAR = 'MONTH_YEAR',
-  DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'
-}
-
-export let fieldsToAddEventGroup = {
-  YEAR: ['getFullYear'],
-  MONTH_YEAR: ['getFullYear', 'getMonth'],
-  DAY_MONTH_YEAR: ['getFullYear', 'getMonth', 'getDate']
-};
-
-export let periodKeyDateFormat = {
-  YEAR: NgxDateFormat.YEAR,
-  MONTH_YEAR: NgxDateFormat.MONTH_YEAR,
-  DAY_MONTH_YEAR: NgxDateFormat.DAY_MONTH_YEAR,
-};
-
-/**
- * Enum used to set the change side event logic
- */
-export enum NgxTimelineEventChangeSideInGroup {
-  ALL = 'ALL',
-  ON_DIFFERENT_HMS = 'ON_DIFFERENT_HMS',
-  ON_DIFFERENT_DAY = 'ON_DIFFERENT_DAY',
-  ON_DIFFERENT_MONTH = 'ON_DIFFERENT_MONTH'
-}
-
-export let fieldsToCheckEventChangeSideInGroup = {
-  ON_DIFFERENT_MONTH: ['getFullYear', 'getMonth'],
-  ON_DIFFERENT_DAY: ['getFullYear', 'getMonth', 'getDate'],
-  ON_DIFFERENT_HMS: ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds']
-};

package/projects/ngx-timeline/src/lib/models/NgxTimelineEvent.ts

@@ -1,32 +0,0 @@
-/**
- * Event to be provided from outside the timeline
- */
-export interface NgxTimelineEvent {
-  timestamp?: Date;
-  title?: string;
-  description?: string;
-  id?: any;
-}
-
-export interface NgxTimelinePeriodInfo {
-  periodKey?: string;
-  year?: number;
-  month?: number;
-  day?: number;
-  firstDate?: any;
-}
-
-/**
- * Item used inside the timeline
- */
-export interface NgxTimelineItem {
-  type?: string;
-  position?: NgxTimelineItemPosition.ON_LEFT | NgxTimelineItemPosition.ON_RIGHT;
-  periodInfo?: NgxTimelinePeriodInfo;
-  eventInfo?: NgxTimelineEvent;
-}
-
-export enum NgxTimelineItemPosition {
-  ON_LEFT = 'ON_LEFT',
-  ON_RIGHT = 'ON_RIGHT'
-}

package/projects/ngx-timeline/src/lib/ngx-timeline.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NgxTimelineComponent } from './components/ngx-timeline.component';
-import { NgxTimelineEventComponent } from './components/ngx-timeline-event/ngx-timeline-event.component';
-import { CommonModule, registerLocaleData } from '@angular/common';
-import { NgxDatePipe } from './pipes/ngx-date-pipe';
-import localeIt from '@angular/common/locales/it';
-import localeFr from '@angular/common/locales/fr';
-import localeDe from '@angular/common/locales/de';
-import localeEs from '@angular/common/locales/es';
-
-registerLocaleData(localeIt);
-registerLocaleData(localeFr);
-registerLocaleData(localeDe);
-registerLocaleData(localeEs);
-
-@NgModule({
-  declarations: [NgxTimelineComponent, NgxTimelineEventComponent, NgxDatePipe],
-  imports: [CommonModule],
-  exports: [NgxTimelineComponent, NgxDatePipe]
-})
-export class NgxTimelineModule { }

package/projects/ngx-timeline/src/lib/pipes/ngx-date-pipe.ts

@@ -1,29 +0,0 @@
-import { DatePipe } from '@angular/common';
-import { Pipe, PipeTransform } from '@angular/core';
-import { NgxConfigDate, NgxDateObjMap, NgxDateFormat, supportedLanguageCodes, fieldConfigDate, dateConfigMap } from '../models';
-
-@Pipe({ name: 'ngxdate', pure: false })
-export class NgxDatePipe implements PipeTransform {
-
-  constructor() {
-  }
-
-  transform(date: Date | string, dateFormat?: string, langCode?: string): string {
-    let transformedDate = null;
-    if (date) {
-      const objDate = this.getDateConfig(langCode);
-      transformedDate = new DatePipe(objDate.code).transform(new Date(date), this.dateFormat(dateFormat, objDate));
-    }
-    return transformedDate;
-  }
-
-  private dateFormat(dateFormat: string, configDate: NgxConfigDate): string {
-    return configDate[fieldConfigDate[dateFormat]];
-  }
-
-  private getDateConfig(langCode: string): NgxConfigDate {
-    const code = langCode || supportedLanguageCodes[0];
-    const configDate = dateConfigMap[code] || dateConfigMap[supportedLanguageCodes[0]];
-    return configDate;
-  }
-}

package/projects/ngx-timeline/src/test.ts

@@ -1,26 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

package/projects/ngx-timeline/tsconfig.lib.json

@@ -1,25 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "target": "es2015",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/projects/ngx-timeline/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}

package/projects/ngx-timeline/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}

package/projects/ngx-timeline/tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": "../../tslint.json",
-  "rules": {
-    "directive-selector": [
-      true,
-      "attribute",
-      "ngx",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "ngx",
-      "kebab-case"
-    ]
-  }
-}