design-angular-kit 1.1.0 → 1.1.2

package/fesm2022/design-angular-kit.mjs

@@ -1,85 +1,23 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, APP_INITIALIZER, importProvidersFrom, makeEnvironmentProviders, inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Component, Input, Output, booleanAttribute, ChangeDetectionStrategy, ViewChild, TemplateRef, HostBinding, ContentChildren, NgModule, Directive, Optional, Host, HostListener, Inject, Injectable, Self, ViewChildren, ViewEncapsulation, Pipe } from '@angular/core';
-import { loadFonts, Collapse, Alert, Dropdown, CarouselBI, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, BackToTop, NavBarCollapsible, HeaderSticky } from 'bootstrap-italia';
+import { inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Component, Input, Output, booleanAttribute, ChangeDetectionStrategy, ViewChild, InjectionToken, TemplateRef, HostBinding, ContentChildren, NgModule, Directive, Optional, Host, HostListener, Inject, Injectable, Self, ViewChildren, ViewEncapsulation, Pipe, HostAttributeToken, DestroyRef, APP_INITIALIZER, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
+import { Collapse, Alert, Dropdown, CarouselBI, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, BackToTop, NavBarCollapsible, HeaderSticky, loadFonts } from 'bootstrap-italia';
 import * as i1 from '@ngx-translate/core';
-import { TranslateModule, TranslateLoader, TranslateService, TranslatePipe } from '@ngx-translate/core';
-import { provideHttpClient, HttpClient } from '@angular/common/http';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { TranslateModule, TranslatePipe, TranslateLoader, TranslateService } from '@ngx-translate/core';
 import * as i1$3 from '@angular/common';
-import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, LowerCasePipe, NgOptimizedImage, DatePipe } from '@angular/common';
+import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, LowerCasePipe, DatePipe, NgOptimizedImage, TitleCasePipe, JsonPipe, ViewportScroller } from '@angular/common';
 import * as i1$4 from '@angular/router';
-import { RouterLink } from '@angular/router';
-import { startWith, Subject, filter, debounceTime, distinctUntilChanged, tap, switchMap, of, merge, map, Observable, take, forkJoin, timer, takeWhile, shareReplay } from 'rxjs';
+import { RouterLink, Router, NavigationEnd, Scroll, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
+import { startWith, Subject, filter, debounceTime, distinctUntilChanged, tap, switchMap, of, merge, map, Observable, take, forkJoin, BehaviorSubject, shareReplay, combineLatest, skip, AsyncSubject, withLatestFrom, delay, timer, takeWhile } from 'rxjs';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$1 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule, NgModel, FormControlName } from '@angular/forms';
 import * as i1$2 from '@angular/platform-browser';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { provideHttpClient, HttpClient } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { map as map$1 } from 'rxjs/operators';
 
-/**
- * The bootstrap-italia asset folder path
- * @default ./bootstrap-italia
- */
-const IT_ASSET_BASE_PATH = new InjectionToken('it-asset-base-path');
-
-/**
- * Configures DesignAngularKit library
- * @param config the DesignAngularKit config
- */
-function provideDesignAngularKit(config) {
-    let assetBasePath = './bootstrap-italia';
-    if (config?.assetBasePath) {
-        assetBasePath = config.assetBasePath.endsWith('/')
-            ? config.assetBasePath.substring(0, config.assetBasePath.lastIndexOf('/'))
-            : config.assetBasePath;
-    }
-    const providers = [
-        {
-            provide: IT_ASSET_BASE_PATH,
-            useValue: assetBasePath,
-        },
-        provideAnimationsAsync(),
-        provideHttpClient(),
-    ];
-    if (config?.loadFont !== false) {
-        // Add provider to initialize the bootstrap-italia font
-        providers.push({
-            provide: APP_INITIALIZER,
-            useFactory: () => {
-                return () => {
-                    loadFonts(`${assetBasePath}/dist/fonts`);
-                };
-            },
-            multi: true,
-        });
-    }
-    // Add provider to initialize the TranslateModule
-    const langPrefix = `${assetBasePath}/i18n/`;
-    const langSuffix = `.json`; // TODO: add ?v${version} to prevent cache loading on version change
-    providers.push(importProvidersFrom(TranslateModule.forRoot({
-        loader: config?.translateLoader?.(langPrefix, langSuffix) ?? {
-            provide: TranslateLoader,
-            useFactory: (http) => new TranslateHttpLoader(http, langPrefix, langSuffix),
-            deps: [HttpClient],
-        },
-        defaultLanguage: 'it',
-        useDefaultLang: true,
-    })));
-    // Add provider to initialize library default languages
-    providers.push({
-        provide: APP_INITIALIZER,
-        useFactory: (translateService) => {
-            return () => {
-                translateService.addLangs(['it', 'en']); // Adds 'it' and 'en' as available languages.
-            };
-        },
-        multi: true,
-        deps: [TranslateService],
-    });
-    return makeEnvironmentProviders(providers);
-}
-
 class ItAbstractComponent {
     /**
      * Counter of active instances
@@ -288,6 +226,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 args: ['collapse']
             }] } });
 
+/**
+ * The bootstrap-italia asset folder path
+ * @default ./bootstrap-italia
+ */
+const IT_ASSET_BASE_PATH = new InjectionToken('it-asset-base-path');
+
 class ItIconComponent {
     /**
      * Return the icon href
@@ -1400,9 +1344,9 @@ class ItDimmerComponent {
         this.elementRef?.nativeElement?.parentElement?.classList?.add('dimmable');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDimmerComponent, isStandalone: true, selector: "it-dimmer", inputs: { active: "active", color: "color" }, ngImport: i0, template: "@if (active) {\n  <div class=\"dimmer\" @fade [ngClass]=\"[color]\">\n    <div class=\"dimmer-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDimmerComponent, isStandalone: true, selector: "it-dimmer", inputs: { active: "active", color: "color" }, ngImport: i0, template: "@if (active) {\n  <div class=\"dimmer\" @fade [ngClass]=\"[color, 'show']\">\n    <div class=\"dimmer-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('fade', [
-                transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.92 }))]),
+                transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.9 }))]),
                 transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1411,10 +1355,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             type: Component,
             args: [{ standalone: true, selector: 'it-dimmer', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('fade', [
-                            transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.92 }))]),
+                            transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.9 }))]),
                             transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
                         ]),
-                    ], imports: [NgClass], template: "@if (active) {\n  <div class=\"dimmer\" @fade [ngClass]=\"[color]\">\n    <div class=\"dimmer-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n" }]
+                    ], imports: [NgClass], template: "@if (active) {\n  <div class=\"dimmer\" @fade [ngClass]=\"[color, 'show']\">\n    <div class=\"dimmer-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
                 type: Input
             }], color: [{
@@ -1605,29 +1549,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 }]
         }] });
 
-class ItMegamenuComponent {
-    constructor() {
-        /**
-         * Megamenu mode
-         */
-        this.mode = 'normal';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItMegamenuComponent, isStandalone: true, selector: "it-megamenu", inputs: { mode: "mode", header: ["header", "header", inputToBoolean], footer: ["footer", "footer", inputToBoolean] }, ngImport: i0, template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'it-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"] }]
-        }], propDecorators: { mode: [{
-                type: Input
-            }], header: [{
-                type: Input,
-                args: [{ transform: inputToBoolean }]
-            }], footer: [{
-                type: Input,
-                args: [{ transform: inputToBoolean }]
-            }] } });
-
 /**
  * Modal windows
  * @description To show featured content, notifications to users, or personalized content.
@@ -3465,6 +3386,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 }]
         }] });
 
+/**
+ * Timeline Item
+ * @description Represents a single event for Timeline component.
+ */
+class ItTimelineItemComponent extends ItAbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Timeline element reference date format
+         * @default dd/MM/yyyy
+         */
+        this.dateFormat = 'dd/MM/yyyy';
+        /**
+         * Timeline element PIN type
+         * @default none
+         */
+        this.pinType = 'default';
+        /**
+         * Timeline element PIN icon
+         * @default code-circle
+         */
+        this.pinIcon = 'code-circle';
+        /**
+         * Timeline element show detail link
+         * @default false
+         */
+        this.showReadMore = false;
+        /** Timeline element detail link
+         * @default #
+         */
+        this.readMoreLink = '#';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTimelineItemComponent, isStandalone: true, selector: "it-timeline-item", inputs: { title: "title", text: "text", signature: "signature", eventDate: "eventDate", dateFormat: "dateFormat", pinText: "pinText", pinType: "pinType", pinIcon: "pinIcon", categoryTitle: "categoryTitle", categoryLink: "categoryLink", showReadMore: ["showReadMore", "showReadMore", inputToBoolean], readMoreLink: "readMoreLink" }, usesInheritance: true, ngImport: i0, template: "<div class=\"timeline-element\">\n  @if (pinType === 'now') {\n    <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n  }\n  <div class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n    <div class=\"pin-icon\">\n      @if (pinIcon) {\n        <it-icon [name]=\"pinIcon\"></it-icon>\n      } @else {\n        <it-icon name=\"code-circle\"></it-icon>\n      }\n    </div>\n    <div class=\"pin-text\">\n      <span>{{ pinText }}</span>\n    </div>\n  </div>\n  <div class=\"card-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if ((categoryTitle && categoryLink) || eventDate) {\n          <div class=\"category-top\">\n            @if (categoryTitle) {\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h5 class=\"card-title\">{{ title }}</h5>\n        <p class=\"card-text\">{{ text }}</p>\n        @if (signature) {\n          <span class=\"card-signature\">{{ signature }}</span>\n        }\n        @if (showReadMore) {\n          <a class=\"read-more\" [href]=\"readMoreLink\">\n            <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n            <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n            <it-icon name=\"arrow-right\"></it-icon>\n          </a>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-timeline-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, DatePipe, TranslateModule, NgClass], template: "<div class=\"timeline-element\">\n  @if (pinType === 'now') {\n    <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n  }\n  <div class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n    <div class=\"pin-icon\">\n      @if (pinIcon) {\n        <it-icon [name]=\"pinIcon\"></it-icon>\n      } @else {\n        <it-icon name=\"code-circle\"></it-icon>\n      }\n    </div>\n    <div class=\"pin-text\">\n      <span>{{ pinText }}</span>\n    </div>\n  </div>\n  <div class=\"card-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if ((categoryTitle && categoryLink) || eventDate) {\n          <div class=\"category-top\">\n            @if (categoryTitle) {\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h5 class=\"card-title\">{{ title }}</h5>\n        <p class=\"card-text\">{{ text }}</p>\n        @if (signature) {\n          <span class=\"card-signature\">{{ signature }}</span>\n        }\n        @if (showReadMore) {\n          <a class=\"read-more\" [href]=\"readMoreLink\">\n            <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n            <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n            <it-icon name=\"arrow-right\"></it-icon>\n          </a>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], signature: [{
+                type: Input
+            }], eventDate: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], pinText: [{
+                type: Input,
+                args: [{ required: true }]
+            }], pinType: [{
+                type: Input
+            }], pinIcon: [{
+                type: Input
+            }], categoryTitle: [{
+                type: Input
+            }], categoryLink: [{
+                type: Input
+            }], showReadMore: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }], readMoreLink: [{
+                type: Input
+            }] } });
+
+/**
+ * Timeline
+ * @description Build timeline for chronological representation of events.
+ */
+class ItTimelineComponent extends ItAbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Timeline elements array
+         * @default []
+         */
+        this.timelineElements = [];
+        /**
+         * Default date format for timeline element reference date
+         * @default dd/MM/yyyy
+         */
+        this.dateFormat = 'dd/MM/yyyy';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTimelineComponent, isStandalone: true, selector: "it-timeline", inputs: { timelineElements: "timelineElements", dateFormat: "dateFormat" }, usesInheritance: true, ngImport: i0, template: "<div class=\"it-timeline-wrapper\">\n  <div class=\"row\">\n    @for (element of timelineElements; track $index) {\n      <div class=\"col-12\">\n        <it-timeline-item\n          [title]=\"element.title\"\n          [text]=\"element.text\"\n          [signature]=\"element.signature\"\n          [pinType]=\"element.pin?.type\"\n          [pinIcon]=\"element.pin?.icon\"\n          [pinText]=\"element.pin?.text\"\n          [eventDate]=\"element.eventDate\"\n          [dateFormat]=\"dateFormat\"\n          [categoryTitle]=\"element.category?.title\"\n          [categoryLink]=\"element.category?.link\"\n          [showReadMore]=\"!!element.link?.length\"\n          [readMoreLink]=\"element.link\" />\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItTimelineItemComponent, selector: "it-timeline-item", inputs: ["title", "text", "signature", "eventDate", "dateFormat", "pinText", "pinType", "pinIcon", "categoryTitle", "categoryLink", "showReadMore", "readMoreLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent], template: "<div class=\"it-timeline-wrapper\">\n  <div class=\"row\">\n    @for (element of timelineElements; track $index) {\n      <div class=\"col-12\">\n        <it-timeline-item\n          [title]=\"element.title\"\n          [text]=\"element.text\"\n          [signature]=\"element.signature\"\n          [pinType]=\"element.pin?.type\"\n          [pinIcon]=\"element.pin?.icon\"\n          [pinText]=\"element.pin?.text\"\n          [eventDate]=\"element.eventDate\"\n          [dateFormat]=\"dateFormat\"\n          [categoryTitle]=\"element.category?.title\"\n          [categoryLink]=\"element.category?.link\"\n          [showReadMore]=\"!!element.link?.length\"\n          [readMoreLink]=\"element.link\" />\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { timelineElements: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }] } });
+
+const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent];
+class ItTimelineModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, imports: [ItTimelineComponent, ItTimelineItemComponent], exports: [ItTimelineComponent, ItTimelineItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, imports: [timelineComponents] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: timelineComponents,
+                    exports: timelineComponents,
+                }]
+        }] });
+
 class ItTooltipDirective {
     /**
      * Define the tooltip title
@@ -4494,52 +4527,510 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 type: Output
             }] } });
 
-const formComponents = [
-    ItAutocompleteComponent,
-    ItCheckboxComponent,
-    ItInputComponent,
-    ItPasswordInputComponent,
-    ItRadioButtonComponent,
-    ItRangeComponent,
-    ItRatingComponent,
-    ItSelectComponent,
-    ItTextareaComponent,
-    ItUploadDragDropComponent,
-    ItUploadFileListComponent,
-];
-class ItFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [ItAutocompleteComponent,
-            ItCheckboxComponent,
-            ItInputComponent,
-            ItPasswordInputComponent,
-            ItRadioButtonComponent,
-            ItRangeComponent,
-            ItRatingComponent,
-            ItSelectComponent,
-            ItTextareaComponent,
-            ItUploadDragDropComponent,
-            ItUploadFileListComponent], exports: [ItAutocompleteComponent,
-            ItCheckboxComponent,
-            ItInputComponent,
-            ItPasswordInputComponent,
-            ItRadioButtonComponent,
-            ItRangeComponent,
-            ItRatingComponent,
-            ItSelectComponent,
-            ItTextareaComponent,
-            ItUploadDragDropComponent,
-            ItUploadFileListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [formComponents] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: formComponents,
-                    exports: formComponents,
-                }]
-        }] });
-
+//#region private utility functions
+const generateSelectAll = (checked, items) => {
+    const selected = new Set();
+    if (checked) {
+        items.forEach(item => selected.add(item));
+    }
+    return selected;
+};
+const updateSelected = (set, item) => {
+    if (set.has(item)) {
+        set.delete(item);
+    }
+    else {
+        set.add(item);
+    }
+    return set;
+};
+//#endregion
+//#region reducers
+const init = (state, { source, target }) => ({
+    ...state,
+    initialItems: {
+        source: [...source],
+        target: [...target],
+    },
+    current: {
+        source: [...source],
+        target: [...target],
+    },
+});
+const transfer = (state) => {
+    return {
+        ...state,
+        current: {
+            ...state.current,
+            source: state.current.source.filter(i => !state.selections.source.has(i)),
+            target: Array.from(new Set([...state.current.target, ...Array.from(state.selections.source)])),
+        },
+        selections: {
+            ...state.selections,
+            source: new Set(),
+        },
+        operationsEnabled: {
+            ...state.operationsEnabled,
+            transfer: false,
+            reset: true,
+        },
+    };
+};
+const backtransfer = (state) => {
+    return {
+        ...state,
+        current: {
+            ...state.current,
+            target: state.current.target.filter(i => !state.selections.target.has(i)),
+            source: Array.from(new Set([...state.current.source, ...Array.from(state.selections.target)])),
+        },
+        selections: {
+            ...state.selections,
+            target: new Set(),
+        },
+        operationsEnabled: {
+            ...state.operationsEnabled,
+            backtransfer: false,
+            reset: true,
+        },
+    };
+};
+const reset = (state) => {
+    return {
+        ...state,
+        current: {
+            source: [...state.initialItems.source],
+            target: [...state.initialItems.target],
+        },
+        operationsEnabled: {
+            ...state.operationsEnabled,
+            reset: false,
+        },
+    };
+};
+const selectAllSource = (state, { checked }) => {
+    const items = state.current.source;
+    const selected = generateSelectAll(checked, items);
+    const transfer = Boolean(selected.size);
+    return {
+        ...state,
+        selections: {
+            ...state.selections,
+            source: selected,
+        },
+        operationsEnabled: {
+            ...state.operationsEnabled,
+            transfer,
+        },
+    };
+};
+const selectAllTarget = (state, { checked }) => {
+    const items = state.current.target;
+    const selected = generateSelectAll(checked, items);
+    const backtransfer = Boolean(selected.size);
+    return {
+        ...state,
+        selections: {
+            ...state.selections,
+            target: selected,
+        },
+        operationsEnabled: {
+            ...state.operationsEnabled,
+            backtransfer,
+        },
+    };
+};
+const selectionItemSource = (previousState, { item }) => {
+    const selected = updateSelected(previousState.selections.source, item);
+    const selectedItems = Array.from(selected);
+    const transfer = Boolean(selectedItems.length);
+    const source = new Set([...selectedItems]);
+    const state = {
+        ...previousState,
+        selections: {
+            ...previousState.selections,
+            source,
+        },
+        operationsEnabled: {
+            ...previousState.operationsEnabled,
+            transfer,
+        },
+    };
+    return state;
+};
+const selectionItemTarget = (previousState, { item }) => {
+    const selected = updateSelected(previousState.selections.target, item);
+    const selectedItems = Array.from(selected);
+    const backtransfer = Boolean(selectedItems.length);
+    const target = new Set([...selectedItems]);
+    const state = {
+        ...previousState,
+        selections: {
+            ...previousState.selections,
+            target,
+        },
+        operationsEnabled: {
+            ...previousState.operationsEnabled,
+            backtransfer,
+        },
+    };
+    return state;
+};
+//#endregion reducers
+//#region public reducers
+const initialStateFn = () => ({
+    initialItems: {
+        source: [],
+        target: [],
+    },
+    current: {
+        source: [],
+        target: [],
+    },
+    selections: {
+        source: new Set(),
+        target: new Set(),
+    },
+    operationsEnabled: {
+        transfer: false,
+        backtransfer: false,
+        reset: false,
+    },
+});
+const initFn = (payload) => (state) => init(state, payload);
+const transferFn = () => (state) => transfer(state);
+const backtransferFn = () => (state) => backtransfer(state);
+const resetFn = () => (state) => reset(state);
+const selectAllSourceFn = ({ checked }) => (state) => selectAllSource(state, { checked });
+const selectAllTargetFn = ({ checked }) => (state) => selectAllTarget(state, { checked });
+const selectionItemSourceFn = ({ item }) => (state) => selectionItemSource(state, { item });
+const selectionItemTargetFn = ({ item }) => (state) => selectionItemTarget(state, { item });
+//#endregion
+var reducers = {
+    initialStateFn,
+    initFn,
+    transferFn,
+    backtransferFn,
+    resetFn,
+    selectAllSourceFn,
+    selectAllTargetFn,
+    selectionItemSourceFn,
+    selectionItemTargetFn,
+};
+
+class TransferStore {
+    constructor() {
+        this._state = new BehaviorSubject(reducers.initialStateFn());
+        this.sourceItems = this._state.pipe(map(state => state.current.source));
+        this.targetItems = this._state.pipe(map(state => state.current.target));
+        this.valueChanged = this._state.pipe(map(state => state.current.target), distinctUntilChanged());
+        this.selectItems = (sourceType) => {
+            if (sourceType === 'source') {
+                return this.sourceItems;
+            }
+            if (sourceType === 'target') {
+                return this.targetItems;
+            }
+            return of([]);
+        };
+        this.selectSelectedItems = (sourceType) => {
+            if (sourceType === 'source') {
+                return this._state.pipe(map(state => state.selections.source));
+            }
+            if (sourceType === 'target') {
+                return this._state.pipe(map(state => state.selections.target));
+            }
+            return of(new Set());
+        };
+        this.transferEnabled = this._state.pipe(map(state => state.operationsEnabled.transfer));
+        this.backtransferEnabled = this._state.pipe(map(state => state.operationsEnabled.backtransfer));
+        this.resetEnabled = this._state.pipe(map(state => state.operationsEnabled.reset));
+    }
+    init({ source, target }) {
+        this.updateState(reducers.initFn({ source, target }));
+    }
+    transfer() {
+        this.updateState(reducers.transferFn());
+    }
+    backtransfer() {
+        this.updateState(reducers.backtransferFn());
+    }
+    reset() {
+        this.updateState(reducers.resetFn());
+    }
+    checkboxSelection(item, sourceType) {
+        if (sourceType === 'source') {
+            this.updateState(reducers.selectionItemSourceFn({ item }));
+        }
+        if (sourceType === 'target') {
+            this.updateState(reducers.selectionItemTargetFn({ item }));
+        }
+    }
+    selectAllSelection(checked, sourceType) {
+        if (sourceType === 'source') {
+            this.updateState(reducers.selectAllSourceFn({ checked }));
+        }
+        if (sourceType === 'target') {
+            this.updateState(reducers.selectAllTargetFn({ checked }));
+        }
+    }
+    updateState(reducerFn) {
+        this._state.next(reducerFn(this._state.value));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TransferStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TransferStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TransferStore, decorators: [{
+            type: Injectable
+        }] });
+
+class ItTransferListComponent extends ItAbstractComponent {
+    constructor(store) {
+        super();
+        this.store = store;
+        /**
+         * Widget title
+         */
+        this.title = inject(new HostAttributeToken('title'), { optional: true });
+        this.sourceType = inject(new HostAttributeToken('sourceType'), { optional: true });
+        this.items = this.store.selectItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
+        this.selected = this.store.selectSelectedItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
+        this.numberOfItems$ = this.items.pipe(map(items => ({ length: items.length })), startWith({ length: 0 }));
+        this.selectAllDisabled = this.items.pipe(map(items => items.length === 0));
+        /**
+         * Items of the list
+         * @default []
+         */
+        this.items$ = combineLatest([this.items, this.selected]).pipe(map(([items, selected]) => items.map(item => {
+            item.selected = selected.has(item);
+            return item;
+        })));
+        this.instanceId = this.getInstanceId();
+        this.onItemsUpdate();
+    }
+    /**
+     * Checkbox selection click handler
+     */
+    checkboxSelectionHandler(item) {
+        this.store.checkboxSelection(item, this.sourceType);
+    }
+    /**
+     * Checkbox select all selection handler
+     */
+    checkboxSelectAllHandler(event) {
+        const checked = event.target.checked;
+        this.store.selectAllSelection(checked, this.sourceType);
+    }
+    /**
+     * Items update subscription
+     */
+    onItemsUpdate() {
+        this.items
+            .pipe(takeUntilDestroyed(), skip(1), tap(() => {
+            if (this.selectAllCheckboxRef) {
+                this.selectAllCheckboxRef.nativeElement.checked = false;
+            }
+        }))
+            .subscribe();
+    }
+    getInstanceId() {
+        return Math.floor(Math.random() * 100000000).toString();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTransferListComponent, deps: [{ token: TransferStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTransferListComponent, isStandalone: true, selector: "it-transfer-list", viewQueries: [{ propertyName: "selectAllCheckboxRef", first: true, predicate: ["selectAllCheckbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"it-transfer-wrapper source\">\n  <div class=\"transfer-header\">\n    <div class=\"form-check\" aria-describedby=\"\">\n      <input\n        #selectAllCheckbox\n        type=\"checkbox\"\n        id=\"{{ instanceId }}checkbox{{ title }}\"\n        [disabled]=\"selectAllDisabled | async\"\n        (click)=\"checkboxSelectAllHandler($event)\" />\n      <label for=\"{{ instanceId }}checkbox{{ title }}\">\n        <span>\n          @if (numberOfItems$ | async; as numberOfItems) {\n            <span class=\"num\"> {{ numberOfItems.length }} </span>\n            <span> {{ numberOfItems.length > 1 ? 'ITEMS' : 'ITEM' }} </span>\n          }\n        </span>\n        <span class=\"descr\">{{ title | titlecase }}</span>\n      </label>\n    </div>\n    <!-- form check -->\n  </div>\n  <!-- transfer-header -->\n  <div class=\"transfer-scroll\">\n    <div class=\"transfer-group\">\n      @for (item of items$ | async; track item.value) {\n        <div class=\"form-check\" aria-describedby=\"\">\n          <input\n            type=\"checkbox\"\n            id=\"{{ instanceId }}-{{ item.value }}\"\n            [checked]=\"item.selected\"\n            (click)=\"checkboxSelectionHandler(item)\" />\n          <label for=\"{{ instanceId }}-{{ item.value }}\">\n            <span>\n              <span>{{ item.text }}</span>\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n<!-- it-transfer-wrapper -->\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTransferListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'it-transfer-list', standalone: true, imports: [AsyncPipe, TitleCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"it-transfer-wrapper source\">\n  <div class=\"transfer-header\">\n    <div class=\"form-check\" aria-describedby=\"\">\n      <input\n        #selectAllCheckbox\n        type=\"checkbox\"\n        id=\"{{ instanceId }}checkbox{{ title }}\"\n        [disabled]=\"selectAllDisabled | async\"\n        (click)=\"checkboxSelectAllHandler($event)\" />\n      <label for=\"{{ instanceId }}checkbox{{ title }}\">\n        <span>\n          @if (numberOfItems$ | async; as numberOfItems) {\n            <span class=\"num\"> {{ numberOfItems.length }} </span>\n            <span> {{ numberOfItems.length > 1 ? 'ITEMS' : 'ITEM' }} </span>\n          }\n        </span>\n        <span class=\"descr\">{{ title | titlecase }}</span>\n      </label>\n    </div>\n    <!-- form check -->\n  </div>\n  <!-- transfer-header -->\n  <div class=\"transfer-scroll\">\n    <div class=\"transfer-group\">\n      @for (item of items$ | async; track item.value) {\n        <div class=\"form-check\" aria-describedby=\"\">\n          <input\n            type=\"checkbox\"\n            id=\"{{ instanceId }}-{{ item.value }}\"\n            [checked]=\"item.selected\"\n            (click)=\"checkboxSelectionHandler(item)\" />\n          <label for=\"{{ instanceId }}-{{ item.value }}\">\n            <span>\n              <span>{{ item.text }}</span>\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n<!-- it-transfer-wrapper -->\n" }]
+        }], ctorParameters: () => [{ type: TransferStore }], propDecorators: { selectAllCheckboxRef: [{
+                type: ViewChild,
+                args: ['selectAllCheckbox']
+            }] } });
+
+/**
+ * Transfer
+ * @description Component that allows the creation of checkbox lists.
+ */
+class ItTransferComponent extends ItAbstractFormComponent {
+    constructor(_ngControl, _translateService, store) {
+        super(_translateService, _ngControl);
+        this._ngControl = _ngControl;
+        this._translateService = _translateService;
+        this.store = store;
+        /**
+         * The select options (left side)
+         */
+        this.options = [];
+        /**
+         * The selected options (right side)
+         */
+        this.selected = [];
+        /**
+         * Fired when there is a transfer, a backtransfer or a reset event
+         */
+        this.transferChanges = new EventEmitter();
+        /**
+         * Enable transfer button
+         * @default false
+         */
+        this.transferEnabled = this.store.transferEnabled;
+        /**
+         * Enable backtransfer button
+         * @default false
+         */
+        this.backtransferEnabled = this.store.backtransferEnabled;
+        /**
+         * Enable reset button
+         * @default false
+         */
+        this.resetEnabled = this.store.resetEnabled;
+        this.destroyRef = inject(DestroyRef);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.storeInit();
+        this.onStoreValueChanged();
+    }
+    /**
+     * Transfer button click handler
+     */
+    transferClickHandler(event) {
+        this.buttonEventHandler(event, () => this.store.transfer());
+    }
+    /**
+     * Transfer button keypress handler
+     */
+    transferKeyPressHandler(event) {
+        this.buttonEventHandler(event, () => this.store.transfer());
+    }
+    /**
+     * Backtransfer button click handler
+     */
+    backtransferClickHandler(event) {
+        this.buttonEventHandler(event, () => this.store.backtransfer());
+    }
+    /**
+     * Backtransfer button keypress handler
+     */
+    backtransferKeyPressHandler(event) {
+        this.buttonEventHandler(event, () => this.store.backtransfer());
+    }
+    /**
+     * Reset button click handler
+     */
+    resetClickHandler(event) {
+        this.buttonEventHandler(event, () => this.store.reset());
+    }
+    /**
+     * Reset button keypress handler
+     */
+    resetKeyPressHandler(event) {
+        this.buttonEventHandler(event, () => this.store.reset());
+    }
+    buttonEventHandler(event, updateStoreCb) {
+        event.preventDefault();
+        updateStoreCb();
+    }
+    storeInit() {
+        let target = [];
+        const ngControl = this._ngControl;
+        const isNgControlDefined = Boolean(this._ngControl);
+        // if ngControl is defined, take values from it. Input() target will be ignored
+        if (isNgControlDefined) {
+            console.debug('ngControl instanceof NgModel:', ngControl instanceof NgModel);
+            console.debug('ngControl instanceof FormControlName:', ngControl instanceof FormControlName);
+            // if ngControl is an ngModel (template-driven form use case), take values from it
+            if (ngControl instanceof NgModel) {
+                console.debug('ngControl instanceof NgModel');
+                const model = ngControl.model;
+                target = Array.isArray(model) ? model : [];
+            }
+            // if ngControl is an FormControlName (reactive form use case), take values from it
+            if (ngControl instanceof FormControlName) {
+                console.debug('ngControl instanceof FormControlName');
+                const model = ngControl.control.value;
+                target = Array.isArray(model) ? model : [];
+            }
+            console.debug('ngControl is defined. Input() target will be ignored');
+        }
+        else if (this.selected && Array.isArray(this.selected)) {
+            target = [...this.selected];
+        }
+        console.debug('target:', this.selected, 'formControl:', this.control.value, 'ngModel:', this._ngControl);
+        this.store.init({ source: [...this.options], target });
+    }
+    onStoreValueChanged() {
+        this.store.valueChanged
+            .pipe(takeUntilDestroyed(this.destroyRef), tap(value => this.writeValue(value)), tap(value => this.onChange(value)), tap(value => this.transferChanges.emit(value)))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTransferComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i1.TranslateService }, { token: TransferStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTransferComponent, isStandalone: true, selector: "it-transfer", inputs: { options: "options", selected: "selected" }, outputs: { transferChanges: "transferChanges" }, providers: [TransferStore], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n  }\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-md-5\">\n      <it-transfer-list sourceType=\"source\" title=\"source\"></it-transfer-list>\n    </div>\n    <!-- col -->\n    <div class=\"col-xs-12 col-md-2\">\n      <!-- transfer buttons-->\n      <div class=\"it-transfer-buttons\">\n        <a\n          class=\"transfer\"\n          role=\"button\"\n          href=\"#\"\n          [ngClass]=\"{ active: transferEnabled | async }\"\n          (click)=\"transferClickHandler($event)\"\n          (keypress)=\"transferKeyPressHandler($event)\"\n          aria-label=\"Sposta avanti\">\n          <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right\"></use></svg>\n        </a>\n        <span class=\"visually-hidden\">Etichetta per freccia destra</span>\n        <a\n          class=\"backtransfer\"\n          role=\"button\"\n          href=\"#\"\n          [ngClass]=\"{ active: backtransferEnabled | async }\"\n          (click)=\"backtransferClickHandler($event)\"\n          (keypress)=\"backtransferKeyPressHandler($event)\"\n          aria-label=\"Sposta indietro\">\n          <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-arrow-left\"></use></svg>\n        </a>\n        <span class=\"visually-hidden\">Etichetta for freccia sinistra</span>\n        <a\n          class=\"reset\"\n          role=\"button\"\n          href=\"#\"\n          [ngClass]=\"{ active: resetEnabled | async }\"\n          (click)=\"resetClickHandler($event)\"\n          (keypress)=\"resetKeyPressHandler($event)\"\n          aria-label=\"Reset\">\n          <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-restore\"></use></svg>\n        </a>\n        <span class=\"visually-hidden\">Etichetta per icona di reset</span>\n      </div>\n    </div>\n    <div class=\"col-xs-12 col-md-5\">\n      <it-transfer-list sourceType=\"target\" title=\"target\"></it-transfer-list>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItTransferListComponent, selector: "it-transfer-list" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTransferComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'it-transfer', standalone: true, imports: [ItTransferListComponent, NgClass, AsyncPipe, ReactiveFormsModule], providers: [TransferStore], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n  }\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-md-5\">\n      <it-transfer-list sourceType=\"source\" title=\"source\"></it-transfer-list>\n    </div>\n    <!-- col -->\n    <div class=\"col-xs-12 col-md-2\">\n      <!-- transfer buttons-->\n      <div class=\"it-transfer-buttons\">\n        <a\n          class=\"transfer\"\n          role=\"button\"\n          href=\"#\"\n          [ngClass]=\"{ active: transferEnabled | async }\"\n          (click)=\"transferClickHandler($event)\"\n          (keypress)=\"transferKeyPressHandler($event)\"\n          aria-label=\"Sposta avanti\">\n          <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right\"></use></svg>\n        </a>\n        <span class=\"visually-hidden\">Etichetta per freccia destra</span>\n        <a\n          class=\"backtransfer\"\n          role=\"button\"\n          href=\"#\"\n          [ngClass]=\"{ active: backtransferEnabled | async }\"\n          (click)=\"backtransferClickHandler($event)\"\n          (keypress)=\"backtransferKeyPressHandler($event)\"\n          aria-label=\"Sposta indietro\">\n          <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-arrow-left\"></use></svg>\n        </a>\n        <span class=\"visually-hidden\">Etichetta for freccia sinistra</span>\n        <a\n          class=\"reset\"\n          role=\"button\"\n          href=\"#\"\n          [ngClass]=\"{ active: resetEnabled | async }\"\n          (click)=\"resetClickHandler($event)\"\n          (keypress)=\"resetKeyPressHandler($event)\"\n          aria-label=\"Reset\">\n          <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-restore\"></use></svg>\n        </a>\n        <span class=\"visually-hidden\">Etichetta per icona di reset</span>\n      </div>\n    </div>\n    <div class=\"col-xs-12 col-md-5\">\n      <it-transfer-list sourceType=\"target\" title=\"target\"></it-transfer-list>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i1.TranslateService }, { type: TransferStore }], propDecorators: { options: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], transferChanges: [{
+                type: Output
+            }] } });
+
+const formComponents = [
+    ItAutocompleteComponent,
+    ItCheckboxComponent,
+    ItInputComponent,
+    ItPasswordInputComponent,
+    ItRadioButtonComponent,
+    ItRangeComponent,
+    ItRatingComponent,
+    ItSelectComponent,
+    ItTextareaComponent,
+    ItTransferComponent,
+    ItUploadDragDropComponent,
+    ItUploadFileListComponent,
+];
+class ItFormModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [ItAutocompleteComponent,
+            ItCheckboxComponent,
+            ItInputComponent,
+            ItPasswordInputComponent,
+            ItRadioButtonComponent,
+            ItRangeComponent,
+            ItRatingComponent,
+            ItSelectComponent,
+            ItTextareaComponent,
+            ItTransferComponent,
+            ItUploadDragDropComponent,
+            ItUploadFileListComponent], exports: [ItAutocompleteComponent,
+            ItCheckboxComponent,
+            ItInputComponent,
+            ItPasswordInputComponent,
+            ItRadioButtonComponent,
+            ItRangeComponent,
+            ItRatingComponent,
+            ItSelectComponent,
+            ItTextareaComponent,
+            ItTransferComponent,
+            ItUploadDragDropComponent,
+            ItUploadFileListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [formComponents] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: formComponents,
+                    exports: formComponents,
+                }]
+        }] });
+
 class ItBackButtonComponent {
     constructor(_location) {
         this._location = _location;
@@ -4863,6 +5354,352 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 args: [{ transform: inputToBoolean }]
             }] } });
 
+class ItMegamenuComponent {
+    constructor() {
+        /**
+         * Megamenu mode
+         */
+        this.mode = 'normal';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItMegamenuComponent, isStandalone: true, selector: "it-megamenu", inputs: { mode: "mode", header: ["header", "header", inputToBoolean], footer: ["footer", "footer", inputToBoolean] }, ngImport: i0, template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"] }]
+        }], propDecorators: { mode: [{
+                type: Input
+            }], header: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }], footer: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }] } });
+
+function searchFn(items, item) {
+    //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) {
+    const result = [];
+    function flatten(items) {
+        for (const item of items) {
+            result.push(item);
+            if (item.childs && item.childs.length > 0) {
+                flatten(item.childs);
+            }
+        }
+    }
+    flatten(items);
+    return result;
+}
+const search = searchFn;
+const flattenNavscrollItems = flattenNavscrollItemsFn;
+
+class NavscrollStore {
+    constructor() {
+        this.#state = new BehaviorSubject({
+            items: new Set(),
+            active: [],
+            selected: undefined,
+            progressBar: 0,
+            isMobile: false,
+        });
+        this.#state$ = this.#state.asObservable();
+        this.selected = this.#state$.pipe(map(({ selected }) => selected), distinctUntilChanged());
+        this.progressBar = this.#state$.pipe(map(({ progressBar }) => progressBar), distinctUntilChanged());
+        this.isMobile = this.#state$.pipe(map(({ isMobile }) => isMobile), distinctUntilChanged());
+        this.#menuItemSelected = new Subject();
+        this.menuItemSelected = this.#menuItemSelected.asObservable();
+    }
+    #state;
+    #state$;
+    #menuItemSelected;
+    init(navscrollItems) {
+        const flattenItems = flattenNavscrollItems(navscrollItems);
+        //the first item is selected by default
+        const selected = (flattenItems && flattenItems.length && flattenItems[0]) ?? undefined;
+        const state = {
+            items: new Set(flattenItems),
+            active: selected ? [selected] : [],
+            selected: selected,
+            progressBar: 0,
+            isMobile: false,
+        };
+        this.#state.next(state);
+    }
+    setActive(item) {
+        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) {
+        return this.#state.asObservable().pipe(map(state => state.active.includes(item)));
+    }
+    updateProgressBar(container) {
+        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: scrollValue });
+    }
+    selectMenuItem() {
+        this.#menuItemSelected.next(undefined);
+    }
+    setMobile({ innerWidth }) {
+        const isLessThan992px = innerWidth < 992;
+        const isMobile = isLessThan992px;
+        const state = this.#state.value;
+        this.#state.next({ ...state, isMobile });
+    }
+}
+
+const ROUTER_LINK_ACTIVE_OPTIONS = {
+    fragment: 'exact',
+    paths: 'exact',
+    queryParams: 'exact',
+    matrixParams: 'exact',
+};
+class ItNavscrollListItemComponent {
+    constructor() {
+        this.checkActive = new EventEmitter();
+        this.routerLinkActiveOptions = ROUTER_LINK_ACTIVE_OPTIONS;
+        this.#initIsActive = new AsyncSubject();
+        this.active = this.#initIsActive.asObservable().pipe(switchMap(item => this.#store.isActive$(item)));
+        this.#router = inject(Router);
+        this.#store = inject(NavscrollStore);
+        this.#destroyRef = inject(DestroyRef);
+    }
+    #initIsActive;
+    #router;
+    #store;
+    #destroyRef;
+    ngOnInit() {
+        this.#initIsActiveSub();
+        this.#router.events
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter((event) => {
+            const isNavigationEndEvent = event instanceof NavigationEnd;
+            const isScrollEvent = event instanceof Scroll && event.routerEvent instanceof NavigationEnd;
+            return isNavigationEndEvent || isScrollEvent;
+        }), tap(() => {
+            if (this.rtl?.isActive) {
+                this.#store.setActive(this.item);
+            }
+        }))
+            .subscribe();
+    }
+    clickHandler(event) {
+        event.preventDefault();
+        this.#store.selectMenuItem();
+        this.#router.navigate([], { fragment: this.item.href });
+    }
+    #initIsActiveSub() {
+        this.#initIsActive.next(this.item);
+        this.#initIsActive.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItNavscrollListItemComponent, isStandalone: true, selector: "it-navscroll-list-item", inputs: { item: "item" }, outputs: { checkActive: "checkActive" }, viewQueries: [{ propertyName: "rtl", first: true, predicate: ["rtl"], descendants: true }], ngImport: i0, 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
+    >
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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
+    >
+  `,
+                }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], checkActive: [{
+                type: Output
+            }], rtl: [{
+                type: ViewChild,
+                args: ['rtl']
+            }] } });
+
+class ItNavscrollListItemsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItNavscrollListItemsComponent, isStandalone: true, selector: "it-navscroll-list-items", inputs: { items: "items" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "component", type: ItNavscrollListItemsComponent, selector: "it-navscroll-list-items", inputs: ["items"] }, { kind: "component", type: ItNavscrollListItemComponent, selector: "it-navscroll-list-item", inputs: ["item"], outputs: ["checkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollListItemsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+  `,
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+/**
+ * Navscroll
+ * @description Show a list of links to anchor of the document.
+ */
+class ItNavscrollComponent {
+    onScroll() {
+        const sectionContainer = this.#elementRef.nativeElement.querySelector('.it-page-sections-container');
+        this.#store.updateProgressBar(sectionContainer);
+    }
+    onResize() {
+        this.#setMobile();
+    }
+    #store;
+    #scroller;
+    #destroyRef;
+    #elementRef;
+    constructor() {
+        /**
+         * Header of the Navscroll
+         */
+        this.header = '';
+        /**
+         * Border position
+         * @default left
+         */
+        this.borderPosition = 'left';
+        /**
+         * Alignment
+         * @default top
+         */
+        this.alignment = 'top';
+        /**
+         * Theme
+         * @default light
+         */
+        this.theme = 'light';
+        this.#store = inject(NavscrollStore);
+        this.#scroller = inject(ViewportScroller);
+        this.#destroyRef = inject(DestroyRef);
+        this.#elementRef = inject(ElementRef);
+        this.selectedTitle = this.#store.selected.pipe(map(selected => selected?.title ?? ''));
+        this.progressBarValue = this.#store.progressBar;
+        this.isMobile = this.#store.isMobile;
+        this.#store.menuItemSelected
+            .pipe(takeUntilDestroyed(), withLatestFrom(this.isMobile), tap(v => {
+            const isMobile = v[1];
+            if (isMobile) {
+                this.toggleButtonRef.nativeElement.click();
+            }
+        }))
+            .subscribe();
+    }
+    ngOnInit() {
+        this.#initViewScrollerSubscription();
+        this.#store.init(this.items);
+        this.#setMobile();
+    }
+    #initViewScrollerSubscription() {
+        this.#store.selected
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(selected => Boolean(selected)), map(v => v), delay(0), //WA
+        tap({
+            next: ({ href }) => {
+                this.#scroller.scrollToAnchor(href);
+            },
+        }))
+            .subscribe();
+    }
+    #setMobile() {
+        this.#store.setMobile(window);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItNavscrollComponent, isStandalone: true, selector: "it-navscroll", inputs: { header: "header", items: "items", borderPosition: "borderPosition", alignment: "alignment", theme: "theme", pageSectionsTemplate: "pageSectionsTemplate" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, providers: [NavscrollStore], viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButtonRef"], descendants: true }], ngImport: i0, template: "<div class=\"container py-lg-5\">\n  <div class=\"row\">\n    <div class=\"col-12 col-lg-4\">\n      <div class=\"it-navscroll-sticky\" [ngClass]=\"{ 'it-navscroll-sticky-mobile': isMobile | async }\" data-bs-stackable=\"true\">\n        <nav\n          class=\"navbar it-navscroll-wrapper navbar-expand-lg\"\n          [class.it-top-navscroll]=\"alignment === 'top'\"\n          [class.it-bottom-navscroll]=\"alignment === 'bottom'\"\n          [class.it-left-side]=\"borderPosition === 'left'\"\n          [class.it-right-side]=\"borderPosition === 'right'\"\n          [class.theme-dark-mobile]=\"theme === 'dark'\"\n          [class.theme-dark-desktop]=\"theme === 'dark'\">\n          <button\n            class=\"custom-navbar-toggler\"\n            type=\"button\"\n            aria-controls=\"navbarNav\"\n            aria-expanded=\"false\"\n            aria-label=\"Toggle navigation\"\n            data-bs-toggle=\"navbarcollapsible\"\n            data-bs-target=\"#navbarNav\"\n            #toggleButtonRef>\n            <span class=\"it-list\"></span>{{ selectedTitle | async }}\n          </button>\n          <div class=\"progress custom-navbar-progressbar\">\n            <div\n              class=\"progress-bar it-navscroll-progressbar\"\n              role=\"progressbar\"\n              [style.width.%]=\"progressBarValue | async\"\n              [attr.aria-valuenow]=\"progressBarValue | async\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"></div>\n          </div>\n          <div class=\"navbar-collapsable\" id=\"navbarNav\">\n            <div class=\"overlay\"></div>\n            <div class=\"close-div visually-hidden\">\n              <button class=\"btn close-menu\" type=\"button\"><span class=\"it-close\"></span>Chiudi</button>\n            </div>\n            <button type=\"button\" class=\"it-back-button btn w-100 text-start\">\n              <svg class=\"icon icon-sm icon-primary align-top\">\n                <use\n                  href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"\n                  xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"></use>\n              </svg>\n              <span>Indietro</span>\n            </button>\n            <div class=\"menu-wrapper\">\n              <div class=\"link-list-wrapper\">\n                <h3>{{ header }}</h3>\n                <div class=\"progress\">\n                  <div\n                    class=\"progress-bar it-navscroll-progressbar\"\n                    role=\"progressbar\"\n                    [style.width.%]=\"progressBarValue | async\"\n                    [attr.aria-valuenow]=\"progressBarValue | async\"\n                    aria-valuemin=\"0\"\n                    aria-valuemax=\"100\"></div>\n                </div>\n                <it-navscroll-list-items [items]=\"items\"></it-navscroll-list-items>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </div>\n    </div>\n    <div class=\"col-12 col-lg-8 it-page-sections-container\">\n      <ng-container\n        *ngTemplateOutlet=\"pageSectionsTemplate ? pageSectionsTemplate : defaultPageSectionsTemplate; context: { items: items }\">\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPageSectionsTemplate let-items=\"items\">\n  @for (item of items; track item.href) {\n    <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: 1 }\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #paragraphTemplate let-item=\"item\" let-level=\"level\" let-nextLevel=\"level+1\">\n  @switch (level) {\n    @case (1) {\n      <h2 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h2>\n    }\n    @case (2) {\n      <h3 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h3>\n    }\n    @case (3) {\n      <h4 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h4>\n    }\n    @case (4) {\n      <h5 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h5>\n    }\n    @default {\n      <h6 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h6>\n    }\n  }\n  <p>{{ item.text }}</p>\n  @for (item of item.childs; track item.href) {\n    <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: nextLevel }\"></ng-container>\n  }\n</ng-template>\n", styles: [".it-navscroll-sticky{position:sticky;top:0}.it-navscroll-sticky-mobile{z-index:1020}\n"], dependencies: [{ kind: "component", type: ItNavscrollListItemsComponent, selector: "it-navscroll-list-items", inputs: ["items"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavscrollComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'it-navscroll', standalone: true, imports: [
+                        ItNavscrollListItemsComponent,
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                        RouterLink,
+                        RouterLinkActive,
+                        RouterLinkWithHref,
+                        AsyncPipe,
+                        NgClass,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NavscrollStore], template: "<div class=\"container py-lg-5\">\n  <div class=\"row\">\n    <div class=\"col-12 col-lg-4\">\n      <div class=\"it-navscroll-sticky\" [ngClass]=\"{ 'it-navscroll-sticky-mobile': isMobile | async }\" data-bs-stackable=\"true\">\n        <nav\n          class=\"navbar it-navscroll-wrapper navbar-expand-lg\"\n          [class.it-top-navscroll]=\"alignment === 'top'\"\n          [class.it-bottom-navscroll]=\"alignment === 'bottom'\"\n          [class.it-left-side]=\"borderPosition === 'left'\"\n          [class.it-right-side]=\"borderPosition === 'right'\"\n          [class.theme-dark-mobile]=\"theme === 'dark'\"\n          [class.theme-dark-desktop]=\"theme === 'dark'\">\n          <button\n            class=\"custom-navbar-toggler\"\n            type=\"button\"\n            aria-controls=\"navbarNav\"\n            aria-expanded=\"false\"\n            aria-label=\"Toggle navigation\"\n            data-bs-toggle=\"navbarcollapsible\"\n            data-bs-target=\"#navbarNav\"\n            #toggleButtonRef>\n            <span class=\"it-list\"></span>{{ selectedTitle | async }}\n          </button>\n          <div class=\"progress custom-navbar-progressbar\">\n            <div\n              class=\"progress-bar it-navscroll-progressbar\"\n              role=\"progressbar\"\n              [style.width.%]=\"progressBarValue | async\"\n              [attr.aria-valuenow]=\"progressBarValue | async\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"></div>\n          </div>\n          <div class=\"navbar-collapsable\" id=\"navbarNav\">\n            <div class=\"overlay\"></div>\n            <div class=\"close-div visually-hidden\">\n              <button class=\"btn close-menu\" type=\"button\"><span class=\"it-close\"></span>Chiudi</button>\n            </div>\n            <button type=\"button\" class=\"it-back-button btn w-100 text-start\">\n              <svg class=\"icon icon-sm icon-primary align-top\">\n                <use\n                  href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"\n                  xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left\"></use>\n              </svg>\n              <span>Indietro</span>\n            </button>\n            <div class=\"menu-wrapper\">\n              <div class=\"link-list-wrapper\">\n                <h3>{{ header }}</h3>\n                <div class=\"progress\">\n                  <div\n                    class=\"progress-bar it-navscroll-progressbar\"\n                    role=\"progressbar\"\n                    [style.width.%]=\"progressBarValue | async\"\n                    [attr.aria-valuenow]=\"progressBarValue | async\"\n                    aria-valuemin=\"0\"\n                    aria-valuemax=\"100\"></div>\n                </div>\n                <it-navscroll-list-items [items]=\"items\"></it-navscroll-list-items>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </div>\n    </div>\n    <div class=\"col-12 col-lg-8 it-page-sections-container\">\n      <ng-container\n        *ngTemplateOutlet=\"pageSectionsTemplate ? pageSectionsTemplate : defaultPageSectionsTemplate; context: { items: items }\">\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPageSectionsTemplate let-items=\"items\">\n  @for (item of items; track item.href) {\n    <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: 1 }\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #paragraphTemplate let-item=\"item\" let-level=\"level\" let-nextLevel=\"level+1\">\n  @switch (level) {\n    @case (1) {\n      <h2 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h2>\n    }\n    @case (2) {\n      <h3 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h3>\n    }\n    @case (3) {\n      <h4 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h4>\n    }\n    @case (4) {\n      <h5 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h5>\n    }\n    @default {\n      <h6 class=\"it-page-section\" id=\"{{ item.href }}\">{{ item.title }}</h6>\n    }\n  }\n  <p>{{ item.text }}</p>\n  @for (item of item.childs; track item.href) {\n    <ng-container *ngTemplateOutlet=\"paragraphTemplate; context: { item: item, level: nextLevel }\"></ng-container>\n  }\n</ng-template>\n", styles: [".it-navscroll-sticky{position:sticky;top:0}.it-navscroll-sticky-mobile{z-index:1020}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { header: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], borderPosition: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], pageSectionsTemplate: [{
+                type: Input
+            }], onScroll: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }], toggleButtonRef: [{
+                type: ViewChild,
+                args: ['toggleButtonRef']
+            }] } });
+
 class ItSidebarComponent {
     constructor() {
         /**
@@ -5182,116 +6019,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
         }] });
 
 /**
- * Timeline Item
- * @description Represents a single event for Timeline component.
+ * Configures DesignAngularKit library
+ * @param config the DesignAngularKit config
  */
-class ItTimelineItemComponent extends ItAbstractComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Timeline element reference date format
-         * @default dd/MM/yyyy
-         */
-        this.dateFormat = 'dd/MM/yyyy';
-        /**
-         * Timeline element PIN type
-         * @default none
-         */
-        this.pinType = 'default';
-        /**
-         * Timeline element PIN icon
-         * @default code-circle
-         */
-        this.pinIcon = 'code-circle';
-        /**
-         * Timeline element show detail link
-         * @default false
-         */
-        this.showReadMore = false;
-        /** Timeline element detail link
-         * @default #
-         */
-        this.readMoreLink = '#';
+function provideDesignAngularKit(config) {
+    let assetBasePath = './bootstrap-italia';
+    if (config?.assetBasePath) {
+        assetBasePath = config.assetBasePath.endsWith('/')
+            ? config.assetBasePath.substring(0, config.assetBasePath.lastIndexOf('/'))
+            : config.assetBasePath;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTimelineItemComponent, isStandalone: true, selector: "it-timeline-item", inputs: { title: "title", text: "text", signature: "signature", eventDate: "eventDate", dateFormat: "dateFormat", pinText: "pinText", pinType: "pinType", pinIcon: "pinIcon", categoryTitle: "categoryTitle", categoryLink: "categoryLink", showReadMore: ["showReadMore", "showReadMore", inputToBoolean], readMoreLink: "readMoreLink" }, usesInheritance: true, ngImport: i0, template: "<div class=\"timeline-element\">\n  @if (pinType === 'now') {\n    <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n  }\n  <div class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n    <div class=\"pin-icon\">\n      @if (pinIcon) {\n        <it-icon [name]=\"pinIcon\"></it-icon>\n      } @else {\n        <it-icon name=\"code-circle\"></it-icon>\n      }\n    </div>\n    <div class=\"pin-text\">\n      <span>{{ pinText }}</span>\n    </div>\n  </div>\n  <div class=\"card-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if ((categoryTitle && categoryLink) || eventDate) {\n          <div class=\"category-top\">\n            @if (categoryTitle) {\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h5 class=\"card-title\">{{ title }}</h5>\n        <p class=\"card-text\">{{ text }}</p>\n        @if (signature) {\n          <span class=\"card-signature\">{{ signature }}</span>\n        }\n        @if (showReadMore) {\n          <a class=\"read-more\" [href]=\"readMoreLink\">\n            <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n            <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n            <it-icon name=\"arrow-right\"></it-icon>\n          </a>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineItemComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'it-timeline-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, DatePipe, TranslateModule, NgClass], template: "<div class=\"timeline-element\">\n  @if (pinType === 'now') {\n    <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n  }\n  <div class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n    <div class=\"pin-icon\">\n      @if (pinIcon) {\n        <it-icon [name]=\"pinIcon\"></it-icon>\n      } @else {\n        <it-icon name=\"code-circle\"></it-icon>\n      }\n    </div>\n    <div class=\"pin-text\">\n      <span>{{ pinText }}</span>\n    </div>\n  </div>\n  <div class=\"card-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if ((categoryTitle && categoryLink) || eventDate) {\n          <div class=\"category-top\">\n            @if (categoryTitle) {\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h5 class=\"card-title\">{{ title }}</h5>\n        <p class=\"card-text\">{{ text }}</p>\n        @if (signature) {\n          <span class=\"card-signature\">{{ signature }}</span>\n        }\n        @if (showReadMore) {\n          <a class=\"read-more\" [href]=\"readMoreLink\">\n            <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n            <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n            <it-icon name=\"arrow-right\"></it-icon>\n          </a>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], text: [{
-                type: Input,
-                args: [{ required: true }]
-            }], signature: [{
-                type: Input
-            }], eventDate: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }], pinText: [{
-                type: Input,
-                args: [{ required: true }]
-            }], pinType: [{
-                type: Input
-            }], pinIcon: [{
-                type: Input
-            }], categoryTitle: [{
-                type: Input
-            }], categoryLink: [{
-                type: Input
-            }], showReadMore: [{
-                type: Input,
-                args: [{ transform: inputToBoolean }]
-            }], readMoreLink: [{
-                type: Input
-            }] } });
-
-/**
- * Timeline
- * @description Build timeline for chronological representation of events.
- */
-class ItTimelineComponent extends ItAbstractComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Timeline elements array
-         * @default []
-         */
-        this.timelineElements = [];
-        /**
-         * Default date format for timeline element reference date
-         * @default dd/MM/yyyy
-         */
-        this.dateFormat = 'dd/MM/yyyy';
+    const providers = [
+        {
+            provide: IT_ASSET_BASE_PATH,
+            useValue: assetBasePath,
+        },
+        provideAnimationsAsync(),
+        provideHttpClient(),
+    ];
+    if (config?.loadFont !== false) {
+        // Add provider to initialize the bootstrap-italia font
+        providers.push({
+            provide: APP_INITIALIZER,
+            useFactory: () => {
+                return () => {
+                    loadFonts(`${assetBasePath}/dist/fonts`);
+                };
+            },
+            multi: true,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTimelineComponent, isStandalone: true, selector: "it-timeline", inputs: { timelineElements: "timelineElements", dateFormat: "dateFormat" }, usesInheritance: true, ngImport: i0, template: "<div class=\"it-timeline-wrapper\">\n  <div class=\"row\">\n    @for (element of timelineElements; track $index) {\n      <div class=\"col-12\">\n        <it-timeline-item\n          [title]=\"element.title\"\n          [text]=\"element.text\"\n          [signature]=\"element.signature\"\n          [pinType]=\"element.pin?.type\"\n          [pinIcon]=\"element.pin?.icon\"\n          [pinText]=\"element.pin?.text\"\n          [eventDate]=\"element.eventDate\"\n          [dateFormat]=\"dateFormat\"\n          [categoryTitle]=\"element.category?.title\"\n          [categoryLink]=\"element.category?.link\"\n          [showReadMore]=\"!!element.link?.length\"\n          [readMoreLink]=\"element.link\" />\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItTimelineItemComponent, selector: "it-timeline-item", inputs: ["title", "text", "signature", "eventDate", "dateFormat", "pinText", "pinType", "pinIcon", "categoryTitle", "categoryLink", "showReadMore", "readMoreLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'it-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent], template: "<div class=\"it-timeline-wrapper\">\n  <div class=\"row\">\n    @for (element of timelineElements; track $index) {\n      <div class=\"col-12\">\n        <it-timeline-item\n          [title]=\"element.title\"\n          [text]=\"element.text\"\n          [signature]=\"element.signature\"\n          [pinType]=\"element.pin?.type\"\n          [pinIcon]=\"element.pin?.icon\"\n          [pinText]=\"element.pin?.text\"\n          [eventDate]=\"element.eventDate\"\n          [dateFormat]=\"dateFormat\"\n          [categoryTitle]=\"element.category?.title\"\n          [categoryLink]=\"element.category?.link\"\n          [showReadMore]=\"!!element.link?.length\"\n          [readMoreLink]=\"element.link\" />\n      </div>\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { timelineElements: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }] } });
-
-const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent];
-class ItTimelineModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, imports: [ItTimelineComponent, ItTimelineItemComponent], exports: [ItTimelineComponent, ItTimelineItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, imports: [timelineComponents] }); }
+    // Add provider to initialize the TranslateModule
+    const langPrefix = `${assetBasePath}/i18n/`;
+    const langSuffix = `.json`; // TODO: add ?v${version} to prevent cache loading on version change
+    providers.push(importProvidersFrom(TranslateModule.forRoot({
+        loader: config?.translateLoader?.(langPrefix, langSuffix) ?? {
+            provide: TranslateLoader,
+            useFactory: (http) => new TranslateHttpLoader(http, langPrefix, langSuffix),
+            deps: [HttpClient],
+        },
+        defaultLanguage: 'it',
+        useDefaultLang: true,
+    })));
+    // Add provider to initialize library default languages
+    providers.push({
+        provide: APP_INITIALIZER,
+        useFactory: (translateService) => {
+            return () => {
+                translateService.addLangs(['it', 'en']); // Adds 'it' and 'en' as available languages.
+            };
+        },
+        multi: true,
+        deps: [TranslateService],
+    });
+    return makeEnvironmentProviders(providers);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: timelineComponents,
-                    exports: timelineComponents,
-                }]
-        }] });
 
 /**
  * Core components
@@ -5336,6 +6118,7 @@ const navigation = [
     ItNavBarModule,
     ItSidebarComponent,
     ItMegamenuComponent,
+    ItNavscrollComponent,
 ];
 /**
  * Utils components
@@ -5398,7 +6181,8 @@ class DesignAngularKitModule {
             ItHeaderComponent,
             ItNavBarModule,
             ItSidebarComponent,
-            ItMegamenuComponent, ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent, ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe], exports: [ItAccordionComponent,
+            ItMegamenuComponent,
+            ItNavscrollComponent, ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent, ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe], exports: [ItAccordionComponent,
             ItAlertComponent,
             ItAvatarModule,
             ItBadgeDirective,
@@ -5431,7 +6215,8 @@ class DesignAngularKitModule {
             ItHeaderComponent,
             ItNavBarModule,
             ItSidebarComponent,
-            ItMegamenuComponent, ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent, ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe] }); }
+            ItMegamenuComponent,
+            ItNavscrollComponent, ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent, ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, imports: [ItAlertComponent,
             ItAvatarModule,
             ItCarouselModule,
@@ -5472,6 +6257,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 }]
         }] });
 
+//Qs
+//Aria hidden?
+//state management with service?
+//interface?
+
 const IconNameArray = [
     'arrow-down',
     'arrow-down-circle',
@@ -5808,5 +6598,5 @@ class ItDateUtils {
  * Generated bundle index. Do not edit.
  */
 
-export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSidebarComponent, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTimelineComponent, ItTimelineItemComponent, ItTimelineModule, ItTooltipDirective, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, PLATE_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
+export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNavscrollComponent, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSidebarComponent, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTimelineComponent, ItTimelineItemComponent, ItTimelineModule, ItTooltipDirective, ItTransferComponent, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, PLATE_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
 //# sourceMappingURL=design-angular-kit.mjs.map