@frxjs/ngx-timeline 1.0.7 → 1.0.12

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

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

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

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

@@ -1,2 +1,2 @@
-export * from './NgxConfigObj';
-export * from './NgxTimelineEvent';
+export * from './NgxConfigObj';
+export * from './NgxTimelineEvent';

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

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

@@ -1 +1 @@
-export * from './ngx-date-pipe';
+export * from './ngx-date-pipe';

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

@@ -0,0 +1,29 @@
+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/{public-api.d.ts → projects/ngx-timeline/src/public-api.ts}

@@ -1,4 +1,7 @@
-export * from './lib/components';
-export * from './lib/models';
-export * from './lib/pipes/';
-export * from './lib/ngx-timeline.module';
+/*
+ * Public API Surface of ngx-timeline
+ */
+export * from './lib/components';
+export * from './lib/models';
+export * from './lib/pipes/';
+export * from './lib/ngx-timeline.module';

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

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+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/ngx-timeline/tsconfig.lib.json

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

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

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

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

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "preserveSymlinks": true,
+    "strict": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+    "paths": {
+      "ngx-timeline": [
+        "dist/ngx-timeline/ngx-timeline",
+        "dist/ngx-timeline"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": false
+  }
+}