From 6aabe8147e7023ec75bed68e5e6f9f174d506139 Mon Sep 17 00:00:00 2001
From: Stefano Zanelli <stefano.zanelli@unitn.it>
Date: Thu, 28 Mar 2024 10:34:15 +0100
Subject: [PATCH 1/7] feat: slimTitleLink
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aggiunta proprietà  link relativa a slimTitle in ItHeaderComponent (visualizzazione desktop)
---
 .../lib/components/navigation/header/header.component.html    | 4 +++-
 .../src/lib/components/navigation/header/header.component.ts  | 1 +
 src/app/header/header-example/header-example.component.html   | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html
index 3db2cf23..ea76dec6 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html
+++ b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html
@@ -10,7 +10,9 @@
         <div class="row">
           <div class="col-12">
             <div class="it-header-slim-wrapper-content">
-              <a class="d-none d-lg-block navbar-brand" href="#">{{ slimTitle }}</a>
+              <a class="d-none d-lg-block navbar-brand" [href]="slimTitleLink" [target]="slimTitleLink !== '#' ? '_blank' : '_self'">
+                {{ slimTitle }}
+              </a>
               <div class="nav-mobile">
                 <nav [attr.aria-label]="'it.navigation.secondary-navigation' | translate">
                   <a
diff --git a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts
index 7850f6d3..05569f3e 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts
+++ b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts
@@ -38,6 +38,7 @@ export class ItHeaderComponent implements AfterViewInit, OnChanges {
   @Input({ transform: inputToBoolean }) showSearch?: boolean = true;
 
   @Input() slimTitle: string | undefined;
+  @Input() slimTitleLink: string | undefined = '#';
 
   @Input() loginStyle: 'none' | 'default' | 'full' = 'none';
 
diff --git a/src/app/header/header-example/header-example.component.html b/src/app/header/header-example/header-example.component.html
index 188b5046..3cf8c040 100644
--- a/src/app/header/header-example/header-example.component.html
+++ b/src/app/header/header-example/header-example.component.html
@@ -2,6 +2,7 @@ <h3>Componente Header</h3>
 <div class="bd-example">
   <it-header
     slimTitle="Ente di appartenenza"
+    slimTitleLink="https://italia.github.io/design-angular-kit"
     [loginStyle]="login"
     [light]="light"
     [showSearch]="search"

From e590025b0dd3259168e032c2b81b01dd1d8e92e0 Mon Sep 17 00:00:00 2001
From: Stefano Zanelli <stefano.zanelli@unitn.it>
Date: Wed, 3 Apr 2024 13:52:44 +0200
Subject: [PATCH 2/7] feat: #345 Componente Timeline

---
 .../design-angular-kit/assets/i18n/en.json    |  7 +-
 .../design-angular-kit/assets/i18n/it.json    |  7 +-
 .../timeline-container.component.html         | 21 ++++
 .../timeline-container.component.spec.ts      | 21 ++++
 .../timeline-container.component.ts           | 24 +++++
 .../timeline-item.component.html              | 45 +++++++++
 .../timeline-item.component.spec.ts           | 22 +++++
 .../timeline-item/timeline-item.component.ts  | 55 +++++++++++
 .../core/timeline/timeline.module.ts          | 11 +++
 .../src/lib/design-angular-kit.module.ts      |  2 +
 .../src/lib/interfaces/core.ts                | 19 ++++
 .../src/lib/interfaces/icon.ts                |  1 +
 src/app/app-routing.module.ts                 |  1 +
 .../timeline-default-example.component.html   |  7 ++
 ...timeline-default-example.component.spec.ts | 22 +++++
 .../timeline-default-example.component.ts     | 96 +++++++++++++++++++
 .../timeline-examples.component.spec.ts       | 22 +++++
 .../timeline-examples.component.tpl           | 14 +++
 .../timeline-examples.component.ts            |  7 ++
 .../timeline-index.component.html             | 11 +++
 .../timeline-index.component.spec.ts          | 22 +++++
 .../timeline-index.component.ts               | 14 +++
 src/app/timeline/timeline-routing.module.ts   | 11 +++
 src/app/timeline/timeline.module.ts           | 13 +++
 src/assets/table-of-content.json              |  4 +
 src/styles.scss                               |  2 +-
 26 files changed, 478 insertions(+), 3 deletions(-)
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts
 create mode 100644 src/app/timeline/timeline-default-example/timeline-default-example.component.html
 create mode 100644 src/app/timeline/timeline-default-example/timeline-default-example.component.spec.ts
 create mode 100644 src/app/timeline/timeline-default-example/timeline-default-example.component.ts
 create mode 100644 src/app/timeline/timeline-examples/timeline-examples.component.spec.ts
 create mode 100644 src/app/timeline/timeline-examples/timeline-examples.component.tpl
 create mode 100644 src/app/timeline/timeline-examples/timeline-examples.component.ts
 create mode 100644 src/app/timeline/timeline-index/timeline-index.component.html
 create mode 100644 src/app/timeline/timeline-index/timeline-index.component.spec.ts
 create mode 100644 src/app/timeline/timeline-index/timeline-index.component.ts
 create mode 100644 src/app/timeline/timeline-routing.module.ts
 create mode 100644 src/app/timeline/timeline.module.ts

diff --git a/projects/design-angular-kit/assets/i18n/en.json b/projects/design-angular-kit/assets/i18n/en.json
index 850f7461..080a4001 100644
--- a/projects/design-angular-kit/assets/i18n/en.json
+++ b/projects/design-angular-kit/assets/i18n/en.json
@@ -60,7 +60,8 @@
       "back": "Back",
       "forward": "Forward",
       "rate-star": "Rate {{current}} out of {{total}} stars",
-      "rating-star": "Rating {{current}} out of {{total}} stars"
+      "rating-star": "Rating {{current}} out of {{total}} stars",
+      "today": "Today"
     },
     "form": {
       "caps-inserted": "CAPS LOCK entered",
@@ -103,6 +104,10 @@
       "aria-label-toggle": "Show/Hide navigation",
       "hide": "Hide navigation"
     },
+    "timeline": {
+      "read-more": "Read more",
+      "read-more-on": "on {{title}}"
+    },
     "utils": {
       "selected": "Selected",
       "language-selection": "Language selection: {{lang}}",
diff --git a/projects/design-angular-kit/assets/i18n/it.json b/projects/design-angular-kit/assets/i18n/it.json
index 5b9479d9..561dc457 100644
--- a/projects/design-angular-kit/assets/i18n/it.json
+++ b/projects/design-angular-kit/assets/i18n/it.json
@@ -60,7 +60,8 @@
       "back": "Indietro",
       "forward": "Avanti",
       "rate-star": "Valuta {{current}} stelle su {{total}}",
-      "rating-star": "Valutazione {{current}} stelle su {{total}}"
+      "rating-star": "Valutazione {{current}} stelle su {{total}}",
+      "today": "Oggi"
     },
     "form": {
       "caps-inserted": "CAPS LOCK inserito",
@@ -103,6 +104,10 @@
       "aria-label-toggle": "Mostra/Nascondi la navigazione",
       "hide": "Nascondi la navigazione"
     },
+    "timeline": {
+      "read-more": "Leggi di più",
+      "read-more-on": "su {{title}}"
+    },
     "utils": {
       "selected": "Selezionata",
       "language-selection": "Selezione lingua: {{lang}}",
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html
new file mode 100644
index 00000000..6e590229
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html
@@ -0,0 +1,21 @@
+<div class="it-timeline-wrapper">
+  <div class="row">
+    @for (element of timelineElements; track $index) {
+      <div class="col-12">
+        <it-timeline-item
+          [title]="element.title"
+          [text]="element.text"
+          [signature]="element.signature"
+          [pinType]="element.pin?.type"
+          [pinIcon]="element.pin?.icon"
+          [pinText]="element.pin?.text"
+          [eventDate]="element.eventDate"
+          [dateFormat]="dateFormat"
+          [categoryTitle]="element.category?.title"
+          [categoryLink]="element.category?.link"
+          [showReadMore]="element.link?.length"
+          [readMoreLink]="element.link"></it-timeline-item>
+      </div>
+    }
+  </div>
+</div>
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts
new file mode 100644
index 00000000..24537b7e
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItTimelineContainerComponent } from './timeline-container.component';
+import { tb_base } from '../../../../../test';
+
+describe('ItTimelineContainerComponent', () => {
+  let component: ItTimelineContainerComponent;
+  let fixture: ComponentFixture<ItTimelineContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base).compileComponents();
+
+    fixture = TestBed.createComponent(ItTimelineContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
new file mode 100644
index 00000000..74fd536d
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ItTimelineItemComponent } from '../timeline-item/timeline-item.component';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItAbstractComponent } from 'projects/design-angular-kit/src/lib/abstracts/abstract.component';
+import { TimelineElement } from 'projects/design-angular-kit/src/lib/interfaces/core';
+
+@Component({
+  standalone: true,
+  selector: 'it-timeline-container',
+  templateUrl: './timeline-container.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent],
+})
+export class ItTimelineContainerComponent extends ItAbstractComponent {
+  /** Timeline elements array
+   * @default []
+   */
+  @Input() timelineElements: TimelineElement[] = [];
+  /** Default date format for timeline element reference date
+   * @default dd/MM/yyyy
+   */
+  @Input() dateFormat: string = 'dd/MM/yyyy';
+}
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
new file mode 100644
index 00000000..e20183db
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
@@ -0,0 +1,45 @@
+<div class="timeline-element">
+  @if (pinType === 'now') {
+    <span class="it-now-label d-none d-lg-flex">{{ 'it.core.today' | translate }}</span>
+  }
+  <div class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
+    <div class="pin-icon">
+      @if (pinIcon) {
+        <it-icon [name]="pinIcon"></it-icon>
+      } @else {
+        <it-icon name="code-circle"></it-icon>
+      }
+    </div>
+    <div class="pin-text">
+      <span>{{ pinText }}</span>
+    </div>
+  </div>
+  <div class="card-wrapper">
+    <div class="card">
+      <div class="card-body">
+        @if ((categoryTitle && categoryLink) || eventDate) {
+          <div class="category-top">
+            @if (categoryTitle) {
+              <a class="category" [href]="categoryLink">{{ categoryTitle }}</a>
+            }
+            @if (eventDate) {
+              <span class="data">{{ eventDate | date: dateFormat }}</span>
+            }
+          </div>
+        }
+        <h5 class="card-title">{{ title }}</h5>
+        <p class="card-text">{{ text }}</p>
+        @if (signature) {
+          <span class="card-signature">{{ signature }}</span>
+        }
+        @if (showReadMore) {
+          <a class="read-more" [href]="readMoreLink">
+            <span class="text">{{ 'it.timeline.read-more' | translate }}</span>
+            <span class="visually-hidden">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>
+            <it-icon name="arrow-right"></it-icon>
+          </a>
+        }
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts
new file mode 100644
index 00000000..22196d5b
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItTimelineItemComponent } from './timeline-item.component';
+
+describe('ItTimelineItemComponent', () => {
+  let component: ItTimelineItemComponent;
+  let fixture: ComponentFixture<ItTimelineItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItTimelineItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItTimelineItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
new file mode 100644
index 00000000..5921e44d
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, Input, booleanAttribute } from '@angular/core';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { DatePipe, NgClass } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { TimelinePINType } from 'projects/design-angular-kit/src/lib/interfaces/core';
+import { IconName } from 'projects/design-angular-kit/src/lib/interfaces/icon';
+
+@Component({
+  standalone: true,
+  selector: 'it-timeline-item',
+  templateUrl: './timeline-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, DatePipe, TranslateModule, NgClass],
+})
+export class ItTimelineItemComponent extends ItAbstractComponent {
+  /** Timeline element title */
+  @Input({ required: true }) title: string;
+  /** Timeline element text */
+  @Input({ required: true }) text: string;
+  /** Timeline element signature */
+  @Input() signature: string;
+  /** Timeline element reference date */
+  @Input() eventDate?: Date;
+  /** Timeline element reference date format
+   * @default dd/MM/yyyy
+   */
+  @Input() dateFormat: string = 'dd/MM/yyyy';
+
+  /** Timeline element PIN text */
+  @Input({ required: true }) pinText: string;
+  /** Timeline element PIN type
+   * @default none
+   */
+  @Input() pinType: TimelinePINType = 'default';
+  /** Timeline element PIN icon
+   * @default code-circle
+   */
+  @Input() pinIcon: IconName = 'code-circle';
+
+  /** Timeline element category title */
+  @Input() categoryTitle: string;
+  /** Timeline element category link */
+  @Input() categoryLink: string;
+
+  /** Timeline element show detail link
+   * @default false
+   */
+  @Input({ transform: booleanAttribute })
+  showReadMore: boolean = false;
+  /** Timeline element detail link
+   * @default #
+   */
+  @Input() readMoreLink: string = '#';
+}
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts
new file mode 100644
index 00000000..3aa28c35
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItTimelineContainerComponent } from './timeline-container/timeline-container.component';
+import { ItTimelineItemComponent } from './timeline-item/timeline-item.component';
+
+const timelineComponents = [ItTimelineContainerComponent, ItTimelineItemComponent];
+
+@NgModule({
+  imports: timelineComponents,
+  exports: timelineComponents,
+})
+export class ItTimelineModule {}
diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
index c605a71b..0b4a697f 100644
--- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
+++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
@@ -41,6 +41,7 @@ import { ItLanguageSwitcherComponent } from './components/utils/language-switche
 import { ItDateAgoPipe } from './pipes/date-ago.pipe';
 import { ItDurationPipe } from './pipes/duration.pipe';
 import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
+import { ItTimelineModule } from './components/core/timeline/timeline.module';
 
 /**
  * Core components
@@ -72,6 +73,7 @@ const core = [
   ItTabModule,
   ItTableModule,
   ItTooltipDirective,
+  ItTimelineModule,
 ];
 
 /**
diff --git a/projects/design-angular-kit/src/lib/interfaces/core.ts b/projects/design-angular-kit/src/lib/interfaces/core.ts
index 870266f1..dbd7640f 100644
--- a/projects/design-angular-kit/src/lib/interfaces/core.ts
+++ b/projects/design-angular-kit/src/lib/interfaces/core.ts
@@ -47,6 +47,25 @@ export type DropdownDirection = 'dropup' | 'dropend' | 'dropstart';
 
 export type CarouselType = 'default' | 'three-cols' | 'three-cols-arrow-visible';
 
+export type TimelinePINType = 'default' | 'evidence' | 'now';
+
+export interface TimelineElement {
+  pin: {
+    type?: TimelinePINType;
+    icon?: IconName;
+    text: string;
+  };
+  category?: {
+    title: string;
+    link: string;
+  };
+  title: string;
+  text: string;
+  signature?: string;
+  eventDate?: Date;
+  link?: string;
+}
+
 export interface Notification {
   /**
    * Notification type
diff --git a/projects/design-angular-kit/src/lib/interfaces/icon.ts b/projects/design-angular-kit/src/lib/interfaces/icon.ts
index 17ce588b..99fb20cb 100644
--- a/projects/design-angular-kit/src/lib/interfaces/icon.ts
+++ b/projects/design-angular-kit/src/lib/interfaces/icon.ts
@@ -34,6 +34,7 @@ export const IconNameArray = [
   'close',
   'close-big',
   'close-circle',
+  'code-circle',
   'comment',
   'copy',
   'delete',
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index ac4d0447..c6ee44db 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -67,6 +67,7 @@ const routes: Routes = [
       { path: 'range', loadChildren: () => import('src/app/range/range.module').then(m => m.RangeModule) },
       { path: 'autocomplete', loadChildren: () => import('src/app/autocomplete/autocomplete.module').then(m => m.AutocompleteModule) },
       { path: 'sidebar', loadChildren: () => import('src/app/sidebar/sidebar.module').then(m => m.SidebarModule) },
+      { path: 'timeline', loadChildren: () => import('src/app/timeline/timeline.module').then(m => m.TimelineModule) },
     ],
   },
   { path: 'error/not-found', component: ItErrorPageComponent, data: { errorCode: 404 } },
diff --git a/src/app/timeline/timeline-default-example/timeline-default-example.component.html b/src/app/timeline/timeline-default-example/timeline-default-example.component.html
new file mode 100644
index 00000000..fbbd1b7e
--- /dev/null
+++ b/src/app/timeline/timeline-default-example/timeline-default-example.component.html
@@ -0,0 +1,7 @@
+<h3>Esempi</h3>
+
+<div class="bd-example">
+  <div class="example-section">
+    <it-timeline-container [timelineElements]="timelineElements" [dateFormat]="defaultDateFormat"></it-timeline-container>
+  </div>
+</div>
diff --git a/src/app/timeline/timeline-default-example/timeline-default-example.component.spec.ts b/src/app/timeline/timeline-default-example/timeline-default-example.component.spec.ts
new file mode 100644
index 00000000..5afe8463
--- /dev/null
+++ b/src/app/timeline/timeline-default-example/timeline-default-example.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimelineDefaultExampleComponent } from './timeline-default-example.component';
+
+describe('TimelineDefaultExampleComponent', () => {
+  let component: TimelineDefaultExampleComponent;
+  let fixture: ComponentFixture<TimelineDefaultExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TimelineDefaultExampleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TimelineDefaultExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/timeline/timeline-default-example/timeline-default-example.component.ts b/src/app/timeline/timeline-default-example/timeline-default-example.component.ts
new file mode 100644
index 00000000..b20099d3
--- /dev/null
+++ b/src/app/timeline/timeline-default-example/timeline-default-example.component.ts
@@ -0,0 +1,96 @@
+import { Component } from '@angular/core';
+import { TimelineElement } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-timeline-default-example',
+  templateUrl: './timeline-default-example.component.html',
+})
+export class TimelineDefaultExampleComponent {
+  timelineElements: TimelineElement[] = [
+    {
+      title: 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT...',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      signature: 'di Federico De Paolis',
+      pin: {
+        text: 'MAGGIO 2024',
+        type: 'evidence',
+      },
+      category: {
+        title: 'Categoria',
+        link: '#',
+      },
+      eventDate: new Date(2024, 4, 10),
+    },
+    {
+      title: 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR...',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      pin: {
+        text: 'GIUGNO 2024',
+        type: 'evidence',
+      },
+    },
+    {
+      title: 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT...',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      signature: 'di Federico De Paolis',
+      pin: {
+        text: 'LUGLIO 2024',
+        type: 'evidence',
+      },
+      category: {
+        title: 'Categoria',
+        link: '#',
+      },
+      eventDate: new Date(2024, 6, 10),
+    },
+    {
+      title: 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR...',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      pin: {
+        text: 'AGOSTO 2024',
+        type: 'now',
+      },
+    },
+    {
+      title: 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT...',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      signature: 'di Federico De Paolis',
+      pin: {
+        text: 'SETTEMBRE 2024',
+      },
+      category: {
+        title: 'Categoria',
+        link: '#',
+      },
+      eventDate: new Date(2024, 8, 10),
+    },
+    {
+      title: 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR...',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      pin: {
+        text: 'OTTOBRE 2024',
+      },
+    },
+    {
+      title: 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT...',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      signature: 'di Federico De Paolis',
+      pin: {
+        text: 'NOVEMBRE 2024',
+      },
+      category: {
+        title: 'Categoria',
+        link: '#',
+      },
+      eventDate: new Date(2024, 10, 10),
+    },
+    {
+      title: 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR...',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+      pin: {
+        text: 'DICEMBRE 2024',
+      },
+    },
+  ];
+  defaultDateFormat: string = 'dd/MM/yyyy';
+}
diff --git a/src/app/timeline/timeline-examples/timeline-examples.component.spec.ts b/src/app/timeline/timeline-examples/timeline-examples.component.spec.ts
new file mode 100644
index 00000000..a297dd28
--- /dev/null
+++ b/src/app/timeline/timeline-examples/timeline-examples.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimelineExamplesComponent } from './timeline-examples.component';
+
+describe('AlertExamplesComponent', () => {
+  let component: TimelineExamplesComponent;
+  let fixture: ComponentFixture<TimelineExamplesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TimelineExamplesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TimelineExamplesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/timeline/timeline-examples/timeline-examples.component.tpl b/src/app/timeline/timeline-examples/timeline-examples.component.tpl
new file mode 100644
index 00000000..0baa1f02
--- /dev/null
+++ b/src/app/timeline/timeline-examples/timeline-examples.component.tpl
@@ -0,0 +1,14 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set htmlColor %}
+  {% include "../timeline-default-example/timeline-default-example.component.html" %}
+{% endset %}
+
+{% set typescriptColor %}
+  {% include "../timeline-default-example/timeline-default-example.component.ts" %}
+{% endset %}
+
+<it-timeline-default-example></it-timeline-default-example>
+
+<it-source-display html="{$ sanitize(htmlColor) $}" typescript="{$ sanitize(typescriptColor) $}" >
+</it-source-display>
diff --git a/src/app/timeline/timeline-examples/timeline-examples.component.ts b/src/app/timeline/timeline-examples/timeline-examples.component.ts
new file mode 100644
index 00000000..2ad20049
--- /dev/null
+++ b/src/app/timeline/timeline-examples/timeline-examples.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-timeline-examples',
+  templateUrl: './timeline-examples.component.html',
+})
+export class TimelineExamplesComponent {}
diff --git a/src/app/timeline/timeline-index/timeline-index.component.html b/src/app/timeline/timeline-index/timeline-index.component.html
new file mode 100644
index 00000000..e15201af
--- /dev/null
+++ b/src/app/timeline/timeline-index/timeline-index.component.html
@@ -0,0 +1,11 @@
+<h1 class="bd-title">Timeline</h1>
+<p class="bd-lead">Componente per la visualizzazione cronologica di eventi.</p>
+<!-- <div [innerHTML]="component.description"></div> -->
+<it-tab-container>
+  <it-tab-item label="Esempi" active="true" class="pt-3">
+    <it-timeline-examples></it-timeline-examples>
+  </it-tab-item>
+  <it-tab-item label="API" class="pt-3">
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>
diff --git a/src/app/timeline/timeline-index/timeline-index.component.spec.ts b/src/app/timeline/timeline-index/timeline-index.component.spec.ts
new file mode 100644
index 00000000..976261c3
--- /dev/null
+++ b/src/app/timeline/timeline-index/timeline-index.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimelineIndexComponent } from './timeline-index.component';
+
+describe('TimelineIndexComponent', () => {
+  let component: TimelineIndexComponent;
+  let fixture: ComponentFixture<TimelineIndexComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TimelineIndexComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TimelineIndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/timeline/timeline-index/timeline-index.component.ts b/src/app/timeline/timeline-index/timeline-index.component.ts
new file mode 100644
index 00000000..259ce3a1
--- /dev/null
+++ b/src/app/timeline/timeline-index/timeline-index.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-timeline-index',
+  templateUrl: './timeline-index.component.html',
+})
+export class TimelineIndexComponent {
+  component: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'ItTimelineComponent');
+  }
+}
diff --git a/src/app/timeline/timeline-routing.module.ts b/src/app/timeline/timeline-routing.module.ts
new file mode 100644
index 00000000..7ca78ded
--- /dev/null
+++ b/src/app/timeline/timeline-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TimelineIndexComponent } from './timeline-index/timeline-index.component';
+
+const routes: Routes = [{ path: '', component: TimelineIndexComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TimelineRoutingModule {}
diff --git a/src/app/timeline/timeline.module.ts b/src/app/timeline/timeline.module.ts
new file mode 100644
index 00000000..fca55da0
--- /dev/null
+++ b/src/app/timeline/timeline.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { TimelineIndexComponent } from './timeline-index/timeline-index.component';
+import { TimelineRoutingModule } from './timeline-routing.module';
+import { TimelineExamplesComponent } from './timeline-examples/timeline-examples.component';
+import { TimelineDefaultExampleComponent } from './timeline-default-example/timeline-default-example.component';
+
+@NgModule({
+  declarations: [TimelineIndexComponent, TimelineIndexComponent, TimelineExamplesComponent, TimelineDefaultExampleComponent],
+  imports: [CommonModule, SharedModule, TimelineRoutingModule],
+})
+export class TimelineModule {}
diff --git a/src/assets/table-of-content.json b/src/assets/table-of-content.json
index 3e0bbe0c..172e5c26 100644
--- a/src/assets/table-of-content.json
+++ b/src/assets/table-of-content.json
@@ -182,6 +182,10 @@
         {
           "label": "Sidebar",
           "link": "/componenti/sidebar"
+        },
+        {
+          "label": "Timeline",
+          "link": "/componenti/timeline"
         }
       ]
     }
diff --git a/src/styles.scss b/src/styles.scss
index 7582b240..77aaea28 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -14,7 +14,7 @@
 
 .bd-navbar {
   min-height: 5rem;
-  z-index: 1;
+  z-index: 5;
 }
 
 .bd-logo-title {

From 6cab646da04f1cee6ae1fe45264b776489a11c7f Mon Sep 17 00:00:00 2001
From: Stefano Zanelli <stefano.zanelli@unitn.it>
Date: Mon, 8 Apr 2024 16:58:28 +0200
Subject: [PATCH 3/7] fix: timeline item undefined property
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix proprietà che possono risultare undefined e vincolato quelle obbligatorie
---
 .../timeline-item/timeline-item.component.ts  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
index 5921e44d..a756e317 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
@@ -15,33 +15,33 @@ import { IconName } from 'projects/design-angular-kit/src/lib/interfaces/icon';
 })
 export class ItTimelineItemComponent extends ItAbstractComponent {
   /** Timeline element title */
-  @Input({ required: true }) title: string;
+  @Input({ required: true }) title!: string;
   /** Timeline element text */
-  @Input({ required: true }) text: string;
+  @Input({ required: true }) text!: string;
   /** Timeline element signature */
-  @Input() signature: string;
+  @Input() signature?: string | undefined;
   /** Timeline element reference date */
-  @Input() eventDate?: Date;
+  @Input() eventDate?: Date | undefined;
   /** Timeline element reference date format
    * @default dd/MM/yyyy
    */
-  @Input() dateFormat: string = 'dd/MM/yyyy';
+  @Input() dateFormat?: string | undefined = 'dd/MM/yyyy';
 
   /** Timeline element PIN text */
-  @Input({ required: true }) pinText: string;
+  @Input({ required: true }) pinText!: string;
   /** Timeline element PIN type
    * @default none
    */
-  @Input() pinType: TimelinePINType = 'default';
+  @Input() pinType?: TimelinePINType | undefined = 'default';
   /** Timeline element PIN icon
    * @default code-circle
    */
-  @Input() pinIcon: IconName = 'code-circle';
+  @Input() pinIcon?: IconName | undefined = 'code-circle';
 
   /** Timeline element category title */
-  @Input() categoryTitle: string;
+  @Input() categoryTitle?: string | undefined;
   /** Timeline element category link */
-  @Input() categoryLink: string;
+  @Input() categoryLink?: string | undefined;
 
   /** Timeline element show detail link
    * @default false
@@ -51,5 +51,5 @@ export class ItTimelineItemComponent extends ItAbstractComponent {
   /** Timeline element detail link
    * @default #
    */
-  @Input() readMoreLink: string = '#';
+  @Input() readMoreLink: string | undefined = '#';
 }

From 86ec8e101e209e7e92319d8aa2c3e248322428e2 Mon Sep 17 00:00:00 2001
From: Stefano Zanelli <stefano.zanelli@unitn.it>
Date: Tue, 9 Apr 2024 07:32:32 +0200
Subject: [PATCH 4/7] fix: timeline component

Fix unit test e riferimenti a documentazione autogenerata; spostata etichetta in scope timeline
---
 projects/design-angular-kit/assets/i18n/en.json        |  6 +++---
 projects/design-angular-kit/assets/i18n/it.json        |  6 +++---
 .../timeline-container/timeline-container.component.ts |  4 ++++
 .../timeline-item/timeline-item.component.html         |  2 +-
 .../timeline-item/timeline-item.component.spec.ts      | 10 ++++++----
 .../timeline/timeline-item/timeline-item.component.ts  |  4 ++++
 .../timeline-examples.component.spec.ts                |  2 +-
 .../timeline-index/timeline-index.component.html       |  2 +-
 .../timeline-index/timeline-index.component.ts         |  2 +-
 9 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/projects/design-angular-kit/assets/i18n/en.json b/projects/design-angular-kit/assets/i18n/en.json
index 080a4001..9e8e8aa7 100644
--- a/projects/design-angular-kit/assets/i18n/en.json
+++ b/projects/design-angular-kit/assets/i18n/en.json
@@ -60,8 +60,7 @@
       "back": "Back",
       "forward": "Forward",
       "rate-star": "Rate {{current}} out of {{total}} stars",
-      "rating-star": "Rating {{current}} out of {{total}} stars",
-      "today": "Today"
+      "rating-star": "Rating {{current}} out of {{total}} stars"
     },
     "form": {
       "caps-inserted": "CAPS LOCK entered",
@@ -106,7 +105,8 @@
     },
     "timeline": {
       "read-more": "Read more",
-      "read-more-on": "on {{title}}"
+      "read-more-on": "on {{title}}",
+      "today": "Today"
     },
     "utils": {
       "selected": "Selected",
diff --git a/projects/design-angular-kit/assets/i18n/it.json b/projects/design-angular-kit/assets/i18n/it.json
index 561dc457..8e56826e 100644
--- a/projects/design-angular-kit/assets/i18n/it.json
+++ b/projects/design-angular-kit/assets/i18n/it.json
@@ -60,8 +60,7 @@
       "back": "Indietro",
       "forward": "Avanti",
       "rate-star": "Valuta {{current}} stelle su {{total}}",
-      "rating-star": "Valutazione {{current}} stelle su {{total}}",
-      "today": "Oggi"
+      "rating-star": "Valutazione {{current}} stelle su {{total}}"
     },
     "form": {
       "caps-inserted": "CAPS LOCK inserito",
@@ -106,7 +105,8 @@
     },
     "timeline": {
       "read-more": "Leggi di più",
-      "read-more-on": "su {{title}}"
+      "read-more-on": "su {{title}}",
+      "today": "Oggi"
     },
     "utils": {
       "selected": "Selezionata",
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
index 74fd536d..6b1abbb1 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
@@ -5,6 +5,10 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ItAbstractComponent } from 'projects/design-angular-kit/src/lib/abstracts/abstract.component';
 import { TimelineElement } from 'projects/design-angular-kit/src/lib/interfaces/core';
 
+/**
+ * Timeline
+ * @description Build timeline for chronological representation of events.
+ */
 @Component({
   standalone: true,
   selector: 'it-timeline-container',
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
index e20183db..cb8c6f8e 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
@@ -1,6 +1,6 @@
 <div class="timeline-element">
   @if (pinType === 'now') {
-    <span class="it-now-label d-none d-lg-flex">{{ 'it.core.today' | translate }}</span>
+    <span class="it-now-label d-none d-lg-flex">{{ 'it.timeline.today' | translate }}</span>
   }
   <div class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
     <div class="pin-icon">
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts
index 22196d5b..4c086ce2 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts
@@ -1,15 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ItTimelineItemComponent } from './timeline-item.component';
+import { tb_base } from '../../../../../test';
 
 describe('ItTimelineItemComponent', () => {
   let component: ItTimelineItemComponent;
   let fixture: ComponentFixture<ItTimelineItemComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ItTimelineItemComponent],
-    }).compileComponents();
+    await TestBed.configureTestingModule(tb_base).compileComponents();
+
+    // await TestBed.configureTestingModule({
+    //   imports: [ItTimelineItemComponent],
+    // }).compileComponents();
 
     fixture = TestBed.createComponent(ItTimelineItemComponent);
     component = fixture.componentInstance;
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
index a756e317..4c3d7cfa 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
@@ -6,6 +6,10 @@ import { TranslateModule } from '@ngx-translate/core';
 import { TimelinePINType } from 'projects/design-angular-kit/src/lib/interfaces/core';
 import { IconName } from 'projects/design-angular-kit/src/lib/interfaces/icon';
 
+/**
+ * Timeline Item
+ * @description Represents a single event for Timeline component.
+ */
 @Component({
   standalone: true,
   selector: 'it-timeline-item',
diff --git a/src/app/timeline/timeline-examples/timeline-examples.component.spec.ts b/src/app/timeline/timeline-examples/timeline-examples.component.spec.ts
index a297dd28..ff53da87 100644
--- a/src/app/timeline/timeline-examples/timeline-examples.component.spec.ts
+++ b/src/app/timeline/timeline-examples/timeline-examples.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TimelineExamplesComponent } from './timeline-examples.component';
 
-describe('AlertExamplesComponent', () => {
+describe('TimelineExamplesComponent', () => {
   let component: TimelineExamplesComponent;
   let fixture: ComponentFixture<TimelineExamplesComponent>;
 
diff --git a/src/app/timeline/timeline-index/timeline-index.component.html b/src/app/timeline/timeline-index/timeline-index.component.html
index e15201af..e551eeca 100644
--- a/src/app/timeline/timeline-index/timeline-index.component.html
+++ b/src/app/timeline/timeline-index/timeline-index.component.html
@@ -1,6 +1,6 @@
 <h1 class="bd-title">Timeline</h1>
 <p class="bd-lead">Componente per la visualizzazione cronologica di eventi.</p>
-<!-- <div [innerHTML]="component.description"></div> -->
+<div [innerHTML]="component.description"></div>
 <it-tab-container>
   <it-tab-item label="Esempi" active="true" class="pt-3">
     <it-timeline-examples></it-timeline-examples>
diff --git a/src/app/timeline/timeline-index/timeline-index.component.ts b/src/app/timeline/timeline-index/timeline-index.component.ts
index 259ce3a1..1a0384a2 100644
--- a/src/app/timeline/timeline-index/timeline-index.component.ts
+++ b/src/app/timeline/timeline-index/timeline-index.component.ts
@@ -9,6 +9,6 @@ export class TimelineIndexComponent {
   component: any;
 
   constructor() {
-    this.component = (<any>Documentation).components.find(component => component.name === 'ItTimelineComponent');
+    this.component = (<any>Documentation).components.find(component => component.name === 'ItTimelineContainerComponent');
   }
 }

From 479fc3dbf8fa9a392d6eb29988ec073829c18cda Mon Sep 17 00:00:00 2001
From: Stefano Zanelli <stefano.zanelli@unitn.it>
Date: Tue, 9 Apr 2024 07:38:49 +0200
Subject: [PATCH 5/7] fix: timeline missing declaration

Corretto mancato riferimento a componenti standalone
---
 .../design-angular-kit/src/lib/design-angular-kit.module.ts   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
index 0b4a697f..18cda673 100644
--- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
+++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
@@ -42,6 +42,8 @@ import { ItDateAgoPipe } from './pipes/date-ago.pipe';
 import { ItDurationPipe } from './pipes/duration.pipe';
 import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
 import { ItTimelineModule } from './components/core/timeline/timeline.module';
+import { ItTimelineContainerComponent } from './components/core/timeline/timeline-container/timeline-container.component';
+import { ItTimelineItemComponent } from './components/core/timeline/timeline-item/timeline-item.component';
 
 /**
  * Core components
@@ -73,6 +75,8 @@ const core = [
   ItTabModule,
   ItTableModule,
   ItTooltipDirective,
+  ItTimelineContainerComponent,
+  ItTimelineItemComponent,
   ItTimelineModule,
 ];
 

From 1c9635853b4733c5d9cf5fda0d0a0db76abcd2a1 Mon Sep 17 00:00:00 2001
From: Antonino Bonanno <nino.bonanno96@gmail.com>
Date: Sun, 7 Jul 2024 15:50:58 +0200
Subject: [PATCH 6/7] refactor(timeline): refactoring timeline components

Closes: #345
---
 .../timeline-container.component.spec.ts      | 21 ------
 .../timeline-container.component.ts           | 28 --------
 .../timeline-item/timeline-item.component.ts  | 70 +++++++++++++------
 ...component.html => timeline.component.html} |  2 +-
 .../core/timeline/timeline.component.spec.ts  | 21 ++++++
 .../core/timeline/timeline.component.ts       | 31 ++++++++
 .../core/timeline/timeline.module.ts          |  4 +-
 .../src/lib/design-angular-kit.module.ts      |  4 +-
 .../timeline-default-example.component.html   |  2 +-
 .../timeline-index.component.ts               |  2 +-
 10 files changed, 107 insertions(+), 78 deletions(-)
 delete mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts
 delete mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
 rename projects/design-angular-kit/src/lib/components/core/timeline/{timeline-container/timeline-container.component.html => timeline.component.html} (91%)
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.spec.ts
 create mode 100644 projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts

diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts
deleted file mode 100644
index 24537b7e..00000000
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ItTimelineContainerComponent } from './timeline-container.component';
-import { tb_base } from '../../../../../test';
-
-describe('ItTimelineContainerComponent', () => {
-  let component: ItTimelineContainerComponent;
-  let fixture: ComponentFixture<ItTimelineContainerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule(tb_base).compileComponents();
-
-    fixture = TestBed.createComponent(ItTimelineContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
deleted file mode 100644
index 6b1abbb1..00000000
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ItTimelineItemComponent } from '../timeline-item/timeline-item.component';
-import { ItIconComponent } from '../../../utils/icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { ItAbstractComponent } from 'projects/design-angular-kit/src/lib/abstracts/abstract.component';
-import { TimelineElement } from 'projects/design-angular-kit/src/lib/interfaces/core';
-
-/**
- * Timeline
- * @description Build timeline for chronological representation of events.
- */
-@Component({
-  standalone: true,
-  selector: 'it-timeline-container',
-  templateUrl: './timeline-container.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent],
-})
-export class ItTimelineContainerComponent extends ItAbstractComponent {
-  /** Timeline elements array
-   * @default []
-   */
-  @Input() timelineElements: TimelineElement[] = [];
-  /** Default date format for timeline element reference date
-   * @default dd/MM/yyyy
-   */
-  @Input() dateFormat: string = 'dd/MM/yyyy';
-}
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
index 4c3d7cfa..22bceb02 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
@@ -1,10 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input, booleanAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
 import { ItIconComponent } from '../../../utils/icon/icon.component';
 import { DatePipe, NgClass } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { TimelinePINType } from 'projects/design-angular-kit/src/lib/interfaces/core';
-import { IconName } from 'projects/design-angular-kit/src/lib/interfaces/icon';
+import { TimelinePINType } from '../../../../interfaces/core';
+import { IconName } from '../../../../interfaces/icon';
+import { inputToBoolean } from '../../../../utils/coercion';
 
 /**
  * Timeline Item
@@ -18,40 +19,65 @@ import { IconName } from 'projects/design-angular-kit/src/lib/interfaces/icon';
   imports: [ItIconComponent, DatePipe, TranslateModule, NgClass],
 })
 export class ItTimelineItemComponent extends ItAbstractComponent {
-  /** Timeline element title */
+  /**
+   * Timeline element title
+   */
   @Input({ required: true }) title!: string;
-  /** Timeline element text */
+
+  /**
+   * Timeline element text
+   */
   @Input({ required: true }) text!: string;
-  /** Timeline element signature */
-  @Input() signature?: string | undefined;
-  /** Timeline element reference date */
-  @Input() eventDate?: Date | undefined;
-  /** Timeline element reference date format
+
+  /**
+   * Timeline element signature
+   */
+  @Input() signature: string | undefined;
+
+  /**
+   * Timeline element reference date
+   */
+  @Input() eventDate: Date | undefined;
+
+  /**
+   * Timeline element reference date format
    * @default dd/MM/yyyy
    */
-  @Input() dateFormat?: string | undefined = 'dd/MM/yyyy';
+  @Input() dateFormat: string = 'dd/MM/yyyy';
 
-  /** Timeline element PIN text */
-  @Input({ required: true }) pinText!: string;
-  /** Timeline element PIN type
+  /**
+   * Timeline element PIN text
+   */
+  @Input({ required: true }) pinText: string | undefined;
+
+  /**
+   * Timeline element PIN type
    * @default none
    */
-  @Input() pinType?: TimelinePINType | undefined = 'default';
-  /** Timeline element PIN icon
+  @Input() pinType: TimelinePINType | undefined = 'default';
+
+  /**
+   * Timeline element PIN icon
    * @default code-circle
    */
-  @Input() pinIcon?: IconName | undefined = 'code-circle';
+  @Input() pinIcon: IconName | undefined = 'code-circle';
 
-  /** Timeline element category title */
-  @Input() categoryTitle?: string | undefined;
-  /** Timeline element category link */
-  @Input() categoryLink?: string | undefined;
+  /**
+   * Timeline element category title
+   */
+  @Input() categoryTitle: string | undefined;
+
+  /**
+   * Timeline element category link
+   */
+  @Input() categoryLink: string | undefined;
 
   /** Timeline element show detail link
    * @default false
    */
-  @Input({ transform: booleanAttribute })
+  @Input({ transform: inputToBoolean })
   showReadMore: boolean = false;
+
   /** Timeline element detail link
    * @default #
    */
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html
similarity index 91%
rename from projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html
rename to projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html
index 6e590229..81742ea2 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html
@@ -14,7 +14,7 @@
           [categoryTitle]="element.category?.title"
           [categoryLink]="element.category?.link"
           [showReadMore]="element.link?.length"
-          [readMoreLink]="element.link"></it-timeline-item>
+          [readMoreLink]="element.link" />
       </div>
     }
   </div>
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.spec.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.spec.ts
new file mode 100644
index 00000000..61496625
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItTimelineComponent } from './timeline.component';
+import { tb_base } from '../../../../test';
+
+describe('ItTimelineComponent', () => {
+  let component: ItTimelineComponent;
+  let fixture: ComponentFixture<ItTimelineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base).compileComponents();
+
+    fixture = TestBed.createComponent(ItTimelineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts
new file mode 100644
index 00000000..571ac1ae
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ItTimelineItemComponent } from './timeline-item/timeline-item.component';
+import { ItIconComponent } from '../../utils/icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItAbstractComponent } from '../../../abstracts/abstract.component';
+import { TimelineElement } from '../../../interfaces/core';
+
+/**
+ * Timeline
+ * @description Build timeline for chronological representation of events.
+ */
+@Component({
+  standalone: true,
+  selector: 'it-timeline',
+  templateUrl: './timeline.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent],
+})
+export class ItTimelineComponent extends ItAbstractComponent {
+  /**
+   * Timeline elements array
+   * @default []
+   */
+  @Input() timelineElements: TimelineElement[] = [];
+
+  /**
+   * Default date format for timeline element reference date
+   * @default dd/MM/yyyy
+   */
+  @Input() dateFormat: string = 'dd/MM/yyyy';
+}
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts
index 3aa28c35..629a2055 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts
@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
-import { ItTimelineContainerComponent } from './timeline-container/timeline-container.component';
+import { ItTimelineComponent } from './timeline.component';
 import { ItTimelineItemComponent } from './timeline-item/timeline-item.component';
 
-const timelineComponents = [ItTimelineContainerComponent, ItTimelineItemComponent];
+const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent];
 
 @NgModule({
   imports: timelineComponents,
diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
index 18cda673..1952204d 100644
--- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
+++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
@@ -42,7 +42,7 @@ import { ItDateAgoPipe } from './pipes/date-ago.pipe';
 import { ItDurationPipe } from './pipes/duration.pipe';
 import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
 import { ItTimelineModule } from './components/core/timeline/timeline.module';
-import { ItTimelineContainerComponent } from './components/core/timeline/timeline-container/timeline-container.component';
+import { ItTimelineComponent } from './components/core/timeline/timeline.component';
 import { ItTimelineItemComponent } from './components/core/timeline/timeline-item/timeline-item.component';
 
 /**
@@ -75,7 +75,7 @@ const core = [
   ItTabModule,
   ItTableModule,
   ItTooltipDirective,
-  ItTimelineContainerComponent,
+  ItTimelineComponent,
   ItTimelineItemComponent,
   ItTimelineModule,
 ];
diff --git a/src/app/timeline/timeline-default-example/timeline-default-example.component.html b/src/app/timeline/timeline-default-example/timeline-default-example.component.html
index fbbd1b7e..d66b5716 100644
--- a/src/app/timeline/timeline-default-example/timeline-default-example.component.html
+++ b/src/app/timeline/timeline-default-example/timeline-default-example.component.html
@@ -2,6 +2,6 @@ <h3>Esempi</h3>
 
 <div class="bd-example">
   <div class="example-section">
-    <it-timeline-container [timelineElements]="timelineElements" [dateFormat]="defaultDateFormat"></it-timeline-container>
+    <it-timeline [timelineElements]="timelineElements" [dateFormat]="defaultDateFormat" />
   </div>
 </div>
diff --git a/src/app/timeline/timeline-index/timeline-index.component.ts b/src/app/timeline/timeline-index/timeline-index.component.ts
index 1a0384a2..259ce3a1 100644
--- a/src/app/timeline/timeline-index/timeline-index.component.ts
+++ b/src/app/timeline/timeline-index/timeline-index.component.ts
@@ -9,6 +9,6 @@ export class TimelineIndexComponent {
   component: any;
 
   constructor() {
-    this.component = (<any>Documentation).components.find(component => component.name === 'ItTimelineContainerComponent');
+    this.component = (<any>Documentation).components.find(component => component.name === 'ItTimelineComponent');
   }
 }

From 279112436f734eac60afe25078c256ed6a330468 Mon Sep 17 00:00:00 2001
From: Antonino Bonanno <nino.bonanno96@gmail.com>
Date: Sun, 7 Jul 2024 16:17:46 +0200
Subject: [PATCH 7/7] build(timeline): fixed timeline build on library

Closes: #345
---
 .../core/timeline/timeline-item/timeline-item.component.ts    | 3 ++-
 .../src/lib/components/core/timeline/timeline.component.html  | 2 +-
 .../design-angular-kit/src/lib/design-angular-kit.module.ts   | 4 ----
 projects/design-angular-kit/src/public_api.ts                 | 4 ++++
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
index 22bceb02..54fae9a2 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
@@ -72,7 +72,8 @@ export class ItTimelineItemComponent extends ItAbstractComponent {
    */
   @Input() categoryLink: string | undefined;
 
-  /** Timeline element show detail link
+  /**
+   * Timeline element show detail link
    * @default false
    */
   @Input({ transform: inputToBoolean })
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html
index 81742ea2..2e251a87 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline.component.html
@@ -13,7 +13,7 @@
           [dateFormat]="dateFormat"
           [categoryTitle]="element.category?.title"
           [categoryLink]="element.category?.link"
-          [showReadMore]="element.link?.length"
+          [showReadMore]="!!element.link?.length"
           [readMoreLink]="element.link" />
       </div>
     }
diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
index 1952204d..0b4a697f 100644
--- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
+++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
@@ -42,8 +42,6 @@ import { ItDateAgoPipe } from './pipes/date-ago.pipe';
 import { ItDurationPipe } from './pipes/duration.pipe';
 import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
 import { ItTimelineModule } from './components/core/timeline/timeline.module';
-import { ItTimelineComponent } from './components/core/timeline/timeline.component';
-import { ItTimelineItemComponent } from './components/core/timeline/timeline-item/timeline-item.component';
 
 /**
  * Core components
@@ -75,8 +73,6 @@ const core = [
   ItTabModule,
   ItTableModule,
   ItTooltipDirective,
-  ItTimelineComponent,
-  ItTimelineItemComponent,
   ItTimelineModule,
 ];
 
diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts
index d0555d41..b484a609 100644
--- a/projects/design-angular-kit/src/public_api.ts
+++ b/projects/design-angular-kit/src/public_api.ts
@@ -63,6 +63,10 @@ export * from './lib/components/core/table/table.component';
 export * from './lib/components/core/table/sort/sort.directive';
 export * from './lib/components/core/table/sort/sort-header/sort-header.component';
 
+export * from './lib/components/core/timeline/timeline.module';
+export * from './lib/components/core/timeline/timeline.component';
+export * from './lib/components/core/timeline/timeline-item/timeline-item.component';
+
 export * from './lib/components/core/tooltip/tooltip.directive';
 
 // Forms components