diff --git a/projects/design-angular-kit/assets/i18n/en.json b/projects/design-angular-kit/assets/i18n/en.json index 850f7461..9e8e8aa7 100644 --- a/projects/design-angular-kit/assets/i18n/en.json +++ b/projects/design-angular-kit/assets/i18n/en.json @@ -103,6 +103,11 @@ "aria-label-toggle": "Show/Hide navigation", "hide": "Hide navigation" }, + "timeline": { + "read-more": "Read more", + "read-more-on": "on {{title}}", + "today": "Today" + }, "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..8e56826e 100644 --- a/projects/design-angular-kit/assets/i18n/it.json +++ b/projects/design-angular-kit/assets/i18n/it.json @@ -103,6 +103,11 @@ "aria-label-toggle": "Mostra/Nascondi la navigazione", "hide": "Nascondi la navigazione" }, + "timeline": { + "read-more": "Leggi di più", + "read-more-on": "su {{title}}", + "today": "Oggi" + }, "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 @@ +
+
+ @for (element of timelineElements; track $index) { +
+ +
+ } +
+
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; + + 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..6b1abbb1 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts @@ -0,0 +1,28 @@ +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.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html new file mode 100644 index 00000000..cb8c6f8e --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html @@ -0,0 +1,45 @@ +
+ @if (pinType === 'now') { + {{ 'it.timeline.today' | translate }} + } +
+
+ @if (pinIcon) { + + } @else { + + } +
+
+ {{ pinText }} +
+
+
+
+
+ @if ((categoryTitle && categoryLink) || eventDate) { +
+ @if (categoryTitle) { + {{ categoryTitle }} + } + @if (eventDate) { + {{ eventDate | date: dateFormat }} + } +
+ } +
{{ title }}
+

{{ text }}

+ @if (signature) { + {{ signature }} + } + @if (showReadMore) { + + {{ 'it.timeline.read-more' | translate }} + + + + } +
+
+
+
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..4c086ce2 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts @@ -0,0 +1,24 @@ +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; + + beforeEach(async () => { + await TestBed.configureTestingModule(tb_base).compileComponents(); + + // 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..4c3d7cfa --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts @@ -0,0 +1,59 @@ +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'; + +/** + * Timeline Item + * @description Represents a single event for Timeline component. + */ +@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 | 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'; + + /** Timeline element PIN text */ + @Input({ required: true }) pinText!: string; + /** Timeline element PIN type + * @default none + */ + @Input() pinType?: TimelinePINType | undefined = 'default'; + /** Timeline element PIN icon + * @default 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 show detail link + * @default false + */ + @Input({ transform: booleanAttribute }) + showReadMore: boolean = false; + /** Timeline element detail link + * @default # + */ + @Input() readMoreLink: string | undefined = '#'; +} 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/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 @@
- {{ slimTitle }} + + {{ slimTitle }} +