refactor(timeline): refactoring timeline components

Closes: #345

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 #
    */

projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html → 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>

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();
+  });
+});

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';
+}

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,

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,
 ];

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>

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');
   }
 }