@frxjs/ngx-timeline 1.0.7 → 1.0.12

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

@@ -0,0 +1,63 @@
+/**
+ * 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

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

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

@@ -0,0 +1,25 @@
+// 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

@@ -0,0 +1,26 @@
+/* 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

@@ -0,0 +1,18 @@
+/* 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

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

package/projects/ngx-timeline/README.md

@@ -0,0 +1,136 @@
+# 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

@@ -0,0 +1,44 @@
+// 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

@@ -0,0 +1,7 @@
+{
+  "$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

@@ -0,0 +1,20 @@
+{
+  "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/{lib/components/index.d.ts → projects/ngx-timeline/src/lib/components/index.ts}

@@ -1,2 +1,2 @@
-export * from './ngx-timeline.component';
-export * from './ngx-timeline-event/ngx-timeline-event.component';
+export * from './ngx-timeline.component';
+export * from './ngx-timeline-event/ngx-timeline-event.component';

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

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,197 @@
+.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;
+      }
+    }
+  }
+}