@frxjs/ngx-timeline 1.0.3 → 1.0.7

package/projects/demo-app/src/app/app.component.ts

@@ -1,147 +0,0 @@
-import { Component } from '@angular/core';
-import { NgxTimelineEvent, NgxTimelineEventGroup, NgxTimelineEventChangeSideInGroup, NgxDateFormat } from 'ngx-timeline';
-import { BehaviorSubject } from 'rxjs';
-import { FormGroup, FormControl } from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
-  title = 'demo-app';
-  events: NgxTimelineEvent[];
-  events$: BehaviorSubject<NgxTimelineEvent[]> = new BehaviorSubject(null);
-  color = 0;
-  backgroundColor = 'red';
-  form: FormGroup;
-  ngxDateFormat = NgxDateFormat;
-
-  configurations = [
-    {
-      label: 'Language code',
-      formControlName: 'langCode',
-      options: [
-        {name: 'English', value: 'en'},
-        {name: 'French', value: 'fr'},
-        {name: 'German', value: 'de'},
-        {name: 'Spanish', value: 'es'},
-        {name: 'Italian', value: 'it'}
-      ]
-    },
-    {
-      label: 'Enable animation',
-      formControlName: 'enableAnimation',
-      options: [
-        {name: 'Enable animation', value: true},
-        {name: 'Disable animation', value: false}
-      ]
-    },
-    {
-      label: 'Custom class',
-      formControlName: 'customClass',
-      options: [
-        {name: 'No Custom Class', value: false},
-        {name: 'Custom Class', value: true}
-      ]
-    },
-    {
-      label: 'Group events by',
-      formControlName: 'groupEvent',
-      options: [
-        {name: 'Month Year', value: NgxTimelineEventGroup.MONTH_YEAR},
-        {name: 'Day Month Year', value: NgxTimelineEventGroup.DAY_MONTH_YEAR},
-        {name: 'Year', value: NgxTimelineEventGroup.YEAR}
-      ]
-    },
-    {
-      label: 'Change event side in group',
-      formControlName: 'changeSideInGroup',
-      options: [
-        {name: 'On different day', value: NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY},
-        {name: 'All', value: NgxTimelineEventChangeSideInGroup.ALL},
-        {name: 'On different hours, minutes and seconds', value: NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_HMS},
-        {name: 'On different month', value: NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_MONTH}
-      ]
-    },
-    {
-      label: 'Date instant custom template',
-      formControlName: 'dateInstantCustomTemplate',
-      options: [
-        {name: 'No Custom template', value: false},
-        {name: 'Custom Date Instant Template', value: true}
-      ]
-    },
-    {
-      label: 'Event custom template',
-      formControlName: 'eventCustomTemplate',
-      options: [
-        {name: 'No Custom template', value: false},
-        {name: 'Custom Event Template', value: true}
-      ]
-    },
-    {
-      label: 'Inner event custom template',
-      formControlName: 'innerEventCustomTemplate',
-      options: [
-        {name: 'No Custom template', value: false},
-        {name: 'Custom Inner Event Template', value: true}
-      ]
-    },
-    {
-      label: 'Center icon custom template',
-      formControlName: 'centerIconCustomTemplate',
-      options: [
-        {name: 'No Custom Template', value: false},
-        {name: 'Custom Icon Template', value: true}
-      ]
-    },
-    {
-      label: 'Period custom template',
-      formControlName: 'periodCustomTemplate',
-      options: [
-        {name: 'No Custom Template', value: false},
-        {name: 'Custom Period Template', value: true}
-      ]
-    },
-    {
-      label: 'Click emitter',
-      formControlName: 'clickEmitter',
-      options: [
-        {name: 'No emitter', value: false},
-        {name: 'Handle click (open console)', value: true}
-      ]
-    }
-  ];
-  constructor() {
-    this.form = new FormGroup({});
-    this.configurations.forEach(configuration =>
-      this.form.addControl(configuration.formControlName, new FormControl(configuration.options[0].value)));
-    this.initEvents();
-  }
-
-  private initEvents(): void {
-    const today = new Date();
-    const tomorrow = new Date();
-    tomorrow.setDate(today.getDate() + 1);
-    const nextMonth = new Date();
-    nextMonth.setMonth(today.getMonth() + 1);
-    const nextYear = new Date();
-    nextYear.setFullYear(today.getFullYear() + 1);
-
-    this.events = [
-      { id: 5, description: 'This is the description of the event 5', timestamp: nextYear, title: 'title 5' },
-      { id: 0, description: 'This is the description of the event 0', timestamp: today, title: 'title 0' },
-      { id: 1, description: 'This is the description of the event 1', timestamp: tomorrow, title: 'title 1' },
-      { id: 2, description: 'This is the description of the event 2', timestamp: today, title: 'title 2' },
-      { id: 3, description: 'This is the description of the event 3', timestamp: tomorrow, title: 'title 3' },
-      { id: 4, description: 'This is the description of the event 4', timestamp: nextMonth, title: 'title 4' },
-    ];
-  }
-
-  handleClick(event: any): void {
-    if (event) {
-      window.console.log('', event);
-    }
-  }
-}

package/projects/demo-app/src/app/app.module.ts

@@ -1,20 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-import { NgxTimelineModule } from 'ngx-timeline';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    ReactiveFormsModule,
-    NgxTimelineModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

package/projects/demo-app/src/environments/environment.prod.ts

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

package/projects/demo-app/src/environments/environment.ts

@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
-  production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

package/projects/demo-app/src/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>DemoApp</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>

package/projects/demo-app/src/main.ts

@@ -1,12 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));

package/projects/demo-app/src/polyfills.ts

@@ -1,63 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

package/projects/demo-app/src/styles.scss

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

package/projects/demo-app/src/test.ts

@@ -1,25 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-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/demo-app/tsconfig.app.json

@@ -1,26 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/app",
-    "types": [],
-      "paths": {
-      "ngx-timeline": [
-        "dist/ngx-timeline/ngx-timeline",
-        "dist/ngx-timeline"
-      ]
-    }
-  },
-  "angularCompilerOptions": {
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": false
-  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}

package/projects/demo-app/tsconfig.spec.json

@@ -1,18 +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",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}

package/projects/demo-app/tslint.json

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

package/projects/ngx-timeline/README.md

@@ -1,127 +0,0 @@
-# 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/>
-
-
-## Examples of Usage
-
-After including "@frxjs/ngx-timeline": "1.0.0" in your dependencies list, npm install 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/projects/ngx-timeline/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, '../../coverage/ngx-timeline'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package/projects/ngx-timeline/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-timeline",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/projects/ngx-timeline/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@frxjs/ngx-timeline",
-  "version": "1.0.3",
-  "keywords": ["angular", "timeline"],
-  "author": {
-    "name": "Emanuele Fricano",
-    "email": "emanuelefricano93@gmail.com"
-  },
-  "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": "^11.0.9",
-    "@angular/core": "^11.0.9"
-  },
-  "dependencies": {
-    "tslib": "^2.0.0"
-  }
-}

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

@@ -1,37 +0,0 @@
-<div class="event-wrapper-container" (click)="clickEmitter.next(event)">
-  <div *ngIf="colSidePosition===ngxTimelineItemPosition.ON_RIGHT" class="arrow left"></div>
-  <div class="event" [ngClass]="{'enableAnimation': enableAnimation}">
-    <ng-container *ngTemplateOutlet="innerEventCustomTemplate || innerEventContainer; context: {event: event}">
-    </ng-container>
-  </div>
-  <div *ngIf="colSidePosition===ngxTimelineItemPosition.ON_LEFT" class="arrow right"></div>
-</div>
-
-<ng-template #innerEventContainer let-event=event>
-  <div class="event-container" [ngClass]="{'reverse': colSidePosition === ngxTimelineItemPosition.ON_LEFT}">
-    <div class="event-info-container">
-      <div class="event-info-header">
-        <div class="title-container">{{event?.eventInfo?.title | titlecase}}</div>
-      </div>
-      <div class="event-info-body">
-        <p class="event-info-description">{{event?.eventInfo?.description}}</p>
-      </div>
-    </div>
-
-    <div class="event-divider-container">
-      <hr/>
-    </div>
-
-    <div class="event-date-container" *ngIf="getDateObj() as dateObj">
-      <div>
-        <p>{{dateObj?.month}}</p>
-      </div>
-      <div>
-        <p class="day">{{dateObj?.day}}</p>
-      </div>
-      <div>
-        <p>{{dateObj?.year}}</p>
-      </div>
-    </div>
-  </div>
-</ng-template>