design-angular-kit 1.2.0 → 1.2.1

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

@@ -0,0 +1,107 @@
+<nav
+  class="pagination-wrapper"
+  [class.justify-content-center]="alignment === 'center'"
+  [class.justify-content-end]="alignment === 'end'"
+  [class.pagination-total]="totalNumberText.hasChildNodes()">
+  @if (pages.length) {
+    <ul class="pagination">
+      <li class="page-item" [class.disabled]="currentPage < 1">
+        <a class="page-link" [class.text]="textLinks" href="#" (click)="pageChange($event, currentPage)">
+          @if (!textLinks) {
+            <it-icon name="chevron-left" color="primary"></it-icon>
+          }
+          <span class="visually-hidden">
+            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}
+          </span>
+          @if (textLinks) {
+            {{ 'it.core.previous' | translate }}
+          }
+        </a>
+      </li>
+      @if (simpleMode) {
+        <li class="page-item">
+          <span class="page-link" aria-current="page">{{ currentPage + 1 }}</span>
+        </li>
+        <li class="page-item"><span class="page-link">/</span></li>
+        <li class="page-item">
+          <span class="page-link">{{ pageNumbers }}</span>
+        </li>
+        <li class="page-item visually-hidden">
+          <a class="page-link" href="#" aria-current="page">
+            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}
+          </a>
+        </li>
+      } @else {
+        @if (pageNumbers > visiblePages && pages[0] >= 2) {
+          <li class="page-item">
+            <a class="page-link" href="#" (click)="pageChange($event, 1)">1</a>
+          </li>
+          @if (pages[0] >= 3) {
+            <li class="page-item">
+              <span class="page-link">...</span>
+            </li>
+          }
+        }
+        @for (page of pages; track page) {
+          <li class="page-item">
+            @if (page === currentPage + 1) {
+              <a class="page-link" aria-current="page">
+                <span class="d-inline-block d-sm-none">{{ 'it.core.page' | translate }}</span> {{ page }}
+              </a>
+            } @else {
+              <a class="page-link" href="#" (click)="pageChange($event, page)">{{ page }}</a>
+            }
+          </li>
+        }
+        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {
+          @if (pages[pages.length - 1] < pageNumbers - 1) {
+            <li class="page-item">
+              <span class="page-link">...</span>
+            </li>
+          }
+          <li class="page-item">
+            <a class="page-link" href="#" (click)="pageChange($event, pageNumbers)">{{ pageNumbers }}</a>
+          </li>
+        }
+      }
+      <li class="page-item" [class.disabled]="currentPage >= pageNumbers - 1">
+        <a class="page-link" [class.text]="textLinks" href="#" (click)="pageChange($event, currentPage + 2)">
+          <span class="visually-hidden">
+            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}
+          </span>
+          @if (textLinks) {
+            {{ 'it.core.next' | translate }}
+          } @else {
+            <it-icon name="chevron-right" color="primary"></it-icon>
+          }
+        </a>
+      </li>
+    </ul>
+  }
+
+  @if (currentChanger !== undefined) {
+    <it-dropdown>
+      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>
+      <ng-container list>
+        @for (value of changerValues; track value) {
+          <it-dropdown-item href="#" externalLink="true" (click)="changerChange($event, value)">
+            {{ value }} / {{ 'it.core.page' | translate | lowercase }}
+          </it-dropdown-item>
+        }
+      </ng-container>
+    </it-dropdown>
+  }
+
+  @if (showJumpToPage) {
+    <it-input
+      type="number"
+      [min]="1"
+      [max]="pageNumbers"
+      [label]="('it.core.go-to' | translate) + '...'"
+      [formControl]="jumpToPage"></it-input>
+  }
+
+  <p [class.d-none]="!totalNumberText.hasChildNodes()" #totalNumberText>
+    <ng-content></ng-content>
+  </p>
+</nav>

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

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

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

@@ -0,0 +1,157 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, distinctUntilChanged, filter } from 'rxjs';
+import { LowerCasePipe } from '@angular/common';
+import { ItIconComponent } from '../../utils/icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItDropdownModule } from '../dropdown/dropdown.module';
+import { ItInputComponent } from '../../form/input/input.component';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-pagination',
+  templateUrl: './pagination.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, TranslateModule, LowerCasePipe, ItDropdownModule, ItInputComponent, ReactiveFormsModule],
+})
+export class ItPaginationComponent implements OnChanges {
+  /**
+   * Index of page (start 0)
+   */
+  @Input({ required: true }) currentPage!: number;
+
+  /**
+   * Max number of page (counter)
+   */
+  @Input({ required: true }) pageNumbers!: number;
+
+  /**
+   * Number of pages closest to the current one to display
+   * @default 5
+   */
+  @Input() visiblePages: number = 5;
+
+  /**
+   * Pagination alignment (justify-content)
+   */
+  @Input() alignment: 'center' | 'end' | undefined;
+
+  /**
+   * Enable/Disable simple mode
+   * Pagination in the "Simple mode" version is optimized for mobile devices.
+   * @default false - disabled
+   */
+  @Input({ transform: inputToBoolean }) simpleMode?: boolean;
+
+  /**
+   * Enable/Disable text links
+   * Chevron icons used as navigation links are replaced by text links such as “previous” and “next”.
+   * @default false - disabled
+   */
+  @Input({ transform: inputToBoolean }) textLinks?: boolean;
+
+  /**
+   * Current value of Changer
+   * If is set show the Changer
+   * @default undefined - hide the Changer
+   */
+  @Input() currentChanger: number | undefined;
+
+  /**
+   * Available Changer values
+   * @default [10, 25, 50, 100]
+   */
+  @Input() changerValues: Array<number> = [10, 25, 50, 100];
+
+  /**
+   * Hide/Show "Jump to page" input
+   * @default false - hidden
+   */
+  @Input({ transform: inputToBoolean }) showJumpToPage?: boolean;
+
+  /**
+   * Fired when page is changed. Emit the new index of page
+   */
+  @Output() pageEvent = new EventEmitter<number>();
+
+  /**
+   * Fired when changer is changed. Emit the new changer value
+   */
+  @Output() changerEvent = new EventEmitter<number>();
+
+  /**
+   * The pages
+   * @protected
+   */
+  protected pages: Array<number> = [];
+
+  /**
+   * Jump to page input
+   * @protected
+   */
+  protected jumpToPage: FormControl<number | null> = new FormControl<number | null>(null);
+
+  constructor() {
+    this.jumpToPage.valueChanges
+      .pipe(
+        debounceTime(300), // Delay filter data after time span has passed without another source emission
+        distinctUntilChanged(),
+        filter(value => !!value && this.jumpToPage.valid)
+      )
+      .subscribe(value => {
+        this.pageEvent.emit(value! - 1);
+      });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.pages = this.calculatePages();
+    if (changes['currentPage']) {
+      this.jumpToPage.setValue(null, { emitEvent: false });
+    }
+  }
+
+  /**
+   * Create array to generate pagination of `visiblePages` element
+   */
+  private calculatePages(): Array<number> {
+    if (this.simpleMode) {
+      return [this.currentPage];
+    }
+
+    const length = this.pageNumbers > this.visiblePages ? this.visiblePages : this.pageNumbers;
+
+    const halfVisiblePages = Math.floor(this.visiblePages / 2);
+    let start = this.currentPage > halfVisiblePages && this.pageNumbers > this.visiblePages ? this.currentPage - halfVisiblePages + 1 : 1;
+
+    if (this.pageNumbers > this.visiblePages) {
+      if (this.currentPage + 1 >= this.pageNumbers) {
+        start -= halfVisiblePages;
+      } else if (this.currentPage >= this.pageNumbers - halfVisiblePages) {
+        start -= this.pageNumbers - (this.currentPage + 1);
+      }
+    }
+
+    return Array.from({ length }, (_, i) => i + start);
+  }
+
+  /**
+   * On click page change
+   * @param event click event
+   * @param newPage the new page of table
+   */
+  protected pageChange(event: Event, newPage: number): void {
+    event.preventDefault();
+    this.pageEvent.emit(newPage - 1); // emit new page index
+  }
+
+  /**
+   * On click changer
+   * @param event click event
+   * @param value the new changer value
+   */
+  protected changerChange(event: Event, value: number): void {
+    event.preventDefault();
+    this.changerEvent.emit(value); // emit new changer value
+  }
+}

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

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

package/src/lib/components/core/popover/popover.directive.ts

@@ -0,0 +1,171 @@
+import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { ElementPlacement } from '../../../interfaces/core';
+import { Popover } from 'bootstrap-italia';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Directive({
+  standalone: true,
+  selector: '[itPopover]',
+  exportAs: 'itPopover',
+})
+export class ItPopoverDirective implements AfterViewInit, OnDestroy {
+  /**
+   * Define the popover content
+   * @param content the popover content
+   */
+  @Input('itPopover') set content(content: string) {
+    this.element.setAttribute('data-bs-content', content);
+  }
+
+  /**
+   * Define the popover title
+   * @param title the popover title
+   */
+  @Input() set popoverTitle(title: string | undefined) {
+    if (title) {
+      this.element.setAttribute('title', title);
+      this.element.setAttribute('data-bs-original-title', title);
+    }
+  }
+
+  /**
+   * Define the popover placement
+   * @param placement
+   */
+  @Input() set popoverPlacement(placement: ElementPlacement) {
+    this.element.setAttribute('data-bs-placement', placement);
+  }
+
+  /**
+   * Appends the popover to a specific element.
+   * @param container
+   */
+  @Input() set popoverContainer(container: 'body' | string | undefined) {
+    if (container) {
+      this.element.setAttribute('data-bs-container', container);
+    }
+  }
+
+  /**
+   * Indicates whether the title contains html
+   * @param html true if contain html
+   */
+  @Input({ transform: inputToBoolean }) set popoverHtml(html: boolean) {
+    this.element.setAttribute('data-bs-html', html ? 'true' : 'false');
+  }
+
+  /**
+   * How popover is triggered
+   * - 'hover': To open the Popover on hover of the mouse over the element
+   * - 'focus': To ignore popovers on the user's next click of an element other than the toggle element.
+   * @param trigger
+   */
+  @Input() set popoverTrigger(trigger: 'click' | 'hover' | 'focus' | 'manual' | undefined) {
+    if (trigger) {
+      this.element.setAttribute('data-bs-trigger', trigger);
+    }
+  }
+
+  /**
+   * This event fires immediately when the show method is called.
+   */
+  @Output() showEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
+   */
+  @Output() shownEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * This event fires immediately when the hide method is called.
+   */
+  @Output() hideEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
+   */
+  @Output() hiddenEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * This event fires after the show event when the tooltip template has been added to the DOM.
+   */
+  @Output() insertedEvent: EventEmitter<Event> = new EventEmitter();
+
+  private readonly element: HTMLElement;
+  private popover?: Popover;
+
+  constructor(private readonly _elementRef: ElementRef) {
+    this.element = this._elementRef.nativeElement;
+  }
+
+  ngAfterViewInit(): void {
+    this.element.setAttribute('data-bs-toggle', 'popover');
+    this.popover = Popover.getOrCreateInstance(this.element);
+
+    this.element.addEventListener('show.bs.popover', event => this.showEvent.emit(event));
+    this.element.addEventListener('shown.bs.popover', event => this.shownEvent.emit(event));
+    this.element.addEventListener('hide.bs.popover', event => this.hideEvent.emit(event));
+    this.element.addEventListener('hidden.bs.popover', event => this.hiddenEvent.emit(event));
+    this.element.addEventListener('inserted.bs.popover', event => this.insertedEvent.emit(event));
+  }
+
+  ngOnDestroy(): void {
+    this.dispose();
+  }
+
+  /**
+   * Shows the popover of an item.
+   */
+  public show(): void {
+    this.popover?.show();
+  }
+
+  /**
+   * Hide the popover of an element.
+   */
+  public hide(): void {
+    this.popover?.hide();
+  }
+
+  /**
+   * Activate / Deactivate the popover of an element
+   */
+  public toggle(): void {
+    this.popover?.toggle();
+  }
+
+  /**
+   * Hides and destroys the popover of an element.
+   */
+  public dispose(): void {
+    this.popover?.dispose();
+  }
+
+  /**
+   * Gives the popover of an element a chance to be shown.
+   */
+  public enable(): void {
+    this.popover?.enable();
+  }
+
+  /**
+   * Removes the ability to show the popover of an element.
+   */
+  public disable(): void {
+    this.popover?.disable();
+  }
+
+  /**
+   * Toggles the possibility that the popover of an element is shown or hidden.
+   */
+  public toggleEnabled(): void {
+    this.popover?.disable();
+  }
+
+  /**
+   * Updates the position of an element's popover.
+   */
+  public update(): void {
+    this.popover?.disable();
+  }
+}

package/src/lib/components/core/progress-bar/progress-bar.component.html

@@ -0,0 +1,20 @@
+<div class="progress-bar-wrapper">
+  @if (showLabel) {
+    <div class="progress-bar-label">
+      <span class="visually-hidden">{{ 'it.core.progress' | translate }} </span>{{ value }}%
+    </div>
+  }
+  <div class="progress" [class.progress-color]="!!color" [class.progress-indeterminate]="indeterminate">
+    @if (indeterminate) {
+      <div class="progress-bar{{ bgColor }}" role="progressbar"></div>
+    } @else {
+      <div
+        class="progress-bar{{ bgColor }}"
+        role="progressbar"
+        [style.width.%]="value"
+        [attr.aria-valuenow]="value"
+        aria-valuemin="0"
+        aria-valuemax="100"></div>
+    }
+  </div>
+</div>

package/src/lib/components/core/progress-bar/progress-bar.component.spec.ts

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

package/src/lib/components/core/progress-bar/progress-bar.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ProgressBarColor } from '../../../interfaces/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule],
+})
+export class ItProgressBarComponent {
+  /**
+   * The progress bar value [0, 100]
+   */
+  @Input({ required: true }) value!: number;
+
+  /**
+   * Show the progress label
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) showLabel?: boolean;
+
+  /**
+   * Show the progress as indeterminate
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) indeterminate?: boolean;
+
+  /**
+   * The progress bar color
+   */
+  @Input() color: ProgressBarColor | undefined;
+
+  /**
+   * Return the background color
+   */
+  get bgColor(): string {
+    if (!this.color) {
+      return '';
+    }
+
+    return ` bg-${this.color}`;
+  }
+}

package/src/lib/components/core/progress-button/progress-button.component.html

@@ -0,0 +1,5 @@
+<ng-content></ng-content>
+
+@if (isProgress) {
+  <it-progress-bar [value]="progressValue" [indeterminate]="isIndeterminate" [color]="progressColor"></it-progress-bar>
+}

package/src/lib/components/core/progress-button/progress-button.component.spec.ts

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

package/src/lib/components/core/progress-button/progress-button.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ProgressBarColor } from '../../../interfaces/core';
+import { ItProgressBarComponent } from '../progress-bar/progress-bar.component';
+
+@Component({
+  standalone: true,
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'button[itButton][progress]',
+  templateUrl: './progress-button.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItProgressBarComponent],
+})
+export class ItProgressButtonComponent {
+  /**
+   * Behavior of the progress bar
+   * - <b>true</b>: Show indeterminate progress bar
+   * - <b>false</b> or <b>undefined</b>: Hide progress bar
+   * - <b>number</b> [0, 100]: Assign a specific value to the progress bar
+   * @default undefined
+   */
+  @Input() progress: number | boolean | undefined;
+
+  /**
+   * The progress bar color
+   */
+  @Input() progressColor: ProgressBarColor | undefined;
+
+  get isProgress(): boolean {
+    return typeof this.progress === 'number' || !!this.progress;
+  }
+
+  get progressValue(): number {
+    return typeof this.progress === 'number' ? this.progress : 0;
+  }
+
+  get isIndeterminate(): boolean {
+    return typeof this.progress !== 'number' && !!this.progress;
+  }
+}

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

@@ -0,0 +1,7 @@
+<div class="progress-spinner" [class.progress-spinner-double]="double" [class.progress-spinner-active]="active" [class.size-sm]="small">
+  @if (double) {
+    <div class="progress-spinner-inner"></div>
+    <div class="progress-spinner-inner"></div>
+  }
+  <span class="visually-hidden">{{ 'it.core.loading' | translate }}...</span>
+</div>