design-angular-kit 1.2.0 → 1.2.1

package/src/lib/components/core/table/sort/sort.directive.ts

@@ -0,0 +1,142 @@
+import {
+  Directive,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Optional,
+  Output,
+  booleanAttribute,
+  HostBinding,
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import {
+  IT_SORT_DEFAULT_OPTIONS,
+  ItSortable,
+  ItSortDefaultOptions,
+  ItSortEvent,
+  SortDirection,
+} from '../../../../interfaces/sortable-table';
+
+@Directive({
+  standalone: true,
+  selector: '[itSort]',
+  exportAs: 'itSort',
+})
+export class ItSortDirective implements OnChanges, OnDestroy {
+  /** The id of the most recently sorted ItSortable. */
+  @Input('itSortActive') active?: string;
+
+  /**
+   * The direction to set when an MatSortable is initially sorted.
+   * May be overridden by the MatSortable's sort start.
+   */
+  @Input('itSortStart') start: SortDirection = 'asc';
+
+  /** The sort direction of the currently active ItSortable. */
+  @Input('itSortDirection')
+  get direction(): SortDirection {
+    return this._direction;
+  }
+  set direction(direction: SortDirection) {
+    this._direction = direction;
+  }
+  private _direction: SortDirection;
+
+  /**
+   * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
+   * May be overridden by the ItSortable's disable clear input.
+   */
+  @Input({ transform: booleanAttribute })
+  disableSortClear?: boolean;
+
+  /** Whether the sortable is disabled. */
+  @Input({ transform: booleanAttribute })
+  sortDisabled: boolean = false;
+
+  /** Event emitted when the user changes either the active sort or sort direction. */
+  @Output() readonly sortChange: EventEmitter<ItSortEvent> = new EventEmitter<ItSortEvent>();
+
+  @HostBinding('class')
+  public readonly sortDirectiveClass = 'it-sort';
+
+  /** Collection of all registered sortables that this directive manages. */
+  protected sortables = new Map<string, ItSortable>();
+
+  /** Used to notify any child components listening to state changes. */
+  readonly _stateChanges = new Subject<void>();
+
+  constructor(
+    @Optional()
+    @Inject(IT_SORT_DEFAULT_OPTIONS)
+    private _defaultOptions?: ItSortDefaultOptions
+  ) {}
+
+  /**
+   * Register function to be used by the contained ItSortables. Adds the ItSortable to the
+   * collection of ItSortables.
+   */
+  register(sortable: ItSortable): void {
+    this.sortables.set(sortable.id, sortable);
+  }
+
+  /**
+   * Unregister function to be used by the contained ItSortables. Removes the ItSortable from the
+   * collection of contained ItSortables.
+   */
+  deregister(sortable: ItSortable): void {
+    this.sortables.delete(sortable.id);
+  }
+
+  /** Sets the active sort id and determines the new sort direction. */
+  sort(sortable: ItSortable): void {
+    if (this.active != sortable.id) {
+      this.active = sortable.id;
+      this.direction = sortable.start ? sortable.start : this.start;
+    } else {
+      this.direction = this.getNextSortDirection(sortable);
+    }
+
+    this.sortChange.emit({ active: this.active, direction: this.direction });
+  }
+
+  /** Returns the next sort direction of the active sortable, checking for potential overrides. */
+  getNextSortDirection(sortable: ItSortable): SortDirection {
+    if (!sortable) {
+      return undefined;
+    }
+
+    // Get the sort direction cycle with the potential sortable overrides.
+    const disableClear = sortable?.disableSortClear ?? this.disableSortClear ?? !!this._defaultOptions?.disableClear;
+    const sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
+
+    // Get and return the next direction in the cycle
+    let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
+    if (nextDirectionIndex >= sortDirectionCycle.length) {
+      nextDirectionIndex = 0;
+    }
+    return sortDirectionCycle[nextDirectionIndex];
+  }
+
+  ngOnChanges() {
+    this._stateChanges.next();
+  }
+
+  ngOnDestroy() {
+    this._stateChanges.complete();
+  }
+}
+
+/** Returns the sort direction cycle to use given the provided parameters of order and clear. */
+function getSortDirectionCycle(start: SortDirection, disableClear: boolean): Array<SortDirection | undefined> {
+  const sortOrder: Array<SortDirection> = ['asc', 'desc'];
+  if (start == 'desc') {
+    sortOrder.reverse();
+  }
+  if (!disableClear) {
+    sortOrder.push(undefined);
+  }
+
+  return sortOrder;
+}

package/src/lib/components/core/table/table.component.html

@@ -0,0 +1,23 @@
+<div [class]="responsive ? 'table-' + responsive : undefined">
+  <table
+    class="table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}"
+    [class.table-striped]="striped"
+    [class.table-hover]="hover"
+    [class.table-bordered]="bordered"
+    [class.table-borderless]="borderless"
+    [class.table-sm]="compact"
+    [class.caption-top]="captionTop">
+    <caption>
+      <ng-content select="[caption]"></ng-content>
+    </caption>
+    <thead [class]="headColor ? 'table-' + headColor : undefined">
+      <ng-content select="[thead]"></ng-content>
+    </thead>
+    <tbody>
+      <ng-content select="[tbody]"></ng-content>
+    </tbody>
+    <tfoot>
+      <ng-content select="[tfoot]"></ng-content>
+    </tfoot>
+  </table>
+</div>

package/src/lib/components/core/table/table.component.scss

@@ -0,0 +1,7 @@
+caption:empty {
+  display: none;
+}
+
+caption:empty ~ thead {
+  border-top: none !important;
+}

package/src/lib/components/core/table/table.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItTableComponent } from './table.component';
+import { tb_base } from '../../../../test';
+
+describe('ItTableComponent', () => {
+  let component: ItTableComponent;
+  let fixture: ComponentFixture<ItTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base).compileComponents();
+
+    fixture = TestBed.createComponent(ItTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/core/table/table.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { TableColor, TableHeadColor, TableResponsive, VerticalAlignment } from '../../../interfaces/core';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItTableComponent {
+  /**
+   * Table color
+   */
+  @Input() color: TableColor | undefined;
+
+  /**
+   * Head table color
+   */
+  @Input() headColor: TableHeadColor | undefined;
+
+  /**
+   * Use vertical alignment classes to realign where needed.
+   */
+  @Input() alignment: VerticalAlignment | undefined;
+
+  /**
+   * Use .table-striped to add zebra stripes to each table row contained in <tbody>.
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) striped?: boolean;
+
+  /**
+   * Add .table-hover to enable hover state on table rows contained in <tbody>.
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) hover?: boolean;
+
+  /**
+   * Add .table-bordered to have borders on all sides of the table and on all cells.
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) bordered?: boolean;
+
+  /**
+   * Add the .table-borderless class for a borderless table.
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) borderless?: boolean;
+
+  /**
+   * Add .table-sm to make tables more compact by halving the cell padding.
+   * @efault false
+   */
+  @Input({ transform: inputToBoolean }) compact?: boolean;
+
+  /**
+   * To render the <caption> on top of the table
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) captionTop?: boolean;
+
+  /**
+   * Responsive tables allow you to scroll tables horizontally with ease.
+   * @default responsive
+   */
+  @Input() responsive: TableResponsive = 'responsive';
+}

package/src/lib/components/core/table/table.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { ItTableComponent } from './table.component';
+import { ItSortDirective } from './sort/sort.directive';
+import { ItSortHeaderComponent } from './sort/sort-header/sort-header.component';
+
+const tableComponents = [ItTableComponent, ItSortDirective, ItSortHeaderComponent];
+
+@NgModule({
+  imports: tableComponents,
+  exports: tableComponents,
+})
+export class ItTableModule {}

package/src/lib/components/core/timeline/timeline-item/timeline-item.component.html

@@ -0,0 +1,47 @@
+<div class="timeline-element">
+  @if (pinType === 'now') {
+    <span class="it-now-label d-none d-lg-flex">{{ 'it.timeline.today' | translate }}</span>
+  }
+  <h3 class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
+    <div class="pin-icon">
+      @if (pinIcon) {
+        <it-icon [name]="pinIcon" [title]="pinIconTitle" [attr.role]="pinIconTitle ? 'img' : null"></it-icon>
+      } @else {
+        <it-icon name="code-circle"></it-icon>
+      }
+    </div>
+    <div class="pin-text">
+      <span>{{ pinText }}</span>
+    </div>
+  </h3>
+  <div class="card-wrapper">
+    <div class="card">
+      <div class="card-body">
+        @if ((categoryTitle && categoryLink) || eventDate) {
+          <div class="category-top">
+            @if (categoryTitle) {
+              <span class="visually-hidden">{{ categoryLabel }}</span>
+              <a class="category" [href]="categoryLink">{{ categoryTitle }}</a>
+            }
+            @if (eventDate) {
+              <span class="visually-hidden">{{ dateLabel }}</span>
+              <span class="data">{{ eventDate | date: dateFormat }}</span>
+            }
+          </div>
+        }
+        <h4 class="card-title">{{ title }}</h4>
+        <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>

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

package/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts

@@ -0,0 +1,102 @@
+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 '../../../../interfaces/core';
+import { IconName } from '../../../../interfaces/icon';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+/**
+ * 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 = 'dd/MM/yyyy';
+
+  /**
+   * 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
+   * @default code-circle
+   */
+  @Input() pinIcon: IconName | undefined = 'code-circle';
+
+  /**
+   * Timeline element PIN icon
+   * @default code-circle
+   */
+  @Input() pinIconTitle: string | undefined;
+
+  /**
+   * Timeline element category label
+   */
+  @Input() categoryLabel: string | undefined = 'Categoria evento: ';
+
+  /**
+   * Timeline element date label
+   */
+  @Input() dateLabel: string | undefined = 'Data evento: ';
+
+  /**
+   * 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: inputToBoolean })
+  showReadMore: boolean = false;
+
+  /** Timeline element detail link
+   * @default #
+   */
+  @Input() readMoreLink: string | undefined = '#';
+}

package/src/lib/components/core/timeline/timeline.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" />
+      </div>
+    }
+  </div>
+</div>

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

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

package/src/lib/components/core/timeline/timeline.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItTimelineComponent } from './timeline.component';
+import { ItTimelineItemComponent } from './timeline-item/timeline-item.component';
+
+const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent];
+
+@NgModule({
+  imports: timelineComponents,
+  exports: timelineComponents,
+})
+export class ItTimelineModule {}

package/src/lib/components/core/tooltip/tooltip.directive.spec.ts

@@ -0,0 +1,20 @@
+import { ElementRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { ItTooltipDirective } from './tooltip.directive';
+
+export class MockElementRef extends ElementRef {
+  nativeElement = {};
+}
+
+describe('ItTooltipDirective', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [{ provide: ElementRef, useClass: MockElementRef }],
+    }).compileComponents();
+  });
+  it('should create an instance', () => {
+    const directive = new ItTooltipDirective(TestBed.inject(ElementRef));
+    expect(directive).toBeTruthy();
+  });
+});