design-angular-kit 1.2.0 → 1.2.1

package/src/lib/components/navigation/back-button/back-button.component.spec.ts

@@ -0,0 +1,91 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ItBackButtonComponent } from './back-button.component';
+import { tb_base } from '../../../../test';
+
+describe('ItBackButtonComponent', () => {
+  let component: ItBackButtonComponent;
+  let fixture: ComponentFixture<ItBackButtonComponent>;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule(tb_base)
+      .overrideComponent(ItBackButtonComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItBackButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('deve crearsi', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('deve essere di default un bottone', () => {
+    expect(component.buttonStyle).toBe('button');
+    const buttonElement = fixture.debugElement.query(By.css('button'));
+    expect(buttonElement).toBeTruthy();
+    const aElement = fixture.debugElement.query(By.css('a'));
+    expect(aElement).toBeFalsy();
+  });
+
+  it('deve poter essere un link', () => {
+    expect(component.buttonStyle).toBe('button');
+    component.buttonStyle = 'link';
+    fixture.detectChanges();
+    expect(component.buttonStyle).toBe('link');
+    const aElement = fixture.debugElement.query(By.css('a'));
+    expect(aElement).toBeTruthy();
+  });
+
+  it('il testo deve poter essere rimosso', () => {
+    expect(component.showText).toBe(true);
+    component.showText = false;
+    fixture.detectChanges();
+    expect(component.showText).toBe(false);
+    const visuallyElement = fixture.debugElement.query(By.css('.visually-hidden'));
+    expect(visuallyElement).toBeTruthy();
+  });
+
+  it("l'icona deve poter essere rimossa", () => {
+    component.showIcon = false;
+    fixture.detectChanges();
+    expect(component.showIcon).toBe(false);
+    const svgElement = fixture.debugElement.query(By.css('svg'));
+    expect(svgElement).toBeFalsy();
+  });
+
+  it('il click deve triggerare il location.back() se bottone', () => {
+    spyOn(component._location, 'back').and.returnValue();
+    fixture.detectChanges();
+    const buttonElement = fixture.debugElement.query(By.css('button'));
+    buttonElement.nativeElement.click();
+    expect(component._location.back).toHaveBeenCalled();
+  });
+
+  it('il click deve triggerare il location.back() se link', () => {
+    spyOn(component._location, 'back').and.returnValue();
+    component.buttonStyle = 'link';
+    fixture.detectChanges();
+    const aElement = fixture.debugElement.query(By.css('a'));
+    aElement.nativeElement.removeAttribute('href');
+    fixture.detectChanges();
+    aElement.nativeElement.click();
+    expect(component._location.back).toHaveBeenCalled();
+  });
+
+  it('se passo una callback backFn, al click deve essere lanciata lei', () => {
+    component.backFn = () => {};
+    component.buttonStyle = 'link';
+    fixture.detectChanges();
+    spyOn(component, 'backFn');
+    const aElement = fixture.debugElement.query(By.css('a'));
+    aElement.nativeElement.removeAttribute('href');
+    fixture.detectChanges();
+    aElement.nativeElement.click();
+    expect(component.backFn).toHaveBeenCalled();
+  });
+});

package/src/lib/components/navigation/back-button/back-button.component.ts

@@ -0,0 +1,67 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Location, NgTemplateOutlet } from '@angular/common';
+import { ItButtonDirective } from '../../core/button/button.directive';
+import { ItIconComponent } from '../../utils/icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-back-button',
+  templateUrl: './back-button.component.html',
+  exportAs: 'itBackButton',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet, ItButtonDirective, ItIconComponent, TranslateModule],
+})
+export class ItBackButtonComponent {
+  /**
+   * Back button style
+   * - <b>link</b>: use a link with icon and text
+   * - <b>button</b>: use a button with icon and text
+   * @default button
+   */
+  @Input() buttonStyle: 'link' | 'button' = 'button';
+
+  /**
+   * Button direction
+   * - <b>left</b>: Back direction
+   * - <b>up</b>: Upper direction
+   * @default left
+   */
+  @Input() direction: 'left' | 'up' = 'left';
+
+  /**
+   * Show/Hide icon
+   * @default true
+   */
+  @Input({ transform: inputToBoolean }) showIcon: boolean = true;
+
+  /**
+   * Show/Hide text
+   * @default true
+   */
+  @Input({ transform: inputToBoolean }) showText: boolean = true;
+
+  /**
+   * Custom back logic <br/>
+   *
+   * NOTE: to use 'this' need bind function  <br/>
+   * @example backCbFn = this.errorCallback.bind(this);
+   * (errorCallback is your function, pass backCbFn to the component)
+   */
+  @Input() backFn?: (location: Location) => void;
+
+  constructor(public readonly _location: Location) {}
+
+  /**
+   * Go back function
+   */
+  public goBack(event: Event): void {
+    event.preventDefault();
+    if (this.backFn) {
+      return this.backFn(this._location);
+    }
+
+    this._location.back();
+  }
+}

package/src/lib/components/navigation/back-to-top/back-to-top.component.html

@@ -0,0 +1,11 @@
+<a
+  #backToTop
+  [id]="id"
+  href="#"
+  [attr.aria-label]="ariaLabel"
+  class="back-to-top"
+  [class.back-to-top-small]="small"
+  [class.shadow]="shadow"
+  [class.dark]="dark">
+  <it-icon name="arrow-up" [color]="dark ? 'secondary' : 'light'"></it-icon>
+</a>

package/src/lib/components/navigation/back-to-top/back-to-top.component.spec.ts

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

package/src/lib/components/navigation/back-to-top/back-to-top.component.ts

@@ -0,0 +1,80 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { ItAbstractComponent } from '../../../abstracts/abstract.component';
+import { BackToTop } from 'bootstrap-italia';
+import { ItIconComponent } from '../../utils/icon/icon.component';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-back-to-top',
+  templateUrl: './back-to-top.component.html',
+  exportAs: 'itBackToTop',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent],
+})
+export class ItBackToTopComponent extends ItAbstractComponent implements AfterViewInit {
+  /**
+   * Aria label for the component
+   * @default 'Torna su'
+   */
+  @Input() ariaLabel: string = 'Torna su';
+
+  /**
+   * Show small button
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) small?: boolean;
+
+  /**
+   * Show shadow
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) shadow?: boolean;
+
+  /**
+   * Button usable button on a dark background
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) dark?: boolean;
+
+  private backToTop?: BackToTop;
+
+  @ViewChild('backToTop') private backToTopElement?: ElementRef<HTMLAnchorElement>;
+
+  override ngAfterViewInit() {
+    super.ngAfterViewInit();
+
+    if (this.backToTopElement) {
+      const element = this.backToTopElement.nativeElement;
+      this.backToTop = BackToTop.getOrCreateInstance(element);
+    }
+  }
+
+  /**
+   * Show button
+   */
+  public show(): void {
+    this.backToTop?.show();
+  }
+
+  /**
+   * Hide the button
+   */
+  public hide(): void {
+    this.backToTop?.hide();
+  }
+
+  /**
+   * Activates the scroll animation towards the Y coordinate indicated by the positionTop option
+   */
+  public scrollToTop(): void {
+    this.backToTop?.scrollToTop();
+  }
+
+  /**
+   * Eliminate component features
+   */
+  public dispose(): void {
+    this.backToTop?.dispose();
+  }
+}

package/src/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,23 @@
+<nav class="breadcrumb-container" [attr.aria-label]="'it.navigation.navigation-path' | translate">
+  @if (items) {
+    <ol class="breadcrumb" [class.dark]="dark" [class.px-3]="dark">
+      @for (item of items; track item; let isLast = $last) {
+        <li class="breadcrumb-item" [class.active]="item.active" [attr.aria-current]="item.active ? 'page' : null">
+          @if (item.iconName) {
+            <it-icon [name]="item.iconName" [color]="dark ? 'white' : 'secondary'" size="sm" svgClass="align-top me-1"></it-icon>
+          }
+          @if (!item.active && !isLast) {
+            <it-link [href]="item.href" [class]="item.class" [externalLink]="item.externalLink" [disabled]="item.disabled">
+              <ng-container *ngTemplateOutlet="item.htmlContent"></ng-container>
+            </it-link>
+          } @else {
+            <ng-container *ngTemplateOutlet="item.htmlContent"></ng-container>
+          }
+          @if (!isLast) {
+            <span class="separator">{{ separator }}</span>
+          }
+        </li>
+      }
+    </ol>
+  }
+</nav>

package/src/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.spec.ts

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

package/src/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,68 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Input,
+  OnDestroy,
+  QueryList,
+} from '@angular/core';
+import { ItBreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
+import { startWith, Subscription } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { ItLinkComponent } from '../../../core/link/link.component';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule, ItIconComponent, ItLinkComponent, NgTemplateOutlet],
+})
+export class ItBreadcrumbComponent implements AfterViewInit, OnDestroy {
+  /**
+   * The character to use as separator
+   * @default /
+   */
+  @Input() separator: string = '/';
+
+  /**
+   * Dark style
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) dark?: boolean;
+
+  /**
+   * The tab items
+   */
+  @ContentChildren(ItBreadcrumbItemComponent) items?: QueryList<ItBreadcrumbItemComponent>;
+
+  private itemSubscriptions?: Array<Subscription>;
+
+  constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {}
+
+  ngAfterViewInit(): void {
+    this.items?.changes
+      .pipe(
+        // When breadcrumb items changes (dynamic add/remove)
+        startWith(undefined)
+      )
+      .subscribe(() => {
+        this.itemSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
+        this.itemSubscriptions = this.items?.map(item =>
+          item.valueChanges.subscribe(() => {
+            this._changeDetectorRef.detectChanges(); // DetectChanges when breadcrumb item attributes changes
+          })
+        );
+        this._changeDetectorRef.detectChanges(); // Force update html render
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.itemSubscriptions?.forEach(item => item.unsubscribe());
+  }
+}

package/src/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.html

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

package/src/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.spec.ts

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

package/src/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
+import { IconName } from '../../../../interfaces/icon';
+import { ItLinkComponent } from '../../../core/link/link.component';
+import { inputToBoolean } from '../../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-breadcrumb-item',
+  templateUrl: './breadcrumb-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItBreadcrumbItemComponent extends ItLinkComponent {
+  /**
+   * Is active breadcrumb item
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) active?: boolean;
+
+  /**
+   * The name of icon to show
+   */
+  @Input() iconName: IconName | undefined;
+
+  /**
+   * The content of item
+   */
+  @ViewChild(TemplateRef) public htmlContent!: TemplateRef<any>;
+}

package/src/lib/components/navigation/breadcrumbs/breadcrumbs.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+import { ItBreadcrumbItemComponent } from './breadcrumb-item/breadcrumb-item.component';
+
+const breadcrumb = [ItBreadcrumbComponent, ItBreadcrumbItemComponent];
+
+@NgModule({
+  imports: breadcrumb,
+  exports: breadcrumb,
+})
+export class ItBreadcrumbsModule {}

package/src/lib/components/navigation/header/header.component.html

@@ -0,0 +1,102 @@
+<header
+  #headerWrapper
+  class="it-header-wrapper"
+  [class.it-header-sticky]="sticky"
+  data-bs-position-type="fixed"
+  data-bs-sticky-class-name="is-sticky"
+  data-bs-target="#header-nav-wrapper">
+  @if (showSlim) {
+    <div class="it-header-slim-wrapper" [class.theme-light]="light">
+      <div class="container-xxl">
+        <div class="row">
+          <div class="col-12">
+            <div class="it-header-slim-wrapper-content">
+              <a class="d-none d-lg-block navbar-brand" [href]="slimTitleLink" [target]="slimTitleLink !== '#' ? '_blank' : '_self'">
+                {{ slimTitle }}
+              </a>
+              <div class="nav-mobile">
+                <nav [attr.aria-label]="'it.navigation.secondary-navigation' | translate">
+                  <a
+                    class="it-opener d-lg-none"
+                    data-bs-toggle="collapse"
+                    href="#menuC1"
+                    role="button"
+                    aria-expanded="false"
+                    aria-controls="menuC1">
+                    <span>{{ slimTitle }}</span>
+                    <it-icon name="expand"></it-icon>
+                  </a>
+                  <div class="link-list-wrapper collapse" id="menuC1">
+                    <ng-content select="[slimLinkList]"></ng-content>
+                  </div>
+                </nav>
+              </div>
+              <div class="it-header-slim-right-zone">
+                <ng-content select="[slimRightZone]"></ng-content>
+                @if (loginStyle === 'default') {
+                  <div class="it-access-top-wrapper">
+                    <a class="btn btn-primary btn-sm" (click)="emitLoginClick($event)" href="#">
+                      {{ 'it.navigation.login' | translate }}
+                    </a>
+                  </div>
+                }
+                @if (loginStyle === 'full') {
+                  <a itButton="primary" class="btn-full btn-icon" (click)="emitLoginClick($event)" href="#">
+                    <span class="rounded-icon">
+                      <it-icon name="user" color="primary"></it-icon>
+                    </span>
+                    <span class="d-none d-lg-block">{{ 'it.navigation.full-login' | translate }}</span>
+                  </a>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+  <div class="it-nav-wrapper">
+    <div class="it-header-center-wrapper" [class.it-small-header]="smallHeader" [class.theme-light]="light">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <div class="it-header-center-content-wrapper">
+              <div class="it-brand-wrapper">
+                <ng-content select="[brand]"></ng-content>
+              </div>
+              <div class="it-right-zone">
+                <ng-content select="[rightZone]"></ng-content>
+
+                @if (showSearch) {
+                  <div class="it-search-wrapper">
+                    <span class="d-none d-md-block">{{ 'it.navigation.search' | translate }}</span>
+                    <a
+                      href="#"
+                      class="search-link rounded-icon"
+                      [attr.aria-label]="'it.navigation.website-search' | translate"
+                      (click)="emitSearchClick($event)">
+                      <it-icon name="search"></it-icon>
+                    </a>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="it-header-navbar-wrapper" [class.theme-light-desk]="light" id="header-nav-wrapper">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <it-navbar [megamenu]="megamenu" [expand]="expand">
+              <ng-container navItems>
+                <ng-content select="[navItems]"></ng-content>
+              </ng-container>
+            </it-navbar>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>

package/src/lib/components/navigation/header/header.component.scss

@@ -0,0 +1,3 @@
+.nav-mobile:has(.link-list-wrapper:empty) {
+  display: none;
+}

package/src/lib/components/navigation/header/header.component.spec.ts

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