design-angular-kit 1.2.0 → 1.2.1

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

@@ -0,0 +1,107 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItIconComponent } from '../../utils/icon/icon.component';
+import { ItNavBarModule } from '../navbar/navbar.module';
+import { ItNavBarComponent } from '../navbar/navbar/navbar.component';
+
+import { ItButtonDirective } from '../../core/button/button.directive';
+import { inputToBoolean } from '../../../utils/coercion';
+import { HeaderSticky } from 'bootstrap-italia';
+
+@Component({
+  standalone: true,
+  selector: 'it-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule],
+})
+export class ItHeaderComponent implements AfterViewInit, OnChanges {
+  @Input({ transform: inputToBoolean }) light?: boolean;
+
+  @Input({ transform: inputToBoolean }) sticky?: boolean;
+
+  @Input({ transform: inputToBoolean }) showSlim?: boolean = true;
+
+  @Input({ transform: inputToBoolean }) smallHeader?: boolean = true;
+
+  @Input({ transform: inputToBoolean }) showSearch?: boolean = true;
+
+  @Input() slimTitle: string | undefined;
+  @Input() slimTitleLink: string | undefined = '#';
+
+  @Input() loginStyle: 'none' | 'default' | 'full' = 'none';
+
+  @Output() loginClick: EventEmitter<Event>;
+
+  @Output() searchClick: EventEmitter<Event>;
+
+  @ViewChild('headerWrapper') private headerWrapper?: ElementRef<HTMLButtonElement>;
+
+  @ViewChild(ItNavBarComponent) private itNavBarComponent?: ItNavBarComponent;
+
+  @Input({ transform: inputToBoolean }) megamenu?: boolean;
+  @Input({ transform: inputToBoolean }) expand?: boolean = true;
+
+  private stickyHeader?: HeaderSticky;
+
+  constructor() {
+    this.loginClick = new EventEmitter<Event>();
+    this.searchClick = new EventEmitter<Event>();
+  }
+
+  ngAfterViewInit() {
+    this.updateListeners();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['sticky'] && changes['sticky'].currentValue == true && !changes['sticky'].firstChange) {
+      this.updateListeners();
+    }
+    if (changes['sticky'] && changes['sticky'].currentValue == false) {
+      this.stickyHeader?._elementObj?._unsetSticky();
+      this.stickyHeader?._elementObj?.dispose();
+      delete this.stickyHeader;
+      this.stickyHeader = undefined;
+    }
+  }
+
+  updateListeners() {
+    if (!this.stickyHeader && this.headerWrapper && this.sticky) {
+      this.stickyHeader = new HeaderSticky(this.headerWrapper.nativeElement);
+    }
+  }
+
+  openNavBar() {
+    this.itNavBarComponent?.open();
+  }
+
+  closeNavBar() {
+    this.itNavBarComponent?.close();
+  }
+
+  protected emitLoginClick(event: Event): void {
+    event.preventDefault();
+    this.loginClick.emit(event);
+  }
+
+  protected emitSearchClick(event: Event): void {
+    event.preventDefault();
+    this.searchClick.emit(event);
+  }
+
+  toggleCollapse() {
+    this.itNavBarComponent?.toggleCollapse();
+  }
+}

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

@@ -0,0 +1,34 @@
+<div class="megamenu pb-5 pt-3 py-lg-0">
+  <div class="row">
+    @if (mode === 'left-section') {
+      <div class="col-xs-12 col-lg-4 px-0">
+        <div class="row">
+          <div class="col-12 it-vertical it-description pb-lg-3">
+            <div class="description-content ps-4 ps-sm-5 ms-3">
+              <ng-content select="[megamenuLeftZone]"></ng-content>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+    <div class="col-12" [class.col-lg-8]="mode !== 'normal'">
+      @if (header) {
+        <div class="it-heading-link-wrapper">
+          <ng-content select="[megamenuHeadingLink]"></ng-content>
+        </div>
+      }
+      <div class="row">
+        <ng-content select="[megamenuLinkList]"></ng-content>
+      </div>
+    </div>
+    @if (footer || mode === 'right-section') {
+      <div [class.col-xs-12]="mode === 'right-section'" [class.col-lg-4]="mode === 'right-section'" [class.px-0]="mode === 'right-section'">
+        <div [class.it-footer-link-wrapper]="footer" [class.it-footer-link-wrapper-vertical]="mode === 'right-section'">
+          <div class="d-flex flex-column justify-content-around" [class.flex-lg-row]="mode !== 'right-section'">
+            <ng-content select="[megamenuFooter]"></ng-content>
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+::ng-deep .theme-light-desk {
+  .nav-link::before {
+    background-color: #06c;
+  }
+}

package/src/lib/components/navigation/megamenu/megamenu.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-megamenu',
+  templateUrl: './megamenu.component.html',
+  styleUrls: ['./megamenu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet],
+})
+export class ItMegamenuComponent {
+  /**
+   * Megamenu mode
+   */
+  @Input() mode: 'right-section' | 'left-section' | 'normal' = 'normal';
+
+  /**
+   * To show Megamenu header
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) header?: boolean;
+
+  /**
+   * To show Megamenu footer
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) footer?: boolean;
+}

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

@@ -0,0 +1,28 @@
+<nav
+  class="navbar"
+  [class.navbar-expand-lg]="expand"
+  [class.has-megamenu]="megamenu"
+  [attr.aria-label]="'it.navbar.aria-label-main' | translate">
+  <button
+    (click)="toggleCollapse()"
+    #collapseButton
+    class="custom-navbar-toggler"
+    type="button"
+    [attr.aria-label]="'it.navbar.aria-label-toggle' | translate">
+    <it-icon name="burger"></it-icon>
+  </button>
+  <div #collapseView class="navbar-collapsable" style="display: none">
+    <div class="overlay" style="display: none"></div>
+    <div class="close-div">
+      <button class="btn close-menu" type="button">
+        <span class="visually-hidden">{{ 'it.navbar.hide' | translate }}</span>
+        <it-icon name="close-big"></it-icon>
+      </button>
+    </div>
+    <div class="menu-wrapper">
+      <ul class="navbar-nav">
+        <ng-content select="[navItems]"></ng-content>
+      </ul>
+    </div>
+  </div>
+</nav>

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

@@ -0,0 +1,45 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { ItButtonDirective } from '../../../core/button/button.directive';
+import { inputToBoolean } from '../../../../utils/coercion';
+import { NavBarCollapsible } from 'bootstrap-italia';
+
+@Component({
+  standalone: true,
+  selector: 'it-navbar',
+  templateUrl: './navbar.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule, ItIconComponent, ItButtonDirective],
+})
+export class ItNavBarComponent implements AfterViewInit {
+  @Input({ transform: inputToBoolean }) megamenu?: boolean;
+  @Input({ transform: inputToBoolean }) expand?: boolean = true;
+
+  @ViewChild('collapseButton') private collapseButton?: ElementRef<HTMLButtonElement>;
+  @ViewChild('collapseView') private collapseView?: ElementRef<HTMLButtonElement>;
+
+  private navbar?: NavBarCollapsible;
+
+  ngAfterViewInit() {
+    if (this.collapseButton && this.collapseView) {
+      this.navbar = NavBarCollapsible.getOrCreateInstance(this.collapseView.nativeElement);
+    }
+  }
+
+  get isOpen() {
+    return this.navbar?._isShown;
+  }
+
+  open() {
+    this.navbar?.show(this.collapseButton?.nativeElement);
+  }
+
+  close() {
+    this.navbar?.hide();
+  }
+
+  toggleCollapse() {
+    this.navbar?.toggle(this.collapseButton?.nativeElement);
+  }
+}

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

@@ -0,0 +1,3 @@
+<li class="nav-item">
+  <ng-content></ng-content>
+</li>

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

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'it-navbar-item',
+  templateUrl: './navbar-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ItNavBarItemComponent {}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItNavBarComponent } from './navbar/navbar.component';
+import { ItNavBarItemComponent } from './navbar-item/navbar-item.component';
+
+const navbarComponents = [ItNavBarComponent, ItNavBarItemComponent];
+
+@NgModule({
+  imports: navbarComponents,
+  exports: navbarComponents,
+})
+export class ItNavBarModule {}

package/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();
+  }
+}

package/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;
+}

package/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>

package/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;
+}

package/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() 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/{lib/components/navigation/navscroll/navscroll.model.d.ts → src/lib/components/navigation/navscroll/navscroll.model.ts}

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