design-angular-kit 1.2.1 → 1.2.2

package/src/lib/components/core/table/sort/sort-header/sort-header.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ItSortHeaderComponent } from './sort-header.component';
-import { ItSortDirective } from '../sort.directive';
-import { tb_base } from '../../../../../../test';
-
-describe('ItSortHeaderComponent', () => {
-  let component: ItSortHeaderComponent;
-  let fixture: ComponentFixture<ItSortHeaderComponent>;
-  const sortDirective: ItSortDirective = new ItSortDirective();
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ItSortHeaderComponent],
-      providers: [{ provide: ItSortDirective, useValue: sortDirective }, ...tb_base.providers],
-    });
-    fixture = TestBed.createComponent(ItSortHeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/core/table/sort/sort-header/sort-header.component.ts

@@ -1,164 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  Optional,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ItSortDirective } from '../sort.directive';
-import { merge, Subscription } from 'rxjs';
-import { ItIconComponent } from '../../../../utils/icon/icon.component';
-import { IconName } from '../../../../../interfaces/icon';
-import {
-  IT_SORT_DEFAULT_OPTIONS,
-  ItSortable,
-  ItSortDefaultOptions,
-  SortDirection,
-  SortHeaderArrowPosition,
-} from '../../../../../interfaces/sortable-table';
-
-/**
- * Applies sorting behavior (click to change sort) and styles to an element, including an
- * arrow to display the current sort direction.
- *
- * Must be provided with an id and contained within a parent ItSort directive.
- *
- * If used on header cells in a CdkTable, it will automatically default its id from its containing
- * column definition.
- */
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: '[it-sort-header]',
-  exportAs: 'itSortHeader',
-  standalone: true,
-  imports: [ItIconComponent],
-  templateUrl: './sort-header.component.html',
-  styleUrls: ['./sort-header.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ItSortHeaderComponent implements ItSortable, OnDestroy, OnInit {
-  /**
-   * ID of this sort header. If used within the context of a CdkColumnDef, this will default to
-   * the column's name.
-   */
-  @Input('it-sort-header') id!: string;
-
-  /** Sets the position of the arrow that displays when sorted. */
-  @Input() arrowPosition: SortHeaderArrowPosition = 'after';
-
-  /** Overrides the sort start value of the containing MatSort for this SortHeaderComponent. */
-  @Input() start?: SortDirection;
-
-  /** whether the sort header is disabled. */
-  @Input({ transform: booleanAttribute })
-  sortDisabled: boolean = false;
-
-  /** Overrides the disable clear value of the containing SortDirective for this MatSortable. */
-  @Input({ transform: booleanAttribute })
-  disableSortClear?: boolean;
-
-  @HostBinding('class')
-  public readonly sortHeaderClass = 'it-sort-header';
-
-  private _rerenderSubscription?: Subscription;
-
-  /** The direction the arrow should be facing according to the current state. */
-  private _arrowDirection?: SortDirection;
-
-  constructor(
-    private readonly _changeDetectorRef: ChangeDetectorRef,
-    // `SortDirective` is not optionally injected, but just asserted manually w/ better error.
-    @Optional() public readonly _sort: ItSortDirective,
-    @Optional() @Inject(IT_SORT_DEFAULT_OPTIONS) defaultOptions?: ItSortDefaultOptions
-  ) {
-    if (defaultOptions?.arrowPosition) {
-      this.arrowPosition = defaultOptions?.arrowPosition;
-    }
-
-    this._handleStateChanges();
-  }
-
-  ngOnInit() {
-    // Initialize the direction of the arrow and set the view state to be immediately that state.
-    this.updateArrowDirection();
-    this._sort.register(this);
-  }
-
-  ngOnDestroy() {
-    this._sort.deregister(this);
-    this._rerenderSubscription?.unsubscribe();
-  }
-
-  @HostListener('click')
-  _handleClick() {
-    if (!this.isDisabled) {
-      this._sort.sort(this);
-    }
-  }
-
-  /**
-   * Whether this MatSortHeader is currently sorted in either ascending or descending order.
-   */
-  protected get isSorted() {
-    return this._sort.active == this.id && (this._sort.direction === 'asc' || this._sort.direction === 'desc');
-  }
-
-  /**
-   * Returns the icon class by the arrow direction
-   */
-  protected get arrowIconClass(): IconName {
-    return `${this._arrowDirection == 'asc' ? 'arrow-up' : 'arrow-down'}`;
-  }
-
-  /**
-   * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
-   * facing the start direction. Otherwise if it is sorted, the arrow should point in the currently
-   * active sorted direction. The reason this is updated through a function is because the direction
-   * should only be changed at specific times - when deactivated but the hint is displayed and when
-   * the sort is active and the direction changes. Otherwise the arrow's direction should linger
-   * in cases such as the sort becoming deactivated but we want to animate the arrow away while
-   * preserving its direction, even though the next sort direction is actually different and should
-   * only be changed once the arrow displays again (hint or activation).
-   */
-  private updateArrowDirection() {
-    this._arrowDirection = this.isSorted ? this._sort.direction : this.start || this._sort.start;
-  }
-
-  @HostBinding('class.it-sort-header-disabled')
-  public get isDisabled() {
-    return this._sort.sortDisabled || this.sortDisabled;
-  }
-
-  /**
-   * Gets the aria-sort attribute that should be applied to this sort header. If this header
-   * is not sorted, returns null so that the attribute is removed from the host element. Aria spec
-   * says that the aria-sort property should only be present on one header at a time, so removing
-   * ensures this is true.
-   */
-  @HostBinding('attr.aria-sort')
-  public get ariaSortAttribute() {
-    if (!this.isSorted) {
-      return 'none';
-    }
-
-    return this._sort.direction == 'asc' ? 'ascending' : 'descending';
-  }
-
-  /** Handles changes in the sorting state. */
-  private _handleStateChanges() {
-    this._rerenderSubscription = merge(this._sort.sortChange, this._sort._stateChanges).subscribe(() => {
-      if (this.isSorted) {
-        this.updateArrowDirection();
-      }
-      this._changeDetectorRef.markForCheck();
-    });
-  }
-}

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

@@ -1,73 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ItSortDirective } from './sort.directive';
-import { tb_base } from 'projects/design-angular-kit/src/test';
-import { ChangeDetectionStrategy, Component, DebugElement } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { ItSortHeaderComponent } from './sort-header/sort-header.component';
-import { ItSortEvent } from '../../../../interfaces/sortable-table';
-
-@Component({
-  standalone: true,
-  template: ` <it-table itSort (sortChange)="sortData($event)">
-    <ng-container thead>
-      <tr>
-        <th it-sort-header="name" scope="col">Nome</th>
-      </tr>
-    </ng-container>
-
-    <ng-container tbody>
-      <tr>
-        <td>Mario</td>
-      </tr>
-      <tr>
-        <td>Alessandro</td>
-      </tr>
-      <tr>
-        <td>Francesco</td>
-      </tr>
-    </ng-container>
-  </it-table>`,
-  imports: [ItSortDirective, ItSortHeaderComponent],
-})
-class TestComponent {
-  sortData(event: ItSortEvent) {
-    console.log(event);
-  }
-}
-
-describe('ItSortDirective', () => {
-  let component: TestComponent;
-  let fixture: ComponentFixture<TestComponent>;
-  let des: DebugElement[];
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ItSortDirective, ItSortHeaderComponent, TestComponent],
-      providers: tb_base.providers,
-    })
-      .overrideComponent(TestComponent, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
-      })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(TestComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-
-    // all elements with an attached SortDirective
-    des = fixture.debugElement.queryAll(By.directive(ItSortHeaderComponent));
-  });
-
-  it('should create an instance', () => {
-    const directive = new ItSortDirective();
-    expect(directive).toBeTruthy();
-  });
-
-  it('should emit sort event', () => {
-    const th = des[0].nativeElement as HTMLTableColElement;
-    spyOn(component, 'sortData');
-    th.dispatchEvent(new Event('click'));
-    fixture.detectChanges();
-    expect(component.sortData).toHaveBeenCalledWith({ active: 'name', direction: 'asc' });
-  });
-});

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

@@ -1,142 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,47 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-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();
-  });
-});