design-angular-kit 1.2.1 → 1.2.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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