@frxjs/ngx-timeline 1.0.4 → 1.0.12

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.github/workflows/CI-main.yml

@@ -0,0 +1,48 @@
+name: CI
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+
+      # Runs a single command using the runners shell
+      - name: Run npm install
+        run: npm install
+
+      - name: Run build prod
+        run: npm run build:prod
+
+      - name: Run test
+        run: node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng test
+
+  #if the version will be updated in package.json to 1.2.3 with the commit message Release 1.2.3 this job action will perform a new tag before publishing
+  # npm-publish:
+  #   name: npm-publish
+  #   needs: build
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v1
+  #     - uses: actions/setup-node@v1
+  #       with:
+  #         node-version: 12
+  #         registry-url: https://registry.npmjs.org/
+  #     - run: npm run publish
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

package/README.md

@@ -1,136 +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 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/>
-
-
-## 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
+# 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 it's time to enjoy and start to code.
+
+Thanks in advance for your contribution

package/angular.json

@@ -0,0 +1,178 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx-timeline": {
+      "projectType": "library",
+      "root": "projects/ngx-timeline",
+      "sourceRoot": "projects/ngx-timeline/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "projects/ngx-timeline/tsconfig.lib.json",
+            "project": "projects/ngx-timeline/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngx-timeline/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ngx-timeline/src/test.ts",
+            "tsConfig": "projects/ngx-timeline/tsconfig.spec.json",
+            "codeCoverage": true,
+            "karmaConfig": "projects/ngx-timeline/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ngx-timeline/tsconfig.lib.json",
+              "projects/ngx-timeline/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "demo-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/demo-app",
+      "sourceRoot": "projects/demo-app/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "docs",
+            "index": "projects/demo-app/src/index.html",
+            "main": "projects/demo-app/src/main.ts",
+            "polyfills": "projects/demo-app/src/polyfills.ts",
+            "tsConfig": "projects/demo-app/tsconfig.app.json",
+            "assets": [
+              "projects/demo-app/src/favicon.ico",
+              "projects/demo-app/src/assets"
+            ],
+            "styles": [
+              "projects/demo-app/src/styles.scss"
+            ],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/demo-app/src/environments/environment.ts",
+                  "with": "projects/demo-app/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": ""
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo-app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo-app:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo-app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/demo-app/src/test.ts",
+            "polyfills": "projects/demo-app/src/polyfills.ts",
+            "tsConfig": "projects/demo-app/tsconfig.spec.json",
+            "karmaConfig": "projects/demo-app/karma.conf.js",
+            "assets": [
+              "projects/demo-app/src/favicon.ico",
+              "projects/demo-app/src/assets"
+            ],
+            "styles": [
+              "projects/demo-app/src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/demo-app/tsconfig.app.json",
+              "projects/demo-app/tsconfig.spec.json",
+              "projects/demo-app/e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "projects/demo-app/e2e/protractor.conf.js",
+            "devServerTarget": "demo-app:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "demo-app:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ngx-timeline",
+  "cli": {
+    "analytics": false
+  }
+}