design-angular-kit 1.2.0 → 1.2.1

package/src/lib/components/navigation/navscroll/navscroll.store.ts

@@ -0,0 +1,96 @@
+import { BehaviorSubject, distinctUntilChanged, map, Subject } from 'rxjs';
+import { NavscrollItem } from './navscroll.model';
+import { flattenNavscrollItems, search } from './navscroll.utils';
+
+interface NavscrollState {
+  items: Set<NavscrollItem>;
+  active: Array<NavscrollItem>;
+  selected?: NavscrollItem;
+  progressBar: number;
+  isMobile: boolean;
+}
+
+export class NavscrollStore {
+  readonly #state = new BehaviorSubject<NavscrollState>({
+    items: new Set<NavscrollItem>(),
+    active: [],
+    selected: undefined,
+    progressBar: 0,
+    isMobile: false,
+  });
+
+  readonly #state$ = this.#state.asObservable();
+
+  readonly selected = this.#state$.pipe(
+    map(({ selected }) => selected),
+    distinctUntilChanged()
+  );
+
+  readonly progressBar = this.#state$.pipe(
+    map(({ progressBar }) => progressBar),
+    distinctUntilChanged()
+  );
+
+  readonly isMobile = this.#state$.pipe(
+    map(({ isMobile }) => isMobile),
+    distinctUntilChanged()
+  );
+
+  readonly #menuItemSelected = new Subject();
+
+  readonly menuItemSelected = this.#menuItemSelected.asObservable();
+
+  init(navscrollItems: Array<NavscrollItem>) {
+    const flattenItems = flattenNavscrollItems(navscrollItems);
+    //the first item is selected by default
+    const selected = ((flattenItems && flattenItems.length && flattenItems[0]) as NavscrollItem) ?? undefined;
+
+    const state = {
+      items: new Set(flattenItems),
+      active: selected ? [selected] : [],
+      selected: selected,
+      progressBar: 0,
+      isMobile: false,
+    };
+
+    this.#state.next(state);
+  }
+
+  setActive(item: NavscrollItem) {
+    const { items } = this.#state.value;
+
+    const active = search(items, item);
+    const state = this.#state.value;
+    this.#state.next({ ...state, items, selected: item, active });
+  }
+
+  isActive$(item: NavscrollItem) {
+    return this.#state.asObservable().pipe(map(state => state.active.includes(item)));
+  }
+
+  updateProgressBar(container: HTMLElement) {
+    if (!container) {
+      return;
+    }
+    const offset = Math.abs(container.getBoundingClientRect().top);
+    const height = container.getBoundingClientRect().height;
+    const scrollAmount = (offset / height) * 100;
+    const scrollValue = Math.min(100, Math.max(0, scrollAmount));
+    const state = this.#state.value;
+    this.#state.next({
+      ...state,
+      progressBar: container.getBoundingClientRect().y > 0 ? 0 : scrollValue,
+    });
+  }
+
+  selectMenuItem() {
+    this.#menuItemSelected.next(undefined);
+  }
+
+  setMobile({ innerWidth }: { innerWidth: number }) {
+    const isLessThan992px = innerWidth < 992;
+    const isMobile = isLessThan992px;
+    const state = this.#state.value;
+    this.#state.next({ ...state, isMobile });
+  }
+}

package/src/lib/components/navigation/navscroll/navscroll.utils.ts

@@ -0,0 +1,28 @@
+import { NavscrollItem, NavscrollItems } from './navscroll.model';
+
+function searchFn(items: Set<NavscrollItem>, item: NavscrollItem): Array<NavscrollItem> {
+  //ricerca
+  const nodes = Array.from(items);
+  const parent = nodes.find(i => i.childs.includes(item));
+  const ancestors = parent?.childs?.length ? searchFn(items, parent) : [];
+  return [item, ...ancestors];
+}
+
+function flattenNavscrollItemsFn(items: NavscrollItems): NavscrollItems {
+  const result: NavscrollItems = [];
+
+  function flatten(items: NavscrollItems): void {
+    for (const item of items) {
+      result.push(item);
+      if (item.childs && item.childs.length > 0) {
+        flatten(item.childs);
+      }
+    }
+  }
+
+  flatten(items);
+  return result;
+}
+
+export const search = searchFn;
+export const flattenNavscrollItems = flattenNavscrollItemsFn;

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

@@ -0,0 +1,11 @@
+@if (header) {
+  <h3>{{ header }}</h3>
+}
+<div class="sidebar-linklist-wrapper">
+  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->
+  <ng-content></ng-content>
+</div>
+<div class="sidebar-linklist-wrapper linklist-secondary">
+  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->
+  <ng-content select="[secondary]"></ng-content>
+</div>

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

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

package/src/lib/components/navigation/sidebar/sidebar.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  selector: 'it-sidebar',
+  standalone: true,
+  imports: [],
+  templateUrl: './sidebar.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItSidebarComponent {
+  /**
+   * Per creare una sidebar con linea separatrice a destra è sufficiente aggiungere la classe
+   */
+  @Input({ transform: inputToBoolean })
+  @HostBinding('class.it-line-right-side')
+  public withRightLine = false;
+
+  /**
+   * Per creare una sidebar con linea separatrice a sinistra è sufficiente aggiungere la classe
+   */
+  @Input({ transform: inputToBoolean })
+  @HostBinding('class.it-line-left-side')
+  public withLeftLine = false;
+
+  /**
+   * Per cambiare il tema della sidebar e renderla scura
+   */
+  @Input({ transform: inputToBoolean })
+  @HostBinding('class.theme-dark')
+  public dark = false;
+
+  /**
+   * L'intestazione della sidebar
+   */
+  @Input() public header?: string;
+
+  @HostBinding('class') componentClass = 'd-block sidebar-wrapper';
+}

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

@@ -0,0 +1,15 @@
+@if (nav) {
+  <nav class="skiplinks">
+    <ul>
+      <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+    </ul>
+  </nav>
+} @else {
+  <div class="skiplinks">
+    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+  </div>
+}
+
+<ng-template #linkContent>
+  <ng-content></ng-content>
+</ng-template>

package/src/lib/components/navigation/skiplink/skiplink/skiplink.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { inputToBoolean } from '../../../../utils/coercion';
+import { ItLinkComponent } from '../../../core/link/link.component';
+
+@Component({
+  standalone: true,
+  selector: 'it-skiplink',
+  templateUrl: './skiplink.component.html',
+  exportAs: 'itSkipLink',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent],
+})
+export class ItSkiplinkComponent {
+  /**
+   * Aria label for `nav` mode
+   * @default 'Scorciatoie di navigazione'
+   */
+  @Input() ariaLabel: string = 'Scorciatoie di navigazione';
+
+  /**
+   * If `true` nav mode is enabled
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) nav?: boolean;
+}

package/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html

@@ -0,0 +1,15 @@
+@if (inNav) {
+  <li class="visually-hidden-focusable">
+    <it-link [href]="href" [externalLink]="externalLink">
+      <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+    </it-link>
+  </li>
+} @else {
+  <it-link class="visually-hidden-focusable" [href]="href" [externalLink]="externalLink">
+    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+  </it-link>
+}
+
+<ng-template #linkContent>
+  <ng-content></ng-content>
+</ng-template>

package/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, Host, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { inputToBoolean } from '../../../../utils/coercion';
+import { ItLinkComponent } from '../../../core/link/link.component';
+import { ItSkiplinkComponent } from '../skiplink/skiplink.component';
+
+@Component({
+  standalone: true,
+  selector: 'it-skiplink-item',
+  templateUrl: './skiplink-item.component.html',
+  exportAs: 'itSkipLinkItem',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent],
+})
+export class ItSkiplinkItemComponent {
+  /**
+   * 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;
+  inNav: boolean;
+
+  constructor(@Host() parent: ItSkiplinkComponent) {
+    this.inNav = parent.nav ? true : false;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItSkiplinkComponent } from './skiplink/skiplink.component';
+import { ItSkiplinkItemComponent } from './skiplink-item/skiplink-item.component';
+
+const skiplinkComponents = [ItSkiplinkComponent, ItSkiplinkItemComponent];
+
+@NgModule({
+  imports: skiplinkComponents,
+  exports: skiplinkComponents,
+})
+export class ItSkiplinkModule {}

package/src/lib/components/utils/error-page/error-page.component.html

@@ -0,0 +1,33 @@
+<div class="container text-center mt-5">
+  @if (errorCode && showErrorCode) {
+    <h1>{{ errorCode }}</h1>
+  }
+  <h2>
+    @if (!errorTitle && isDefaultErrorCode) {
+      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}
+    } @else {
+      {{ errorTitle || 'it.errors.generic' | translate }}
+    }
+  </h2>
+
+  <p class="mt-3 w-75 mx-auto">
+    @if (!errorDescription && isDefaultErrorCode) {
+      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}
+    } @else {
+      {{ errorDescription || 'it.errors.generic-support-message' | translate }}
+    }
+  </p>
+
+  @if (showBackButton || showHomeButton) {
+    <div class="mt-5">
+      @if (showBackButton) {
+        <it-back-button></it-back-button>
+      }
+      @if (showHomeButton) {
+        <a itButton="outline-primary" class="ms-3" routerLink="/" title="{{ 'it.utils.error-page.go-to-homepage' | translate }}">
+          {{ 'it.utils.error-page.go-to-homepage' | translate }}
+        </a>
+      }
+    </div>
+  }
+</div>

package/src/lib/components/utils/error-page/error-page.component.spec.ts

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

package/src/lib/components/utils/error-page/error-page.component.ts

@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItBackButtonComponent } from '../../navigation/back-button/back-button.component';
+import { ItButtonDirective } from '../../core/button/button.directive';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-error-page',
+  templateUrl: './error-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule, RouterLink, ItBackButtonComponent, ItButtonDirective],
+})
+export class ItErrorPageComponent {
+  /**
+   * The error code to show
+   */
+  @Input() errorCode: number | 404 | 403 | 500 | undefined;
+
+  /**
+   * Show/Hide error code
+   * @default true - show
+   */
+  @Input({ transform: inputToBoolean }) showErrorCode?: boolean = true;
+
+  /**
+   * Custom error title
+   * - If set it will be displayed instead of the default title.
+   * - It is possible to use i18n keys
+   */
+  @Input() errorTitle: string | undefined;
+
+  /**
+   * Custom error description
+   * - If set it will be displayed instead of the default description.
+   * - It is possible to use i18n keys
+   */
+  @Input() errorDescription: string | undefined;
+
+  /**
+   * Show/Hide back button
+   * @default true - show
+   */
+  @Input({ transform: inputToBoolean }) showBackButton?: boolean = true;
+
+  /**
+   * Show/Hide home button
+   * @default true - show
+   */
+  @Input({ transform: inputToBoolean }) showHomeButton?: boolean = true;
+
+  constructor(private readonly route: ActivatedRoute) {
+    this.route.data.subscribe(data => {
+      if (!this.errorCode && data['errorCode']) {
+        this.errorCode = data['errorCode']; // Get errorCode from route data
+      }
+      if (data['showErrorCode'] !== undefined) {
+        this.showErrorCode = data['showErrorCode']; // Get showErrorCode from route data
+      }
+      if (!this.errorTitle && data['errorTitle']) {
+        this.errorTitle = data['errorTitle']; // Get errorTitle from route data
+      }
+      if (!this.errorDescription && data['errorDescription']) {
+        this.errorDescription = data['errorDescription']; // Get errorDescription from route data
+      }
+      if (data['showBackButton'] !== undefined) {
+        this.showBackButton = data['showBackButton']; // Get showBackButton from route data
+      }
+      if (data['showHomeButton'] !== undefined) {
+        this.showHomeButton = data['showHomeButton']; // Get showHomeButton from route data
+      }
+    });
+  }
+
+  get isDefaultErrorCode(): boolean {
+    return this.errorCode === 404 || this.errorCode === 403 || this.errorCode === 500;
+  }
+}

package/src/lib/components/utils/icon/icon.component.html

@@ -0,0 +1,6 @@
+<svg [attr.role]="role" [attr.aria-hidden]="isAriaHidden" [attr.aria-label]="title || labelWaria" [class]="iconClass">
+  @if (title || labelWaria) {
+    <title>{{ title || labelWaria }}</title>
+  }
+  <use [attr.href]="iconHref" [attr.xlink:href]="iconHref"></use>
+</svg>

package/src/lib/components/utils/icon/icon.component.spec.ts

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

package/src/lib/components/utils/icon/icon.component.ts

@@ -0,0 +1,95 @@
+import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
+import { IconColor, IconName, IconSize } from '../../../interfaces/icon';
+import { inputToBoolean } from '../../../utils/coercion';
+import { IT_ASSET_BASE_PATH } from '../../../interfaces/design-angular-kit-config';
+
+@Component({
+  standalone: true,
+  selector: 'it-icon',
+  templateUrl: './icon.component.html',
+  styles: ':host {display: contents;}',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItIconComponent {
+  /**
+   * The icon name
+   */
+  @Input({ required: true }) name!: IconName;
+
+  /**
+   * The icon size
+   */
+  @Input() size: IconSize | undefined;
+
+  /**
+   * The icon color
+   */
+  @Input() color: IconColor | undefined;
+
+  /**
+   * Create a padding proportional to the size of the surrounding icon.
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) padded?: boolean;
+
+  /**
+   * Custom class of svg
+   */
+  @Input() svgClass: string | undefined;
+
+  /**
+   * Title of the icon
+   */
+  @Input() title: string | undefined;
+
+  /**
+   * Custom Waria label
+   */
+  @Input() labelWaria: string | undefined;
+
+  /**
+   * Return the icon href
+   */
+  protected get iconHref(): string {
+    return `${this.assetBasePath}/dist/svg/sprites.svg#it-${this.name}`;
+  }
+
+  /**
+   * Return the icon class
+   */
+  protected get iconClass(): string {
+    let iconClass = 'icon';
+    if (this.size) {
+      iconClass += ` icon-${this.size}`;
+    }
+    if (this.color) {
+      iconClass += ` icon-${this.color}`;
+    }
+    if (this.padded) {
+      iconClass += ` icon-padded`;
+    }
+    if (this.svgClass) {
+      iconClass += ` ${this.svgClass}`;
+    }
+    return iconClass;
+  }
+
+  /**
+   * The bootstrap-italia asset folder path
+   * @default ./bootstrap-italia
+   */
+  protected assetBasePath: string;
+
+  get isAriaHidden(): boolean {
+    return this.labelWaria == undefined && this.title == undefined;
+  }
+
+  get role(): string | null {
+    return this.labelWaria == undefined && this.title == undefined ? null : 'img';
+  }
+
+  constructor() {
+    this.assetBasePath = inject(IT_ASSET_BASE_PATH);
+  }
+}

package/src/lib/components/utils/language-switcher/language-switcher.component.html

@@ -0,0 +1,21 @@
+<it-dropdown [mode]="mode">
+  <ng-container button>
+    <span class="visually-hidden">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>
+    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>
+  </ng-container>
+
+  @if (availableLanguages) {
+    <ng-container list>
+      @for (lang of availableLanguages; track lang.code) {
+        <it-dropdown-item (click)="changeLanguage(lang.code)" [active]="lang.code === (currentLang$ | async)?.code">
+          {{ lang.label }}
+          @if (lang.code === (currentLang$ | async)?.code) {
+            <span class="visually-hidden">
+              {{ 'it.utils.selected' | translate }}
+            </span>
+          }
+        </it-dropdown-item>
+      }
+    </ng-container>
+  }
+</it-dropdown>

package/src/lib/components/utils/language-switcher/language-switcher.component.spec.ts

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

package/src/lib/components/utils/language-switcher/language-switcher.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { map, Observable, startWith } from 'rxjs';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { AvailableLanguage } from '../../../interfaces/utils';
+import { AsyncPipe } from '@angular/common';
+import { ItDropdownModule } from '../../core/dropdown/dropdown.module';
+
+@Component({
+  standalone: true,
+  selector: 'it-language-switcher',
+  templateUrl: './language-switcher.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AsyncPipe, TranslateModule, ItDropdownModule],
+})
+export class ItLanguageSwitcherComponent implements OnInit {
+  /**
+   * The available languages
+   * @default The languages available through TranslateService (ngx-translate)
+   */
+  @Input() availableLanguages: Array<AvailableLanguage> | undefined;
+
+  /**
+   * Dropdown mode
+   */
+  @Input() mode: 'button' | 'link' | 'nav' = 'link';
+
+  protected currentLang$: Observable<AvailableLanguage | undefined>;
+
+  constructor(private readonly translateService: TranslateService) {
+    this.currentLang$ = this.translateService.onLangChange.pipe(
+      startWith({ lang: translateService.currentLang }),
+      map(event => this.availableLanguages?.find(l => l.code === event.lang))
+    );
+  }
+
+  ngOnInit(): void {
+    if (!this.availableLanguages) {
+      this.availableLanguages = this.translateService.getLangs().map(lang => ({
+        code: lang,
+        label: lang,
+        ...(lang === 'it' && { label: 'ITA' }),
+        ...(lang === 'en' && { label: 'ENG' }),
+      }));
+    } else {
+      this.translateService.addLangs(this.availableLanguages.map(l => l.code)); // Adds custom languages
+    }
+  }
+
+  /**
+   * Change the current language
+   * @param lang the language code
+   */
+  public changeLanguage(lang: string): void {
+    this.translateService.use(lang);
+  }
+}