Feat: create component navscroll

projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-item.component.ts

@@ -0,0 +1,95 @@
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  IsActiveMatchOptions,
+  NavigationEnd,
+  Router,
+  Event as RouterEvent,
+  RouterLink,
+  RouterLinkActive,
+  RouterLinkWithHref,
+  Scroll,
+} from '@angular/router';
+import { AsyncSubject, filter, switchMap, tap } from 'rxjs';
+import { ItNavscrollListItemsComponent } from './navscroll-list-items.component';
+import { NavscrollItem } from './navscroll.model';
+import { NavscrollStore } from './navscroll.store';
+
+const ROUTER_LINK_ACTIVE_OPTIONS: IsActiveMatchOptions = {
+  fragment: 'exact',
+  paths: 'exact',
+  queryParams: 'exact',
+  matrixParams: 'exact',
+};
+
+@Component({
+  selector: 'it-navscroll-list-item',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive, RouterLinkWithHref, ItNavscrollListItemsComponent, AsyncPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <a
+      class="nav-link"
+      [class.active]="active | async"
+      [routerLink]="[]"
+      routerLinkActive
+      [fragment]="item?.href"
+      [routerLinkActiveOptions]="routerLinkActiveOptions"
+      ariaCurrentWhenActive="page"
+      #rtl="routerLinkActive"
+      (click)="clickHandler($event)"
+      ><span>{{ item?.title }}</span></a
+    >
+  `,
+})
+export class ItNavscrollListItemComponent implements OnInit {
+  @Input() item!: NavscrollItem;
+
+  @Output() readonly checkActive = new EventEmitter<NavscrollItem>();
+
+  @ViewChild('rtl')
+  readonly rtl: any;
+
+  readonly routerLinkActiveOptions = ROUTER_LINK_ACTIVE_OPTIONS;
+
+  readonly #initIsActive = new AsyncSubject<NavscrollItem>();
+
+  readonly active = this.#initIsActive.asObservable().pipe(switchMap(item => this.#store.isActive$(item)));
+
+  readonly #router = inject(Router);
+
+  readonly #store = inject(NavscrollStore);
+
+  readonly #destroyRef = inject(DestroyRef);
+
+  ngOnInit() {
+    this.#initIsActiveSub();
+    this.#router.events
+      .pipe(
+        takeUntilDestroyed(this.#destroyRef),
+        filter((event: RouterEvent) => {
+          const isNavigationEndEvent = event instanceof NavigationEnd;
+          const isScrollEvent = event instanceof Scroll && (event as Scroll).routerEvent instanceof NavigationEnd;
+          return isNavigationEndEvent || isScrollEvent;
+        }),
+        tap(() => {
+          if (this.rtl?.isActive) {
+            this.#store.setActive(this.item);
+          }
+        })
+      )
+      .subscribe();
+  }
+
+  clickHandler(event: Event) {
+    event.preventDefault();
+    this.#store.selectMenuItem();
+    this.#router.navigate([], { fragment: this.item.href });
+  }
+
+  #initIsActiveSub() {
+    this.#initIsActive.next(this.item);
+    this.#initIsActive.complete();
+  }
+}

projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-items.component.ts

@@ -0,0 +1,27 @@
+import { JsonPipe, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
+import { ItNavscrollListItemComponent } from './navscroll-list-item.component';
+import { NavscrollItems } from './navscroll.model';
+
+@Component({
+  selector: 'it-navscroll-list-items',
+  standalone: true,
+  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, RouterLinkWithHref, JsonPipe, ItNavscrollListItemComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ul class="link-list">
+      @for (item of items; track item.href) {
+        <li class="nav-item">
+          <it-navscroll-list-item [item]="item"></it-navscroll-list-item>
+          @if (item.childs?.length) {
+            <it-navscroll-list-items [items]="item.childs"></it-navscroll-list-items>
+          }
+        </li>
+      }
+    </ul>
+  `,
+})
+export class ItNavscrollListItemsComponent {
+  @Input() items!: NavscrollItems;
+}

projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html

@@ -0,0 +1,101 @@
+<div class="container py-lg-5">
+  <div class="row">
+    <div class="col-12 col-lg-4">
+      <div class="it-navscroll-sticky" [ngClass]="{ 'it-navscroll-sticky-mobile': isMobile | async }" data-bs-stackable="true">
+        <nav
+          class="navbar it-navscroll-wrapper navbar-expand-lg"
+          [class.it-top-navscroll]="alignment === 'top'"
+          [class.it-bottom-navscroll]="alignment === 'bottom'"
+          [class.it-left-side]="borderPosition === 'left'"
+          [class.it-right-side]="borderPosition === 'right'"
+          [class.theme-dark-mobile]="theme === 'dark'"
+          [class.theme-dark-desktop]="theme === 'dark'">
+          <button
+            class="custom-navbar-toggler"
+            type="button"
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+            data-bs-toggle="navbarcollapsible"
+            data-bs-target="#navbarNav"
+            #toggleButtonRef>
+            <span class="it-list"></span>{{ selectedTitle | async }}
+          </button>
+          <div class="progress custom-navbar-progressbar">
+            <div
+              class="progress-bar it-navscroll-progressbar"
+              role="progressbar"
+              [style.width.%]="progressBarValue | async"
+              [attr.aria-valuenow]="progressBarValue | async"
+              aria-valuemin="0"
+              aria-valuemax="100"></div>
+          </div>
+          <div class="navbar-collapsable" id="navbarNav">
+            <div class="overlay"></div>
+            <div class="close-div visually-hidden">
+              <button class="btn close-menu" type="button"><span class="it-close"></span>Chiudi</button>
+            </div>
+            <button type="button" class="it-back-button btn w-100 text-start">
+              <svg class="icon icon-sm icon-primary align-top">
+                <use
+                  href="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left"
+                  xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left"></use>
+              </svg>
+              <span>Indietro</span>
+            </button>
+            <div class="menu-wrapper">
+              <div class="link-list-wrapper">
+                <h3>{{ header }}</h3>
+                <div class="progress">
+                  <div
+                    class="progress-bar it-navscroll-progressbar"
+                    role="progressbar"
+                    [style.width.%]="progressBarValue | async"
+                    [attr.aria-valuenow]="progressBarValue | async"
+                    aria-valuemin="0"
+                    aria-valuemax="100"></div>
+                </div>
+                <it-navscroll-list-items [items]="items"></it-navscroll-list-items>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+    <div class="col-12 col-lg-8 it-page-sections-container">
+      <ng-container
+        *ngTemplateOutlet="pageSectionsTemplate ? pageSectionsTemplate : defaultPageSectionsTemplate; context: { items: items }">
+      </ng-container>
+    </div>
+  </div>
+</div>
+
+<ng-template #defaultPageSectionsTemplate let-items="items">
+  @for (item of items; track item.href) {
+    <ng-container *ngTemplateOutlet="paragraphTemplate; context: { item: item, level: 1 }"></ng-container>
+  }
+</ng-template>
+
+<ng-template #paragraphTemplate let-item="item" let-level="level" let-nextLevel="level+1">
+  @switch (level) {
+    @case (1) {
+      <h2 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h2>
+    }
+    @case (2) {
+      <h3 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h3>
+    }
+    @case (3) {
+      <h4 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h4>
+    }
+    @case (4) {
+      <h5 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h5>
+    }
+    @default {
+      <h6 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h6>
+    }
+  }
+  <p>{{ item.text }}</p>
+  @for (item of item.childs; track item.href) {
+    <ng-container *ngTemplateOutlet="paragraphTemplate; context: { item: item, level: nextLevel }"></ng-container>
+  }
+</ng-template>

projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.scss

@@ -0,0 +1,9 @@
+.it-navscroll-sticky {
+  // data-bs-toggle="sticky"
+  position: sticky;
+  top: 0;
+}
+
+.it-navscroll-sticky-mobile {
+  z-index: 1020;
+}

projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.ts

@@ -0,0 +1,143 @@
+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() readonly header = '';
+  /**
+   * A list of links
+   */
+  @Input() readonly items!: Array<NavscrollItem>;
+  /**
+   * Border position
+   * @default left
+   */
+  @Input() readonly borderPosition: 'left' | 'right' = 'left';
+  /**
+   * Alignment
+   * @default top
+   */
+  @Input() readonly alignment: 'top' | 'bottom' = 'top';
+
+  /**
+   * Theme
+   * @default light
+   */
+  @Input() readonly 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);
+  }
+}

projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.model.ts

@@ -0,0 +1,12 @@
+export interface NavscrollItem {
+  title: string;
+  text: string;
+  href: string;
+  childs: NavscrollItems;
+}
+
+export type NavscrollItems = Array<NavscrollItem>;
+
+export interface NavscrollItemActive {
+  active: boolean;
+}