design-angular-kit 1.2.1 → 1.3.0

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

@@ -1,185 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  Output,
-  QueryList,
-} from '@angular/core';
-import { ItSteppersItemComponent } from '../steppers-item/steppers-item.component';
-import { ProgressBarColor } from '../../../../interfaces/core';
-import { startWith, Subscription } from 'rxjs';
-import { NgTemplateOutlet } from '@angular/common';
-import { ItIconComponent } from '../../../utils/icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { ItButtonDirective } from '../../button/button.directive';
-import { ItProgressBarComponent } from '../../progress-bar/progress-bar.component';
-import { ItProgressButtonComponent } from '../../progress-button/progress-button.component';
-import { inputToBoolean } from '../../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-steppers-container',
-  templateUrl: './steppers-container.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent, NgTemplateOutlet, TranslateModule, ItButtonDirective, ItProgressBarComponent, ItProgressButtonComponent],
-})
-export class ItSteppersContainerComponent implements AfterViewInit, OnDestroy {
-  /**
-   * The active step index
-   * @param index the step index
-   */
-  @Input({ required: true }) activeStep!: number;
-
-  /**
-   * Show the stepper header
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) showHeader: boolean = true;
-
-  /**
-   * Dark style
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) dark?: boolean;
-
-  /**
-   * The labels present in the header steps can be anticipated by the relative ordinal number.
-   * @efualt false
-   */
-  @Input({ transform: inputToBoolean }) steppersNumber?: boolean;
-
-  /**
-   * The progress style
-   * -<b>progress</b>: Show progress bar - You can change the color with the `progressColor` attribute
-   * -<b>dots</b>: Show progress dots
-   * @default undefined - don't show progress
-   */
-  @Input() progressStyle: 'progress' | 'dots' | undefined;
-
-  /**
-   * Customize progress color
-   */
-  @Input() progressColor: ProgressBarColor | undefined;
-
-  /**
-   * Show the back button
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) showBackButton: boolean = true;
-
-  /**
-   * Disable the back button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) disableBackButton?: boolean;
-
-  /**
-   * Show the forward button
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) showForwardButton: boolean = true;
-
-  /**
-   * Disable the forward button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) disableForwardButton?: boolean;
-
-  /**
-   * Show the confirm button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) showConfirmButton?: boolean;
-
-  /**
-   * Disable the confirm button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) disableConfirmButton?: boolean;
-
-  /**
-   * Show the confirm button as indeterminate progress button
-   */
-  @Input({ transform: inputToBoolean }) confirmLoading?: boolean;
-
-  /**
-   * Show the save button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) showSaveButton?: boolean;
-
-  /**
-   * Disable the save button
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) disableSaveButton?: boolean;
-
-  /**
-   * Show the save button as indeterminate progress button
-   */
-  @Input({ transform: inputToBoolean }) saveLoading?: boolean;
-
-  /**
-   * The stepper items
-   */
-  @ContentChildren(ItSteppersItemComponent) steps?: QueryList<ItSteppersItemComponent>;
-
-  /**
-   * On back button click
-   * @event activeStep the current step index
-   */
-  @Output() backClick: EventEmitter<number>;
-
-  /**
-   * On forward button click
-   * @event activeStep the current step index
-   */
-  @Output() forwardClick: EventEmitter<number>;
-
-  /**
-   * On confirm button click
-   * @event activeStep the current step index
-   */
-  @Output() confirmClick: EventEmitter<number>;
-
-  /**
-   * On save button click
-   * @event activeStep the current step index
-   */
-  @Output() saveClick: EventEmitter<number>;
-
-  private stepsSubscriptions?: Array<Subscription>;
-
-  constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {
-    this.backClick = new EventEmitter<number>();
-    this.forwardClick = new EventEmitter<number>();
-    this.confirmClick = new EventEmitter<number>();
-    this.saveClick = new EventEmitter<number>();
-  }
-
-  ngAfterViewInit(): void {
-    this.steps?.changes
-      .pipe(
-        // When steps changes (dynamic add/remove)
-        startWith(undefined)
-      )
-      .subscribe(() => {
-        this.stepsSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
-        this.stepsSubscriptions = this.steps?.map(step =>
-          step.valueChanges.subscribe(() => {
-            this._changeDetectorRef.detectChanges(); // DetectChanges when step attributes changes
-          })
-        );
-        this._changeDetectorRef.detectChanges(); // Force update html render
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.stepsSubscriptions?.forEach(step => step.unsubscribe());
-  }
-}

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

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

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

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

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

@@ -1,33 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
-import { IconName } from '../../../../interfaces/icon';
-import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
-
-@Component({
-  standalone: true,
-  selector: 'it-steppers-item',
-  templateUrl: './steppers-item.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [],
-})
-export class ItSteppersItemComponent extends ItAbstractComponent {
-  /**
-   * The labels present in the header steps
-   */
-  @Input({ required: true }) label!: string;
-
-  /**
-   * The labels present in the header steps can be preceded by an icon.
-   */
-  @Input() icon: IconName | undefined;
-
-  /**
-   * The title for the icon.
-   */
-  @Input() iconTitle: string | undefined;
-
-  /**
-   * The content of step
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @ViewChild(TemplateRef) public htmlContent!: TemplateRef<any>;
-}

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

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ItSteppersContainerComponent } from './steppers-container/steppers-container.component';
-import { ItSteppersItemComponent } from './steppers-item/steppers-item.component';
-
-const steppersComponents = [ItSteppersContainerComponent, ItSteppersItemComponent];
-
-@NgModule({
-  imports: steppersComponents,
-  exports: steppersComponents,
-})
-export class ItSteppersModule {}

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

@@ -1,78 +0,0 @@
-<div
-  [class.row]="vertical"
-  [class.flex-row-reverse]="inverted && vertical"
-  [class.d-flex]="inverted && !vertical"
-  [class.flex-column-reverse]="inverted && !vertical">
-  <div
-    [class.col-5]="inverted && vertical"
-    [class.col-md-4]="inverted && vertical"
-    [class.col-lg-3]="inverted && vertical"
-    [class.col-4]="!inverted && vertical"
-    [class.col-md-3]="!inverted && vertical">
-    @if (tabs) {
-      <ul
-        class="nav nav-tabs"
-        [class.nav-tabs-editable]="editable"
-        [class.nav-tabs-cards]="cards"
-        [class.nav-tabs-vertical]="vertical"
-        [class.auto]="auto"
-        [class.nav-tabs-icon-text]="iconText"
-        [class.nav-dark]="dark"
-        role="tablist">
-        @for (tab of tabs; track tab.id; let i = $index) {
-          <li class="nav-item">
-            <a
-              #tabNavLinks
-              [id]="tab.id + '-tab-link'"
-              role="tab"
-              class="nav-link"
-              [class.active]="tab.active"
-              [class.disabled]="tab.disabled"
-              [attr.href]="'#' + tab.id + '-tab'"
-              [attr.aria-controls]="tab.id + '-tab'"
-              (click)="onTab(tab)">
-              @if (tab.icon) {
-                <it-icon [name]="tab.icon" class="me-2"></it-icon>
-              }
-              {{ tab.label }}
-            </a>
-            @if (editable) {
-              <a class="nav-link-close" (click)="clickToClose(i)" (keypress)="clickToClose(i)" [attr.disabled]="tab.disabled">
-                <it-icon name="close"></it-icon>
-              </a>
-            }
-          </li>
-        }
-        @if (editable) {
-          <li class="nav-item">
-            <a href="#" class="nav-tab-add" (click)="clickToAdd($event)" (keypress)="clickToAdd($event)"
-              ><span class="visually-hidden"> Aggiungi un tab</span></a
-            >
-          </li>
-        }
-      </ul>
-    }
-  </div>
-  <div
-    [class.col-7]="inverted && vertical"
-    [class.col-md-8]="inverted && vertical"
-    [class.col-lg-9]="inverted && vertical"
-    [class.col-8]="!inverted && vertical"
-    [class.col-md-9]="!inverted && vertical">
-    @if (tabs) {
-      <div class="tab-content">
-        @for (tab of tabs; track tab.id) {
-          <div
-            [id]="tab.id + '-tab'"
-            class="tab-pane p-4 fade {{ tab.class ?? '' }}"
-            [class.active]="tab.active"
-            [class.show]="tab.active"
-            role="tabpanel"
-            [attr.aria-labelledby]="tab.id + '-tab-link'">
-            <ng-container *ngTemplateOutlet="tab.htmlContent"></ng-container>
-          </div>
-        }
-      </div>
-    }
-  </div>
-</div>

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

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

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

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

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

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

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

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

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

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

@@ -1,65 +0,0 @@
-.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;
-    }
-  }
-}