design-angular-kit 1.2.0 → 1.2.1

package/src/lib/components/core/tab/tab-container/tab-container.component.ts

@@ -0,0 +1,137 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
+import { ItTabItemComponent } from '../tab-item/tab-item.component';
+import { of, startWith, Subscription, switchMap, tap } from 'rxjs';
+import { Tab } from 'bootstrap-italia';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { NgTemplateOutlet } from '@angular/common';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-tab-container',
+  templateUrl: './tab-container.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, NgTemplateOutlet],
+})
+export class ItTabContainerComponent extends ItAbstractComponent implements OnDestroy, AfterViewInit {
+  /**
+   * Tabs automatically occupy the entire available width
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) auto?: boolean;
+
+  /**
+   * To obtain the correct margin between text and icon in the horizontally developed tab
+   */
+  @Input({ transform: inputToBoolean }) iconText?: boolean;
+
+  /**
+   * Dark style
+   */
+  @Input({ transform: inputToBoolean }) dark?: boolean;
+
+  /**
+   * Show items as cards
+   */
+  @Input({ transform: inputToBoolean }) cards?: boolean;
+
+  /**
+   * Show vertical navigation
+   */
+  @Input({ transform: inputToBoolean }) vertical?: boolean;
+
+  /**
+   * The tab position
+   */
+  @Input({ transform: inputToBoolean }) inverted?: boolean;
+
+  /**
+   * If tabs are editable
+   */
+  @Input({ transform: inputToBoolean }) editable?: boolean;
+
+  /**
+   * The tab items
+   */
+  @ContentChildren(ItTabItemComponent) tabs?: QueryList<ItTabItemComponent>;
+
+  @ViewChildren('tabNavLinks') private tabNavLinks?: QueryList<ElementRef<HTMLAnchorElement>>;
+
+  @Output() tabSelected = new EventEmitter<ItTabItemComponent>();
+
+  @Output() tabClosed = new EventEmitter();
+
+  @Output() tabAdded = new EventEmitter();
+
+  private tabSubscriptions?: Array<Subscription>;
+
+  constructor() {
+    super();
+  }
+
+  override ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+
+    this.tabs?.changes
+      .pipe(
+        // When tabs changes (dynamic add/remove)
+        startWith(undefined),
+        tap(() => {
+          this.tabSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
+          this.tabSubscriptions = this.tabs?.map(tab =>
+            tab.valueChanges.subscribe(() => {
+              this._changeDetectorRef.detectChanges(); // DetectChanges when tab-item attributes changes
+            })
+          );
+          this._changeDetectorRef.detectChanges(); // Force update html render
+        }),
+        switchMap(() => this.tabNavLinks?.changes.pipe(startWith(undefined)) || of(undefined))
+      )
+      .subscribe(() => {
+        // Init tabs from bootstrap-italia
+        this.tabNavLinks?.forEach(tabNavLink => {
+          const triggerEl = tabNavLink.nativeElement,
+            tabTrigger = Tab.getOrCreateInstance(triggerEl);
+
+          if (triggerEl.getAttribute('tab-listener') !== 'true') {
+            triggerEl.addEventListener('click', event => {
+              event.preventDefault();
+              tabTrigger.show();
+              this._changeDetectorRef.detectChanges();
+            });
+            triggerEl.setAttribute('tab-listener', 'true'); // Prevents multiple insertion of the listener
+          }
+        });
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.tabSubscriptions?.forEach(sub => sub.unsubscribe());
+  }
+
+  onTab(tab: ItTabItemComponent) {
+    this.tabSelected.emit(tab);
+  }
+
+  clickToClose(index: number) {
+    this.tabClosed.emit(index);
+  }
+
+  clickToAdd($event: Event) {
+    $event.preventDefault();
+    this.tabAdded.emit();
+  }
+}

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

@@ -0,0 +1,3 @@
+<ng-template>
+  <ng-content></ng-content>
+</ng-template>

package/src/lib/components/core/tab/tab-item/tab-item.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItTabItemComponent } from './tab-item.component';
+
+describe('ItTabItemComponent', () => {
+  let component: ItTabItemComponent;
+  let fixture: ComponentFixture<ItTabItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItTabItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItTabItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { IconName } from '../../../../interfaces/icon';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-tab-item',
+  templateUrl: './tab-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItTabItemComponent extends ItAbstractComponent implements AfterViewInit {
+  /**
+   * The tab label
+   */
+  @Input() label: string | undefined;
+
+  /**
+   * The icon name
+   */
+  @Input() icon: IconName | undefined;
+
+  /**
+   * Default active tab
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) active?: boolean;
+
+  /**
+   * Default disabled tab
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) disabled?: boolean;
+
+  /**
+   * Custom class
+   */
+  @Input() class: string = '';
+
+  /**
+   * The content of tab
+   */
+  @ViewChild(TemplateRef) public htmlContent!: TemplateRef<any>;
+
+  override ngAfterViewInit() {
+    super.ngAfterViewInit();
+    this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItTabContainerComponent } from './tab-container/tab-container.component';
+import { ItTabItemComponent } from './tab-item/tab-item.component';
+
+const tabComponents = [ItTabContainerComponent, ItTabItemComponent];
+
+@NgModule({
+  imports: tabComponents,
+  exports: tabComponents,
+})
+export class ItTabModule {}

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

@@ -0,0 +1,27 @@
+<!--
+  We set the `tabindex` on an element inside the table header, rather than the header itself,
+  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the
+  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both
+  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach
+  over having a button with an `aria-label` inside the header, because the button's `aria-label`
+  will be read out as the user is navigating the table's cell (see #13012).
+
+  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid
+-->
+<div
+  class="it-sort-header-container it-focus-indicator"
+  [class.it-sort-header-sorted]="isSorted"
+  [class.it-sort-header-position-before]="arrowPosition === 'before'"
+  [attr.tabindex]="isDisabled ? null : 0"
+  [attr.role]="isDisabled ? null : 'button'">
+  <!--
+    We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.
+    Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element
+    causes it to be center-aligned, whereas removing it will keep the text to the left.
+  -->
+  <div class="it-sort-header-content">
+    <ng-content></ng-content>
+  </div>
+
+  <it-icon class="it-sort-arrow" size="sm" [name]="arrowIconClass" />
+</div>

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

@@ -0,0 +1,65 @@
+.it-sort-header-container {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  letter-spacing: normal;
+
+  // Needs to be reset since we don't want an outline around the inner
+  // div which is focusable. We have our own alternate focus styling.
+  outline: 0;
+
+  .it-sort-header-disabled & {
+    cursor: default;
+
+    .it-sort-arrow {
+      opacity: 0 !important;
+      fill-opacity: 0 !important;
+    }
+  }
+
+  // For the sort-header element, default inset/offset values are necessary to ensure that
+  // the focus indicator is sufficiently contrastive and renders appropriately.
+  &::before {
+    $border-width: 3px;
+    $offset: calc(#{$border-width} + 2px);
+    margin: calc(#{$offset} * -1);
+  }
+
+  &.it-sort-header-position-before {
+    flex-direction: row-reverse;
+    justify-content: left;
+    gap: 0.5rem;
+  }
+
+  .it-sort-arrow {
+    opacity: 0;
+    fill-opacity: 0;
+    transition:
+      fill-opacity 0.3s ease-out,
+      opacity 0.3s ease-out;
+    -moz-transition:
+      fill-opacity 0.3s ease-out,
+      opacity 0.3s ease-out;
+    -webkit-transition:
+      fill-opacity 0.3s ease-out,
+      opacity 0.3s ease-out;
+    -o-transition:
+      fill-opacity 0.3s ease-out,
+      opacity 0.3s ease-out;
+  }
+
+  &:hover {
+    .it-sort-arrow {
+      opacity: 0.5;
+      fill-opacity: 0.5;
+    }
+  }
+
+  &.it-sort-header-sorted {
+    .it-sort-arrow {
+      opacity: 1 !important;
+      fill-opacity: 1 !important;
+    }
+  }
+}

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

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

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

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