design-angular-kit 1.2.1 → 1.2.2

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

@@ -1,143 +0,0 @@
-import { AsyncPipe, NgClass, NgTemplateOutlet, ViewportScroller } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  ElementRef,
-  HostListener,
-  inject,
-  Input,
-  OnInit,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
-import { delay, filter, map, tap, withLatestFrom } from 'rxjs';
-import { ItNavscrollListItemsComponent } from './navscroll-list-items.component';
-import { NavscrollItem } from './navscroll.model';
-import { NavscrollStore } from './navscroll.store';
-
-/**
- * Navscroll
- * @description Show a list of links to anchor of the document.
- */
-@Component({
-  selector: 'it-navscroll',
-  standalone: true,
-  imports: [
-    ItNavscrollListItemsComponent,
-    AsyncPipe,
-    NgTemplateOutlet,
-    RouterLink,
-    RouterLinkActive,
-    RouterLinkWithHref,
-    AsyncPipe,
-    NgClass,
-  ],
-  templateUrl: './navscroll.component.html',
-  styleUrl: './navscroll.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [NavscrollStore],
-})
-export class ItNavscrollComponent implements OnInit {
-  /**
-   * Header of the Navscroll
-   */
-  @Input() header = '';
-  /**
-   * A list of links
-   */
-  @Input() items!: Array<NavscrollItem>;
-  /**
-   * Border position
-   * @default left
-   */
-  @Input() borderPosition: 'left' | 'right' = 'left';
-  /**
-   * Alignment
-   * @default top
-   */
-  @Input() alignment: 'top' | 'bottom' = 'top';
-
-  /**
-   * Theme
-   * @default light
-   */
-  @Input() theme: 'light' | 'dark' = 'light';
-
-  /**
-   * Custom template for the content section
-   */
-  @Input()
-  pageSectionsTemplate?: TemplateRef<any>;
-
-  @HostListener('window:scroll', ['$event']) // for window scroll events
-  onScroll() {
-    const sectionContainer = this.#elementRef.nativeElement.querySelector('.it-page-sections-container');
-    this.#store.updateProgressBar(sectionContainer);
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onResize() {
-    this.#setMobile();
-  }
-
-  @ViewChild('toggleButtonRef')
-  readonly toggleButtonRef!: ElementRef<HTMLButtonElement>;
-
-  readonly #store = inject(NavscrollStore);
-
-  readonly #scroller = inject(ViewportScroller);
-
-  readonly #destroyRef = inject(DestroyRef);
-
-  readonly #elementRef = inject(ElementRef);
-
-  readonly selectedTitle = this.#store.selected.pipe(map(selected => selected?.title ?? ''));
-
-  readonly progressBarValue = this.#store.progressBar;
-
-  readonly isMobile = this.#store.isMobile;
-
-  constructor() {
-    this.#store.menuItemSelected
-      .pipe(
-        takeUntilDestroyed(),
-        withLatestFrom(this.isMobile),
-        tap(v => {
-          const isMobile = v[1];
-          if (isMobile) {
-            this.toggleButtonRef.nativeElement.click();
-          }
-        })
-      )
-      .subscribe();
-  }
-
-  ngOnInit(): void {
-    this.#initViewScrollerSubscription();
-    this.#store.init(this.items);
-    this.#setMobile();
-  }
-
-  #initViewScrollerSubscription() {
-    this.#store.selected
-      .pipe(
-        takeUntilDestroyed(this.#destroyRef),
-        filter(selected => Boolean(selected)),
-        map(v => v as NavscrollItem),
-        delay(0), //WA
-        tap({
-          next: ({ href }) => {
-            this.#scroller.scrollToAnchor(href);
-          },
-        })
-      )
-      .subscribe();
-  }
-
-  #setMobile() {
-    this.#store.setMobile(window);
-  }
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-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();
-  });
-});