Skip to content

Commit

Permalink
Merge pull request #72 from Rotzbua/feat_strict_typescript
Browse files Browse the repository at this point in the history 
feat!: strict mode and signals
  • Loading branch information
@emanuelefricano93
emanuelefricano93 authored Dec 21, 2024
2 parents b635ec6 + 8d81548 commit c612f98
Show file tree
Hide file tree
Showing 18 changed files with 309 additions and 321 deletions.
6 changes: 2 additions & 4 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,8 @@
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
// "plugin:@angular-eslint/all", // more pedantic tests =)
"plugin:@typescript-eslint/recommended",
// "plugin:@typescript-eslint/recommended-type-checked",
// "plugin:@typescript-eslint/stylistic",
"plugin:@typescript-eslint/recommended-type-checked",
"plugin:@typescript-eslint/stylistic",
// "plugin:@typescript-eslint/stylistic-type-checked",
// "plugin:@stylistic/recommended-extends",
"plugin:import/recommended"
Expand All @@ -31,7 +30,6 @@
"rules": {
"quotes": ["error", "single"],
"@typescript-eslint/explicit-function-return-type": "warn",
"@typescript-eslint/no-explicit-any": "off",
"import/order": [
"error",
{
Expand Down
53 changes: 24 additions & 29 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ Running the following command to install the library
```
npm install @frxjs/ngx-timeline
```
<br><br>



## Examples of Usage

Expand All @@ -31,38 +28,37 @@ After installing the library and including NgxTimelineModule in your imports mod
<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><li>'sl'</li><li>'tr'</li><li>'pl'</li><li>'pt'</li><li>'ru'</li></ul> | 'en'
enableAnimation | Boolean used to enable or disable the animations | no | boolean | true
reverseOrder | Boolean used to reverse sort order (default older first) | no | boolean | false
groupEvent | Logic to be applied in order to group events | no | enum NgxTimelineEventGroup | NgxTimelineEventGroup.MONTH_YEAR
orientation | Orientation of the timeline | no | enum NgxTimelineOrientation | NgxTimelineOrientation.VERTICAL
changeSide | Logic to be applied in order to put events on LEFT or RIGHT | no | enum NgxTimelineEventChangeSide | NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP
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
eventDescriptionCustomTemplate| Custom Template displayed to show the description | no | TemplateRef<any> | no default
<br>

| 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><li>'sl'</li><li>'tr'</li><li>'pl'</li><li>'pt'</li><li>'ru'</li></ul> | 'en' |
| enableAnimation | Boolean used to enable or disable the animations | no | boolean | true |
| reverseOrder | Boolean used to reverse sort order (default older first) | no | boolean | false |
| groupEvent | Logic to be applied in order to group events | no | enum NgxTimelineEventGroup | NgxTimelineEventGroup.MONTH_YEAR |
| orientation | Orientation of the timeline | no | enum NgxTimelineOrientation | NgxTimelineOrientation.VERTICAL |
| changeSide | Logic to be applied in order to put events on LEFT or RIGHT | no | enum NgxTimelineEventChangeSide | NgxTimelineEventChangeSide.ON_DIFFERENT_DAY_IN_GROUP |
| periodCustomTemplate | Custom Template displayed before a group of events | no | `TemplateRef<unknown>` | no default |
| eventCustomTemplate | Custom Template displayed to show a single event | no | `TemplateRef<unknown>` | no default |
| centerIconCustomTemplate | Custom Template displayed to show an separator icon | no | `TemplateRef<unknown>` | no default |
| dateInstantCustomTemplate | Custom Template displayed to show the side date | no | `TemplateRef<unknown>` | no default |
| innerEventCustomTemplate | Custom Template displayed to show the inner event | no | `TemplateRef<unknown>` | no default |
| eventDescriptionCustomTemplate | Custom Template displayed to show the description | no | `TemplateRef<unknown>` | no default |

### Output
Output name | Explanation | Mandatory | Type/Supported Values | Default value
--- | --- | --- | --- | ---
clickEmitter | Output click event emitter | no | BehaviorSubject<NgxTimelineItem> | no default
<br>

| Output name | Explanation | Mandatory | Type/Supported Values | Default value |
|--------------|----------------------------|-----------|-------------------------------------|---------------|
| clickEmitter | Output click event emitter | no | `OutputEmitterRef<NgxTimelineItem>` | no default |

### Types and Enums
```typescript
interface NgxTimelineEvent {
timestamp?: Date;
timestamp: Date;
title?: string;
description?: string;
id?: any;
Expand Down Expand Up @@ -91,7 +87,6 @@ enum NgxTimelineEventChangeSide {
ON_DIFFERENT_MONTH_IN_GROUP = 'ON_DIFFERENT_MONTH_IN_GROUP'
}
```
<br>

### Custom Theme supported

Expand All @@ -110,7 +105,7 @@ This is an example of custom-theme that can be applied for instance via an ng-cl
<div [ngClass]="{'transparent first-line': !index}" class="line"></div>
<div class="period-container">
<p>
{{index}} - {{period | json }}
{{index}} - {{period | json}}
</p>
</div>
<div class="line"></div>
Expand Down Expand Up @@ -148,9 +143,9 @@ This is an example of custom-theme that can be applied for instance via an ng-cl
{{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.

Expand Down
39 changes: 18 additions & 21 deletions projects/demo-app/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,24 @@ <h2 class="title">Ngx-Timeline</h2>
</div>
</form>

<div class="ngx-timeline-container" [ngClass]="{'custom-theme': form.get('customTheme').value}">
<div class="ngx-timeline-container" [ngClass]="{'custom-theme': form.get('customTheme')?.value}">
<!-- ngx-timeline -->
<ngx-timeline
[events]="events"
[ngClass]="form.get('customClass').value ? 'inter' : ''"
[langCode]="form.get('langCode').value"
[enableAnimation]="form.get('enableAnimation').value"
[reverseOrder]="form.get('reverseOrder').value"
[groupEvent]="form.get('groupEvent').value"
[changeSide]="form.get('changeSide').value"
[orientation]="form.get('orientation').value"
[eventCustomTemplate]="form.get('eventCustomTemplate').value ? eventCustomTemplate : null"
[innerEventCustomTemplate]="form.get('innerEventCustomTemplate').value ? innerEventCustomTemplate : null"
[eventDescriptionCustomTemplate]="form.get('eventDescriptionCustomTemplate').value ? eventDescriptionCustomTemplate : null"
[centerIconCustomTemplate]="form.get('centerIconCustomTemplate').value ? centerIconCustomTemplate : null"
[dateInstantCustomTemplate]="form.get('dateInstantCustomTemplate').value ? dateInstantCustomTemplate : null"
[periodCustomTemplate]="form.get('periodCustomTemplate').value ? periodCustomTemplate : null"
(clickEmitter)="form.get('clickEmitter').value ? handleClick($event) : null"
[ngClass]="form.get('customClass')?.value ? 'inter' : ''"
[langCode]="form.get('langCode')?.value"
[enableAnimation]="form.get('enableAnimation')?.value"
[reverseOrder]="form.get('reverseOrder')?.value"
[groupEvent]="form.get('groupEvent')?.value"
[changeSide]="form.get('changeSide')?.value"
[orientation]="form.get('orientation')?.value"
[eventCustomTemplate]="form.get('eventCustomTemplate')?.value ? eventCustomTemplate : undefined"
[innerEventCustomTemplate]="form.get('innerEventCustomTemplate')?.value ? innerEventCustomTemplate : undefined"
[eventDescriptionCustomTemplate]="form.get('eventDescriptionCustomTemplate')?.value ? eventDescriptionCustomTemplate : undefined"
[centerIconCustomTemplate]="form.get('centerIconCustomTemplate')?.value ? centerIconCustomTemplate : undefined"
[dateInstantCustomTemplate]="form.get('dateInstantCustomTemplate')?.value ? dateInstantCustomTemplate : undefined"
[periodCustomTemplate]="form.get('periodCustomTemplate')?.value ? periodCustomTemplate : undefined"
(clickEmitter)="form.get('clickEmitter')?.value ? handleClick($event) : undefined"
></ngx-timeline>
</div>

Expand All @@ -56,13 +56,13 @@ <h2 class="title">Ngx-Timeline</h2>
<!-- CUSTOM TEMPLATES -->
<ng-template #periodCustomTemplate let-period=period let-index=index>
<div class="period-inner-container">
{{index}} - {{period?.firstDate | ngxdate }}
{{index}} - {{period?.firstDate | ngxdate}}
</div>
</ng-template>

<ng-template #centerIconCustomTemplate let-event=event let-index=index>
<div class="icon-container">
<img src="assets/inter.png">
<img src="assets/inter.png" alt="custom icon">
<!-- {{event | json}} {{index | json}} -->
</div>
</ng-template>
Expand All @@ -85,11 +85,8 @@ <h2 class="title">Ngx-Timeline</h2>

<ng-template #dateInstantCustomTemplate let-item=item>
<span>
{{item?.timestamp | ngxdate : ngxDateFormat.FULL_DATE }}
{{item?.timestamp | ngxdate : ngxDateFormat.FULL_DATE}}
</span>
</ng-template>


</div>


28 changes: 14 additions & 14 deletions projects/demo-app/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,24 @@ import {JsonPipe, NgClass} from '@angular/common';
import {Component} from '@angular/core';
import {UntypedFormGroup, UntypedFormControl, ReactiveFormsModule} from '@angular/forms';

import {NgxTimelineItem} from '../../../ngx-timeline/src/lib/models';
import {NgxDateFormat, NgxTimelineEvent, NgxTimelineEventChangeSide, NgxTimelineEventGroup, NgxTimelineModule, NgxTimelineOrientation} from 'ngx-timeline';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
imports: [
JsonPipe,
NgClass,
NgxTimelineModule,
ReactiveFormsModule,
]
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
imports: [
JsonPipe,
NgClass,
NgxTimelineModule,
ReactiveFormsModule,
],
})
export class AppComponent {
title = 'demo-app';
events: NgxTimelineEvent[];
events: NgxTimelineEvent[] = [];
form: UntypedFormGroup;
ngxDateFormat = NgxDateFormat;

Expand Down Expand Up @@ -184,9 +186,7 @@ export class AppComponent {
];
}

handleClick(event: any): void {
if (event) {
window.console.log('', event);
}
handleClick(event: NgxTimelineItem): void {
window.console.log('', event);
}
}
3 changes: 2 additions & 1 deletion projects/demo-app/tsconfig.app.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": false
"strictTemplates": true
},
"files": [
"src/main.ts"
Expand Down
Loading

0 comments on commit c612f98

Please sign in to comment.