@frxjs/ngx-timeline 1.0.12 → 1.2.1

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';  // 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/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,136 +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 [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/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: false,
-    browsers: ['ChromeHeadless'],
-    singleRun: true,
-    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,20 +0,0 @@
-{
-  "name": "@frxjs/ngx-timeline",
-  "version": "1.0.7",
-  "keywords": ["angular", "timeline"],
-  "author": {
-    "name": "Emanuele Fricano",
-    "email": "emanuelefricano93@gmail.com"
-  },
-  "repository": {
-    "url": "https://github.com/emanuelefricano93/frxjs-Ngx-Timeline"
-  },
-  "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>

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});
-    });
-  });
-
-});