design-angular-kit 1.2.0 → 1.2.1

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { ItDimmerComponent } from './dimmer.component';
+import { ItDimmerIconComponent } from './dimmer-icon/dimmer-icon.component';
+import { ItDimmerButtonsComponent } from './dimmer-buttons/dimmer-buttons.component';
+
+const dimmerComponents = [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent];
+
+@NgModule({
+  imports: dimmerComponents,
+  exports: dimmerComponents,
+})
+export class ItDimmerModule {}

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

@@ -0,0 +1,45 @@
+<div class="dropdown {{ direction }}" [class.nav-item]="mode === 'nav'" [class.megamenu]="megamenu">
+  @if (mode === 'button') {
+    <button
+      #dropdownButton
+      [id]="id"
+      [class]="buttonClass"
+      type="button"
+      data-bs-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false">
+      <ng-container *ngTemplateOutlet="buttonContent"></ng-container>
+      <it-icon svgClass="icon-expand" name="expand" size="sm" [color]="this.color ? 'light' : 'primary'"></it-icon>
+    </button>
+  } @else {
+    <a
+      #dropdownButton
+      [id]="id"
+      [class.btn]="mode === 'link'"
+      [class.btn-dropdown]="mode === 'link'"
+      [class.nav-link]="mode === 'nav'"
+      class="dropdown-toggle"
+      role="button"
+      data-bs-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false">
+      <ng-container *ngTemplateOutlet="buttonContent"></ng-container>
+      <it-icon svgClass="icon-expand" name="expand" size="sm"></it-icon>
+    </a>
+  }
+
+  <div class="dropdown-menu" [class.full-width]="fullWidth" [class.dark]="dark" [attr.aria-labelledby]="id">
+    <div class="link-list-wrapper">
+      <div class="link-list-heading">
+        <ng-content select="[listHeading]"></ng-content>
+      </div>
+      <ul class="link-list">
+        <ng-content select="[list]"></ng-content>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<ng-template #buttonContent>
+  <ng-content select="[button]"></ng-content>
+</ng-template>

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

@@ -0,0 +1,3 @@
+.link-list-heading:empty {
+  display: none;
+}

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

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

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

@@ -0,0 +1,186 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  QueryList,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { ButtonColor, DropdownDirection } from '../../../../interfaces/core';
+import { ItDropdownItemComponent } from '../dropdown-item/dropdown-item.component';
+import { Dropdown } from 'bootstrap-italia';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { NgTemplateOutlet } from '@angular/common';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-dropdown',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.scss'],
+  exportAs: 'itDropdown',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, NgTemplateOutlet],
+})
+export class ItDropdownComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {
+  /**
+   * Dropdown mode
+   */
+  @Input() mode: 'button' | 'link' | 'nav' = 'button';
+
+  /**
+   * Button color
+   */
+  @Input() color?: ButtonColor;
+
+  /**
+   * To open menu items to:
+   * - <strong>dropup</strong>: up
+   * - <strong>dropend</strong>: right
+   * - <strong>dropstart</strong>: left
+   */
+  @Input() direction: DropdownDirection | undefined;
+
+  /**
+   * To get a dropdown menu as wide as the element containing the dropdown button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) fullWidth?: boolean;
+
+  /**
+   * Contains a Megamenu element
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) megamenu?: boolean;
+
+  /**
+   * Dark menu style
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) dark?: boolean;
+
+  /**
+   * The dropdown items
+   */
+  @ContentChildren(ItDropdownItemComponent) items?: QueryList<ItDropdownItemComponent>;
+
+  /**
+   * Fires immediately when the show instance method is called.
+   */
+  @Output() showEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * Fired when the dropdown has been made visible to the user and CSS transitions have completed.
+   */
+  @Output() shownEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * Fires immediately when the hide instance method has been called.
+   */
+  @Output() hideEvent: EventEmitter<Event> = new EventEmitter();
+
+  /**
+   * Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
+   */
+  @Output() hiddenEvent: EventEmitter<Event> = new EventEmitter();
+
+  private dropdown?: Dropdown;
+
+  @ViewChild('dropdownButton') private dropdownButton?: ElementRef<HTMLButtonElement>;
+
+  get buttonClass(): string {
+    let btnClass = 'btn dropdown-toggle';
+    if (this.color) {
+      btnClass += ` btn-${this.color}`;
+    } else {
+      btnClass += ` btn-dropdown`;
+    }
+
+    return btnClass;
+  }
+
+  override ngOnChanges(changes: SimpleChanges): void {
+    if (changes['dark'] && !changes['dark'].firstChange) {
+      this.setDarkItems();
+    }
+    if (changes['mode'] && !changes['mode'].firstChange) {
+      this.updateListeners();
+    }
+    super.ngOnChanges(changes);
+  }
+
+  override ngAfterViewInit() {
+    super.ngAfterViewInit();
+    this.setDarkItems();
+    this.updateListeners();
+    this.items?.forEach(item => {
+      item.mode = this.mode;
+    });
+  }
+
+  /**
+   * Set child items dark mode
+   * @private
+   */
+  private setDarkItems(): void {
+    if (this.dark !== undefined) {
+      this.items?.forEach(item => {
+        item.setDark(!!this.dark);
+      });
+    }
+  }
+
+  private updateListeners(): void {
+    if (this.dropdownButton) {
+      const element = this.dropdownButton.nativeElement;
+      this.dropdown = Dropdown.getOrCreateInstance(element);
+
+      element.addEventListener('show.bs.dropdown', event => this.showEvent.emit(event));
+      element.addEventListener('shown.bs.dropdown', event => this.shownEvent.emit(event));
+      element.addEventListener('hide.bs.dropdown', event => this.hideEvent.emit(event));
+      element.addEventListener('hidden.bs.dropdown', event => this.hiddenEvent.emit(event));
+    }
+  }
+
+  /**
+   * Toggles the dropdown menu of a given navbar or tabbed navigation.
+   */
+  public toggle(): void {
+    this.dropdown?.toggle();
+  }
+
+  /**
+   * Shows the dropdown menu of a given navbar or tabbed navigation.
+   */
+  public show(): void {
+    this.dropdown?.show();
+  }
+
+  /**
+   * Hides the dropdown menu of a given navbar or tabbed navigation.
+   */
+  public hide(): void {
+    this.dropdown?.hide();
+  }
+
+  /**
+   * Updates the position of an element's dropdown.
+   */
+  public update(): void {
+    this.dropdown?.update();
+  }
+
+  /**
+   * Destroys an element's dropdown. (Removes stored data on the DOM element)
+   */
+  public dispose(): void {
+    this.dropdown?.dispose();
+  }
+}

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

@@ -0,0 +1,18 @@
+<li>
+  @if (divider) {
+    <span class="divider"></span>
+  } @else {
+    <it-link [class]="linkClass" [id]="id" [href]="href" [externalLink]="externalLink" [disabled]="disabled">
+      @if (iconName && iconPosition === 'left') {
+        <it-icon size="sm" [name]="iconName" [color]="isDark ? 'light' : 'primary'" [svgClass]="iconPosition"></it-icon>
+      }
+      <span><ng-content></ng-content></span>
+      @if (iconName && iconPosition === 'right') {
+        <it-icon size="sm" [name]="iconName" [color]="isDark ? 'light' : 'primary'" [svgClass]="iconPosition"></it-icon>
+      }
+      @if (active) {
+        <span class="visually-hidden">{{ 'it.core.active' | translate }}</span>
+      }
+    </it-link>
+  }
+</li>

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

@@ -0,0 +1,4 @@
+.list-item.disabled {
+  pointer-events: none;
+  cursor: default;
+}

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

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

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

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IconName } from '../../../../interfaces/icon';
+import { ItLinkComponent } from '../../link/link.component';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-dropdown-item',
+  templateUrl: './dropdown-item.component.html',
+  styleUrls: ['./dropdown-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, TranslateModule, ItLinkComponent],
+})
+export class ItDropdownItemComponent extends ItLinkComponent {
+  /**
+   * Show divider
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) divider?: boolean;
+
+  /**
+   * Active item
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) active?: boolean;
+
+  /**
+   * To increase the size of links
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) large?: boolean;
+
+  /**
+   * The name of icon to show
+   */
+  @Input() iconName: IconName | undefined;
+
+  /**
+   * The icon position
+   * @default right
+   */
+  @Input() iconPosition: 'left' | 'right' = 'right';
+
+  /**
+   * Dropdown mode
+   */
+  @Input() mode?: 'button' | 'link' | 'nav' = 'button';
+
+  /**
+   * Change icon color if menu is dark
+   * @default false
+   */
+  isDark: boolean = false;
+
+  get linkClass(): string {
+    let linkClass = `list-item ${this.active ? 'active' : 'dropdown-item'}`;
+    if (this.mode === 'nav') {
+      linkClass += ' nav-link';
+    }
+    if (this.disabled) {
+      linkClass += ' disabled';
+    }
+    if (this.large) {
+      linkClass += ' large';
+    }
+    if (this.iconName) {
+      linkClass += ` ${this.iconPosition === 'right' ? 'right-icon' : 'left-icon'}`;
+    }
+
+    return linkClass;
+  }
+
+  setDark(dark: boolean): void {
+    if (this.isDark !== dark) {
+      this.isDark = dark;
+      this._changeDetectorRef.detectChanges();
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItDropdownComponent } from './dropdown/dropdown.component';
+import { ItDropdownItemComponent } from './dropdown-item/dropdown-item.component';
+
+const dropdownComponents = [ItDropdownComponent, ItDropdownItemComponent];
+
+@NgModule({
+  imports: dropdownComponents,
+  exports: dropdownComponents,
+})
+export class ItDropdownModule {}

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

@@ -0,0 +1,60 @@
+import { ItForwardDirective } from './forward.directive';
+import { Component, QueryList, ViewChildren } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  selector: 'it-unit-test',
+  template: `
+    <a href="#" [itForward]="'idH3'">first</a>
+    <a href="#" [itForward]="refH3">second</a>
+    <h3>Text H3</h3>
+  `,
+})
+class UnitTestComponent {
+  @ViewChildren(ItForwardDirective) directives: QueryList<ItForwardDirective>;
+}
+
+describe('ItForwardDirective', () => {
+  let component: UnitTestComponent;
+  let fixture: ComponentFixture<UnitTestComponent>;
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [UnitTestComponent],
+      imports: [ItForwardDirective],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UnitTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create an instance', () => {
+    const directive = new ItForwardDirective();
+    expect(directive).toBeTruthy();
+  });
+
+  it('should trigger this.document.querySelector(...)?.scrollIntoView() if i pass a string', () => {
+    component.directives.changes.subscribe(() => {
+      spyOn(
+        component.directives.first['document'].querySelector(<string>component.directives.first.itForward),
+        'scrollIntoView'
+      ).and.returnValue();
+      const aElement = fixture.debugElement.query(By.css('#firstA'));
+      aElement.nativeElement.click();
+      expect(
+        component.directives.first['document'].querySelector(<string>component.directives.first.itForward).scrollIntoView
+      ).toHaveBeenCalled();
+    });
+  });
+
+  it('should trigger this.itForward.scrollIntoView() if i pass an HTMLElement', async () => {
+    component.directives.changes.subscribe(() => {
+      const itForward = <HTMLElement>component.directives.last.itForward;
+      spyOn(itForward, 'scrollIntoView').and.returnValue();
+      const aElement = fixture.debugElement.query(By.css('#secondA'));
+      aElement.nativeElement.click();
+      expect(itForward.scrollIntoView).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+import { DOCUMENT } from '@angular/common';
+import { Directive, HostListener, Inject, Input } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[itForward]',
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+  host: { class: 'forward' },
+})
+export class ItForwardDirective {
+  /**
+   * Indica, se HTMLElement, l'elemento a cui navigare, o se stringa, il selettore che selezionerà l'elemento a cui navigare.
+   */
+  @Input() set itForward(value: HTMLElement | string | undefined) {
+    this._itForward = value;
+  }
+  get itForward(): HTMLElement | string | undefined {
+    return this._itForward;
+  }
+  private _itForward: HTMLElement | string | undefined = undefined;
+
+  constructor(@Inject(DOCUMENT) private document?: Document) {}
+
+  @HostListener('click', ['$event'])
+  onClick(event: any) {
+    event.preventDefault();
+    if (this.itForward) {
+      if (typeof this.itForward === 'string') {
+        this.document?.querySelector(this.itForward)?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'nearest',
+        });
+      } else if (this.itForward instanceof HTMLElement) {
+        this.itForward.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'nearest',
+        });
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+@if (!externalLink) {
+  <a [id]="id" [class]="class" [routerLinkActive]="'active'" [routerLink]="(disabled ? null : href)!">
+    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+  </a>
+} @else {
+  <a [id]="id" [class]="class" [attr.href]="disabled ? null : href">
+    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+  </a>
+}
+
+<ng-template #linkContent>
+  <ng-content></ng-content>
+</ng-template>

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

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

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

@@ -0,0 +1,54 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { ItAbstractComponent } from '../../../abstracts/abstract.component';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-link',
+  templateUrl: './link.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, RouterLinkActive, NgTemplateOutlet],
+})
+export class ItLinkComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {
+  /**
+   * The router link action
+   *
+   * Commands to pass to Router#createUrlTree.
+   * - array: commands to pass to Router#createUrlTree.
+   * - string: shorthand for array of commands with just the string, i.e. ['/route']
+   * - null|undefined: Disables the link by removing the href
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Input() href: any[] | string | null | undefined;
+
+  /**
+   * Is an external link (false to not use Angular router link)
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) externalLink?: boolean;
+
+  /**
+   * Is disabled link
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) disabled?: boolean;
+
+  /**
+   * Custom class
+   */
+  @Input() class: string = '';
+
+  override ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+    this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
+  }
+
+  override ngOnChanges(changes: SimpleChanges): void {
+    super.ngOnChanges(changes);
+    if (changes['class']) {
+      this._changeDetectorRef.markForCheck();
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+@if (!linkSubList) {
+  <div [class.multiline]="multiline" [class]="linkList ? 'link-list-wrapper' : 'it-list-wrapper'">
+    <ul [class]="linkList ? 'link-list' : 'it-list'">
+      <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
+    </ul>
+  </div>
+}
+@if (linkSubList) {
+  <ul class="link-sublist">
+    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
+  </ul>
+}
+<ng-template #contentTpl><ng-content></ng-content></ng-template>

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

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

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

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-list',
+  templateUrl: './list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet],
+})
+export class ItListComponent {
+  /**
+   * Add 'link-list' class for navigation menu
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) linkList?: boolean;
+
+  /**
+   * Add 'link-sublist' class for navigation menu
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) linkSubList?: boolean;
+
+  /**
+   * Add 'multiline' class for wrapper
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) multiline?: boolean;
+}