design-angular-kit 1.2.0 → 1.2.1

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

@@ -0,0 +1,42 @@
+<li>
+  <ng-template #content>
+    <div class="it-rounded-icon">
+      <ng-content select="[icon]"></ng-content>
+    </div>
+
+    @if (avatar) {
+      <div class="avatar size-lg">
+        <img [attr.src]="avatar" alt="avatar" />
+      </div>
+    }
+
+    @if (image) {
+      <div class="it-thumb">
+        <img [attr.src]="image" alt="thumb" />
+      </div>
+    }
+
+    <div class="it-right-zone">
+      <ng-content></ng-content>
+      <ng-content select="[action]"></ng-content>
+
+      <span class="it-multiple">
+        <span class="metadata">
+          <ng-content select="[metadata]"></ng-content>
+        </span>
+
+        <ng-content select="[multiple]"></ng-content>
+      </span>
+    </div>
+  </ng-template>
+
+  @if (!href) {
+    <div [class]="itemClass">
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+    </div>
+  } @else {
+    <it-link [class]="itemClass" [href]="href" [externalLink]="!!externalLink" [disabled]="!!disabled">
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+    </it-link>
+  }
+</li>

package/src/lib/components/core/list/list-item/list-item.component.scss

@@ -0,0 +1,16 @@
+.metadata:empty,
+.it-rounded-icon:empty {
+  display: none;
+}
+
+:host ::ng-deep {
+  it-icon + .it-multiple {
+    display: none !important;
+  }
+  .list-item-title-icon-wrapper + .it-multiple {
+    display: none !important;
+  }
+  p + .it-multiple {
+    display: none !important;
+  }
+}

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

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

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

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
+import { ItLinkComponent } from '../../link/link.component';
+import { NgTemplateOutlet } from '@angular/common';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-list-item',
+  templateUrl: './list-item.component.html',
+  styleUrls: ['./list-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet, ItLinkComponent],
+})
+export class ItListItemComponent extends ItLinkComponent {
+  constructor(private elRef: ElementRef) {
+    super();
+  }
+
+  /**
+   * Add active class
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) active?: boolean;
+
+  /**
+   * Add large class
+   */
+  @Input() size?: 'large' | 'medium';
+
+  /**
+   * Add icon-left class
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) iconLeft?: boolean;
+
+  /**
+   * Add icon-right class
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) iconRight?: boolean;
+
+  /**
+   * The avatar url
+   */
+  @Input() avatar: URL | undefined;
+
+  /**
+   * The thumb image url
+   */
+  @Input() image: URL | undefined;
+
+  get itemClass(): string {
+    const inSidebar: boolean = this.elRef.nativeElement.closest('.sidebar-linklist-wrapper') ? true : false;
+    let itemClass = 'list-item';
+    if (this.disabled) {
+      itemClass += ` disabled`;
+    }
+    if (this.active) {
+      itemClass += ` active`;
+    }
+    if (this.size) {
+      itemClass += ` ${this.size}`;
+    }
+    if (this.iconLeft) {
+      itemClass += inSidebar ? ` left-icon` : ` icon-left`;
+    }
+    if (this.iconRight) {
+      itemClass += inSidebar ? ` right-icon` : ` icon-right`;
+    }
+    if (this.class) {
+      itemClass += ` ${this.class}`;
+    }
+    return itemClass;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItListComponent } from './list/list.component';
+import { ItListItemComponent } from './list-item/list-item.component';
+
+const listComponents = [ItListComponent, ItListItemComponent];
+
+@NgModule({
+  imports: listComponents,
+  exports: listComponents,
+})
+export class ItListModule {}

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

@@ -0,0 +1,36 @@
+<div
+  #modalElement
+  [id]="id"
+  [class]="modalClass"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [attr.aria-labelledby]="id + '-title'"
+  [attr.aria-describedby]="id + '-description'">
+  <div [class]="dialogClass">
+    <div class="modal-content" role="document">
+      <div class="modal-header">
+        <ng-content select="[beforeTitle]"></ng-content>
+
+        <h2 class="modal-title h5" id="{{ id }}-title">
+          <ng-content select="[modalTitle]"></ng-content>
+        </h2>
+
+        @if (closeButton) {
+          <button type="button" class="btn-close" data-bs-dismiss="modal" [attr.aria-label]="'it.core.close-modal' | translate"></button>
+        }
+      </div>
+
+      <div class="modal-body">
+        <div id="{{ id }}-description">
+          <ng-content select="[description]"></ng-content>
+        </div>
+        <ng-content></ng-content>
+      </div>
+
+      <div class="modal-footer" [class.modal-footer-shadow]="footerShadow">
+        <ng-content select="[footer]"></ng-content>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+.modal-footer:empty {
+  display: none;
+}

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

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

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

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

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

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

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

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

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