design-angular-kit 1.2.1 → 1.3.0

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

@@ -1,218 +0,0 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { ItAbstractComponent } from '../../../abstracts/abstract.component';
-import { Modal } from 'bootstrap-italia';
-import { TranslateModule } from '@ngx-translate/core';
-import { Modal as BSModal } from 'bootstrap';
-import { inputToBoolean } from '../../../utils/coercion';
-
-/**
- * Modal windows
- * @description To show featured content, notifications to users, or personalized content.
- */
-@Component({
-  standalone: true,
-  selector: 'it-modal',
-  templateUrl: './modal.component.html',
-  styleUrls: ['./modal.component.scss'],
-  exportAs: 'itModal',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TranslateModule],
-})
-export class ItModalComponent extends ItAbstractComponent implements AfterViewInit {
-  /**
-   * Show/Hide close button on header
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) closeButton: boolean = true;
-
-  /**
-   * To correctly format the contents of the modal with icon
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) alertModal?: boolean;
-
-  /**
-   * To correctly format the contents of the modal with Link List
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) dialogLinkList?: boolean;
-
-  /**
-   * Modal type Popconfirm can be used for short confirmation messages.
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) popconfirm?: boolean;
-
-  /**
-   * You can choose to use a scroll inside the modal, keeping the header and footer of the modal always visible
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) scrollable?: boolean;
-
-  /**
-   * To have modals that appear with fades
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) fade?: boolean = true;
-
-  /**
-   * Modal alignment
-   * - <b>centered</b>: to vertically center the modal
-   * - <b>left</b>: to left-align the modal
-   * - <b>right</b>: to right-align the modal
-   * @default undefined
-   */
-  @Input() alignment: 'centered' | 'left' | 'right' | undefined;
-
-  /**
-   * The modal size
-   * @default undefined
-   */
-  @Input() size: 'sm' | 'lg' | 'xl' | undefined;
-
-  /**
-   * Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal when clicked.
-   * @default true
-   */
-  @Input() backdrop: 'static' | boolean = true;
-
-  /**
-   * Puts the focus on the modal when initialized.
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) focus: boolean = true;
-
-  /**
-   * Closes the modal when escape key is pressed.
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) keyboard: boolean = true;
-
-  /**
-   * To better distinguish the footer element with a shadow
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) footerShadow?: boolean;
-
-  /**
-   * Modal options
-   */
-  @Input() options?: Partial<BSModal.Options>;
-
-  /**
-   * This event fires immediately when the instance method show is called.
-   */
-  @Output() public showEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event fires when the modal has been made visible to the user (it will wait for CSS transitions to complete).
-   */
-  @Output() public shownEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event is raised immediately when the instance method hide has been called.
-   */
-  @Output() public hideEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event fires when the modal has finished hiding from the user (it will wait for CSS transitions to complete).
-   */
-  @Output() public hiddenEvent: EventEmitter<Event> = new EventEmitter();
-
-  /**
-   * This event is fired when the modal is displayed, its background is static and a click outside the modal or a press
-   * of the esc key occurs and data-bs-keyboard is set to false.
-   */
-  @Output() public hidePreventedEvent: EventEmitter<Event> = new EventEmitter();
-
-  private modal?: Modal;
-
-  @ViewChild('modalElement', { static: false }) private modalElement?: ElementRef<HTMLDivElement>;
-
-  override ngAfterViewInit(): void {
-    super.ngAfterViewInit();
-    this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
-
-    if (this.modalElement) {
-      const element = this.modalElement.nativeElement;
-      this.modal = Modal.getOrCreateInstance(element, {
-        ...this.options,
-        backdrop: this.backdrop === 'static' ? 'static' : this.backdrop,
-        focus: this.focus,
-        keyboard: this.keyboard,
-      });
-
-      element.addEventListener('show.bs.modal', event => this.showEvent.emit(event));
-      element.addEventListener('shown.bs.modal', event => this.shownEvent.emit(event));
-      element.addEventListener('hide.bs.modal', event => this.hideEvent.emit(event));
-      element.addEventListener('hidden.bs.modal', event => this.hiddenEvent.emit(event));
-      element.addEventListener('hidePrevented.bs.modal', event => this.hidePreventedEvent.emit(event));
-    }
-  }
-
-  protected get modalClass(): string {
-    let modalClass = 'modal';
-    if (this.fade) {
-      modalClass += ` fade`;
-    }
-    if (this.alertModal) {
-      modalClass += ` alert-modal`;
-    }
-    if (this.dialogLinkList) {
-      modalClass += ` it-dialog-link-list`;
-    }
-    if (this.popconfirm) {
-      modalClass += ` popconfirm-modal`;
-    }
-    if (this.scrollable) {
-      modalClass += ` it-dialog-scrollable`;
-    }
-    return modalClass;
-  }
-
-  protected get dialogClass(): string {
-    let dialogClass = 'modal-dialog';
-    if (this.alignment) {
-      dialogClass += ` modal-dialog-${this.alignment}`;
-    }
-    if (this.size) {
-      dialogClass += ` modal-${this.size}`;
-    }
-    return dialogClass;
-  }
-
-  /**
-   * Manually activate/deactivate a modal. Returns to the caller before the modal has actually been shown or hidden
-   */
-  public toggle(): void {
-    this.modal?.toggle();
-  }
-
-  /**
-   * Manually open a modal. Returns to the caller before the modal has actually been displayed
-   */
-  public show(): void {
-    this.modal?.show();
-  }
-
-  /**
-   * Manually hide a modal. Returns to the caller before the modal has actually been hidden
-   */
-  public hide(): void {
-    this.modal?.hide();
-  }
-
-  /**
-   * Manually reposition the modal if the height of the modal changes when it is opened (in case a scroll bar appears).
-   */
-  public handleUpdate(): void {
-    this.modal?.handleUpdate();
-  }
-
-  /**
-   * Destroys the modal of an element.
-   */
-  public dispose(): void {
-    this.modal?.dispose();
-  }
-}

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

@@ -1,25 +0,0 @@
-@for (notification of notifications; track notification.id) {
-  <div
-    [id]="notification.id"
-    class="notification {{ notification.position }} {{ notification.type }}"
-    [class.with-icon]="!!notification.icon"
-    [class.dismissable]="notification.dismissible"
-    role="alert"
-    [attr.aria-labelledby]="notification.id + '-title'">
-    <h2 [id]="notification.id + '-title'" class="h5">
-      @if (notification.icon) {
-        <it-icon [name]="notification.icon"></it-icon>
-      }
-      <ng-container>{{ notification.title }}</ng-container>
-    </h2>
-    @if (notification.message) {
-      <p>{{ notification.message }}</p>
-    }
-    @if (notification.dismissible) {
-      <button type="button" class="btn notification-close" (click)="hideNotification(notification.id)">
-        <it-icon name="close"></it-icon>
-        <span class="visually-hidden">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>
-      </button>
-    }
-  </div>
-}

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

@@ -1,3 +0,0 @@
-.notification {
-  z-index: 10000;
-}

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

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

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

@@ -1,123 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { ItNotificationService } from '../../../services/notification/notification.service';
-import { Notification, NotificationPosition, NotificationType } from '../../../interfaces/core';
-import { Notification as BSNotification } from 'bootstrap-italia';
-import { IconName } from '../../../interfaces/icon';
-import { ItIconComponent } from '../../utils/icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-notifications',
-  templateUrl: './notifications.component.html',
-  styleUrls: ['./notifications.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ItIconComponent, TranslateModule],
-})
-export class ItNotificationsComponent implements OnDestroy {
-  /**
-   * Default notifications duration (milliseconds)
-   * @default 8000
-   */
-  @Input() duration: number = 8000;
-
-  /**
-   * Default notifications position
-   */
-  @Input() position: NotificationPosition | undefined;
-
-  /**
-   * Default notifications is dismissible
-   * @default true
-   */
-  @Input({ transform: inputToBoolean }) dismissible: boolean = true;
-
-  private subscription: Subscription;
-  private notificationCount: number = 0;
-  protected notifications: Array<Notification & { id: string }> = [];
-
-  constructor(
-    private readonly _changeDetectorRef: ChangeDetectorRef,
-    private readonly _notificationService: ItNotificationService
-  ) {
-    this.subscription = this._notificationService.onNotification().subscribe(notification => {
-      if (!notification.duration) {
-        notification.duration = this.duration; // Add duration if not is set
-      }
-      if (!notification.position && this.position) {
-        notification.position = this.position; // Add position if not is set
-      }
-      if (notification.dismissible === undefined && this.dismissible) {
-        notification.dismissible = true; // Add dismissible if not is set
-      }
-      if (!notification.icon) {
-        notification.icon = this.getNotificationIcon(notification);
-      }
-
-      const newNotification = {
-        ...notification,
-        id: `${notification.type}-${this.notificationCount++}-notification`,
-      };
-      this.notifications.push(newNotification);
-      this._changeDetectorRef.detectChanges();
-
-      setTimeout(() => {
-        // Show the notification
-        new BSNotification(document.getElementById(newNotification.id)!, {
-          timeout: notification.duration,
-        }).show();
-
-        // Clear notification after the duration
-        setTimeout(() => {
-          const index = this.notifications.findIndex(n => n.id === newNotification.id);
-          if (index > -1) {
-            this.notifications.splice(index, 1);
-            if (!this.notifications.length) {
-              this.notificationCount = 0;
-            }
-            this._changeDetectorRef.detectChanges();
-          }
-        }, notification.duration);
-      }, 200);
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-
-  protected get NotificationType(): typeof NotificationType {
-    return NotificationType;
-  }
-
-  /**
-   * Hide the notification
-   * @param id
-   */
-  protected hideNotification(id: string): void {
-    BSNotification.getInstance(document.getElementById(id)!)?.hide();
-  }
-
-  /**
-   * Retrieve the icon name by notification type
-   * @param notification the notification
-   * @protected
-   */
-  private getNotificationIcon(notification: Notification): IconName | undefined {
-    switch (notification.type) {
-      case NotificationType.Success:
-        return 'check-circle';
-      case NotificationType.Error:
-        return 'close-circle';
-      case NotificationType.Warning:
-        return 'error';
-      case NotificationType.Info:
-        return 'info-circle';
-      case NotificationType.Standard:
-      default:
-        return undefined;
-    }
-  }
-}

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

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

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

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