design-angular-kit 1.4.0 → 1.6.0

package/fesm2022/design-angular-kit.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Component, Input, Output, Injectable, signal, DestroyRef, NgZone, Injector, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, booleanAttribute, InjectionToken, ContentChildren, NgModule, TemplateRef, HostBinding, Directive, Optional, Host, Inject, HostListener, Self, ViewChildren, Pipe, HostAttributeToken, APP_INITIALIZER, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
-import * as i1$3 from '@angular/common';
-import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, LowerCasePipe, DatePipe, NgOptimizedImage, TitleCasePipe, JsonPipe, ViewportScroller } from '@angular/common';
+import { inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Output, Input, Component, Injectable, signal, DestroyRef, NgZone, Injector, afterNextRender, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, InjectionToken, ContentChildren, NgModule, TemplateRef, HostBinding, Directive, DOCUMENT, HostListener, ViewChildren, Pipe, HostAttributeToken, provideAppInitializer, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
+import { NgTemplateOutlet, NgClass, AsyncPipe, LowerCasePipe, DatePipe, NgOptimizedImage, TitleCasePipe, Location, JsonPipe, ViewportScroller } from '@angular/common';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { tap, delay, startWith, Subject, filter, debounceTime, distinctUntilChanged, switchMap, of, merge, map, Observable, take, forkJoin, BehaviorSubject, shareReplay, combineLatest, skip, AsyncSubject, withLatestFrom, timer, takeWhile } from 'rxjs';
 import videojs from 'video.js';
@@ -9,12 +8,11 @@ import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule, TranslatePipe, TranslateLoader } from '@ngx-translate/core';
 import { initYoutubePlugin } from 'bootstrap-italia/dist/plugins/util/youtube-video.js';
 import { Collapse, Alert, Dropdown, Carousel, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, SelectAutocomplete, BackToTop, NavBarCollapsible, HeaderSticky, loadFonts } from 'bootstrap-italia';
-import * as i1$4 from '@angular/router';
-import { RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterLinkWithHref } from '@angular/router';
+import { RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterLinkWithHref, ActivatedRoute } from '@angular/router';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$1 from '@angular/forms';
-import { FormControl, FormGroup, Validators, ReactiveFormsModule, NgModel, FormControlName } from '@angular/forms';
-import * as i1$2 from '@angular/platform-browser';
+import { NgControl, ControlContainer, FormControl, FormGroup, Validators, ReactiveFormsModule, NgModel, FormControlName } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
 import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@@ -52,12 +50,15 @@ class ItAbstractComponent {
         const kebabName = name.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
         return `${kebabName}-${ItAbstractComponent.instances++}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAbstractComponent, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItAbstractComponent, isStandalone: false, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAbstractComponent, decorators: [{
             type: Component,
-            args: [{ template: '' }]
+            args: [{
+                    template: '',
+                    standalone: false,
+                }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], valueChanges: [{
@@ -89,10 +90,10 @@ class VideoPlayerI18nService {
     getTranslations() {
         return mapToVideoJsTranslation(this.#translate.instant('it.video-player'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerI18nService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VideoPlayerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VideoPlayerI18nService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerI18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VideoPlayerI18nService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -188,30 +189,6 @@ function mapToVideoJsTranslation(translations) {
     };
 }
 
-const preferencesMap = { ck3: {} };
-const STORAGE_KEY = 'bs-ck3';
-/*
-  Possible choices:
-  false => Accept once
-  true => Accept always
-*/
-const rememberChoice = (service, remember) => {
-    preferencesMap.ck3[service] = remember;
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(preferencesMap.ck3));
-};
-const isChoiceRemembered = (service) => {
-    preferencesMap.ck3 = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
-    return Boolean(preferencesMap.ck3[service]) || false;
-};
-const clearAllRememberedChoices = () => {
-    localStorage.removeItem(STORAGE_KEY);
-};
-const cookies = {
-    rememberChoice,
-    isChoiceRemembered,
-    clearAllRememberedChoices,
-};
-
 const hasYoutubeVideo = (options) => options.source?.type === 'video/youtube';
 class VideoPlayerConfigService {
     #languageService = inject(VideoPlayerI18nService);
@@ -240,14 +217,38 @@ class VideoPlayerConfigService {
             }
             : config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerConfigService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VideoPlayerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VideoPlayerConfigService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VideoPlayerConfigService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
+const preferencesMap = { ck3: {} };
+const STORAGE_KEY = 'bs-ck3';
+/*
+  Possible choices:
+  false => Accept once
+  true => Accept always
+*/
+const rememberChoice = (service, remember) => {
+    preferencesMap.ck3[service] = remember;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(preferencesMap.ck3));
+};
+const isChoiceRemembered = (service) => {
+    preferencesMap.ck3 = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+    return Boolean(preferencesMap.ck3[service]) || false;
+};
+const clearAllRememberedChoices = () => {
+    localStorage.removeItem(STORAGE_KEY);
+};
+const cookies = {
+    rememberChoice,
+    isChoiceRemembered,
+    clearAllRememberedChoices,
+};
+
 var ViewType;
 (function (ViewType) {
     ViewType["Default"] = "DEFAULT";
@@ -259,9 +260,9 @@ var ViewType;
  */
 class ItVideoPlayerComponent extends ItAbstractComponent {
     #destroyRef;
-    constructor(config) {
+    constructor() {
         super();
-        this.config = config;
+        this.config = inject(VideoPlayerConfigService);
         this.player = null;
         this.viewTypes = ViewType;
         this.viewType = signal(undefined);
@@ -370,8 +371,8 @@ class ItVideoPlayerComponent extends ItAbstractComponent {
         v.setAttribute('preload', 'none');
         v.setAttribute('playsinline', '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerComponent, deps: [{ token: VideoPlayerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItVideoPlayerComponent, isStandalone: true, selector: "it-video-player", inputs: { options: "options" }, viewQueries: [{ propertyName: "videoPlayerRef", first: true, predicate: ["videoPlayer"], descendants: true }, { propertyName: "acceptOveralyRef", first: true, predicate: ["acceptOveraly"], descendants: true }, { propertyName: "acceptOverlayableRef", first: true, predicate: ["acceptOverlayable"], descendants: true }, { propertyName: "chrRememberRef", first: true, predicate: ["chkRemember"], descendants: true }], usesInheritance: true, ngImport: i0, template: `@switch (viewType()) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItVideoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItVideoPlayerComponent, isStandalone: true, selector: "it-video-player", inputs: { options: "options" }, viewQueries: [{ propertyName: "videoPlayerRef", first: true, predicate: ["videoPlayer"], descendants: true }, { propertyName: "acceptOveralyRef", first: true, predicate: ["acceptOveraly"], descendants: true }, { propertyName: "acceptOverlayableRef", first: true, predicate: ["acceptOverlayable"], descendants: true }, { propertyName: "chrRememberRef", first: true, predicate: ["chkRemember"], descendants: true }], usesInheritance: true, ngImport: i0, template: `@switch (viewType()) {
       @case (viewTypes.Default) {
         <div class="row">
           <ng-container *ngTemplateOutlet="videoTemplate"></ng-container>
@@ -443,7 +444,7 @@ class ItVideoPlayerComponent extends ItAbstractComponent {
       </div>
     </ng-template> `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItVideoPlayerComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -523,7 +524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [{ type: VideoPlayerConfigService }], propDecorators: { options: [{
+        }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], videoPlayerRef: [{
                 type: ViewChild,
@@ -640,12 +641,12 @@ class ItCollapseComponent extends ItAbstractComponent {
     dispose() {
         this.collapse?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItCollapseComponent, isStandalone: true, selector: "it-collapse", inputs: { multi: ["multi", "multi", inputToBoolean], opened: ["opened", "opened", inputToBoolean], class: "class" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itCollapse"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItCollapseComponent, isStandalone: true, selector: "it-collapse", inputs: { multi: ["multi", "multi", inputToBoolean], opened: ["opened", "opened", inputToBoolean], class: "class" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itCollapse"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCollapseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCollapseComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-collapse', exportAs: 'itCollapse', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'it-collapse', exportAs: 'itCollapse', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { multi: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -689,12 +690,12 @@ class ItAccordionComponent extends ItCollapseComponent {
             this._changeDetectorRef.detectChanges();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAccordionComponent, isStandalone: true, selector: "it-accordion", inputs: { title: "title" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItAccordionComponent, isStandalone: true, selector: "it-accordion", inputs: { title: "title" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAccordionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-accordion', exportAs: 'itAccordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'it-accordion', exportAs: 'itAccordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input,
                 args: [{ required: true }]
@@ -744,12 +745,12 @@ class ItIconComponent {
     constructor() {
         this.assetBasePath = inject(IT_ASSET_BASE_PATH);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", title: "title", labelWaria: "labelWaria" }, ngImport: i0, template: "<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n  @if (title || labelWaria) {\n    <title>{{ title || labelWaria }}</title>\n  }\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", title: "title", labelWaria: "labelWaria" }, ngImport: i0, template: "<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n  @if (title || labelWaria) {\n    <title>{{ title || labelWaria }}</title>\n  }\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItIconComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n  @if (title || labelWaria) {\n    <title>{{ title || labelWaria }}</title>\n  }\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'it-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<svg [attr.role]=\"role\" [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"title || labelWaria\" [class]=\"iconClass\">\n  @if (title || labelWaria) {\n    <title>{{ title || labelWaria }}</title>\n  }\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{
                 type: Input,
                 args: [{ required: true }]
@@ -811,12 +812,12 @@ class ItAlertComponent extends ItAbstractComponent {
     dispose() {
         this.alert?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAlertComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent], template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
+            args: [{ selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent], template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], dismissible: [{
@@ -849,12 +850,12 @@ class ItLinkComponent extends ItAbstractComponent {
             this._changeDetectorRef.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItLinkComponent, isStandalone: true, selector: "it-link", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!externalLink) {\n  <a [id]=\"id\" [class]=\"class\" [routerLinkActive]=\"'active'\" [routerLink]=\"(disabled ? null : href)!\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n} @else {\n  <a [id]=\"id\" [class]=\"class\" [attr.href]=\"disabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItLinkComponent, isStandalone: true, selector: "it-link", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!externalLink) {\n  <a [id]=\"id\" [class]=\"class\" [routerLinkActive]=\"'active'\" [routerLink]=\"(disabled ? null : href)!\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n} @else {\n  <a [id]=\"id\" [class]=\"class\" [attr.href]=\"disabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItLinkComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive, NgTemplateOutlet], template: "@if (!externalLink) {\n  <a [id]=\"id\" [class]=\"class\" [routerLinkActive]=\"'active'\" [routerLink]=\"(disabled ? null : href)!\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n} @else {\n  <a [id]=\"id\" [class]=\"class\" [attr.href]=\"disabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'it-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive, NgTemplateOutlet], template: "@if (!externalLink) {\n  <a [id]=\"id\" [class]=\"class\" [routerLinkActive]=\"'active'\" [routerLink]=\"(disabled ? null : href)!\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n} @else {\n  <a [id]=\"id\" [class]=\"class\" [attr.href]=\"disabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { href: [{
                 type: Input
             }], externalLink: [{
@@ -907,12 +908,12 @@ class ItDropdownItemComponent extends ItLinkComponent {
             this._changeDetectorRef.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition", mode: "mode" }, usesInheritance: true, ngImport: i0, template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition", mode: "mode" }, usesInheritance: true, ngImport: i0, template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItLinkComponent], template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
+            args: [{ selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItLinkComponent], template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
         }], propDecorators: { divider: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -1032,12 +1033,12 @@ class ItDropdownComponent extends ItAbstractComponent {
     dispose() {
         this.dropdown?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDropdownComponent, isStandalone: true, selector: "it-dropdown", inputs: { mode: "mode", color: "color", direction: "direction", fullWidth: ["fullWidth", "fullWidth", inputToBoolean], megamenu: ["megamenu", "megamenu", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, queries: [{ propertyName: "items", predicate: ItDropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{ direction }}\" [class.nav-item]=\"mode === 'nav'\" [class.megamenu]=\"megamenu\">\n  @if (mode === 'button') {\n    <button\n      #dropdownButton\n      [id]=\"id\"\n      [class]=\"buttonClass\"\n      type=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n    </button>\n  } @else {\n    <a\n      #dropdownButton\n      [id]=\"id\"\n      [class.btn]=\"mode === 'link'\"\n      [class.btn-dropdown]=\"mode === 'link'\"\n      [class.nav-link]=\"mode === 'nav'\"\n      class=\"dropdown-toggle\"\n      role=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\"></it-icon>\n    </a>\n  }\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"fullWidth\" [class.dark]=\"dark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItDropdownComponent, isStandalone: true, selector: "it-dropdown", inputs: { mode: "mode", color: "color", direction: "direction", fullWidth: ["fullWidth", "fullWidth", inputToBoolean], megamenu: ["megamenu", "megamenu", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, queries: [{ propertyName: "items", predicate: ItDropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{ direction }}\" [class.nav-item]=\"mode === 'nav'\" [class.megamenu]=\"megamenu\">\n  @if (mode === 'button') {\n    <button\n      #dropdownButton\n      [id]=\"id\"\n      [class]=\"buttonClass\"\n      type=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n    </button>\n  } @else {\n    <a\n      #dropdownButton\n      [id]=\"id\"\n      [class.btn]=\"mode === 'link'\"\n      [class.btn-dropdown]=\"mode === 'link'\"\n      [class.nav-link]=\"mode === 'nav'\"\n      class=\"dropdown-toggle\"\n      role=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\"></it-icon>\n    </a>\n  }\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"fullWidth\" [class.dark]=\"dark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-dropdown', exportAs: 'itDropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "<div class=\"dropdown {{ direction }}\" [class.nav-item]=\"mode === 'nav'\" [class.megamenu]=\"megamenu\">\n  @if (mode === 'button') {\n    <button\n      #dropdownButton\n      [id]=\"id\"\n      [class]=\"buttonClass\"\n      type=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n    </button>\n  } @else {\n    <a\n      #dropdownButton\n      [id]=\"id\"\n      [class.btn]=\"mode === 'link'\"\n      [class.btn-dropdown]=\"mode === 'link'\"\n      [class.nav-link]=\"mode === 'nav'\"\n      class=\"dropdown-toggle\"\n      role=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\"></it-icon>\n    </a>\n  }\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"fullWidth\" [class.dark]=\"dark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"] }]
+            args: [{ selector: 'it-dropdown', exportAs: 'itDropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "<div class=\"dropdown {{ direction }}\" [class.nav-item]=\"mode === 'nav'\" [class.megamenu]=\"megamenu\">\n  @if (mode === 'button') {\n    <button\n      #dropdownButton\n      [id]=\"id\"\n      [class]=\"buttonClass\"\n      type=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n    </button>\n  } @else {\n    <a\n      #dropdownButton\n      [id]=\"id\"\n      [class.btn]=\"mode === 'link'\"\n      [class.btn-dropdown]=\"mode === 'link'\"\n      [class.nav-link]=\"mode === 'nav'\"\n      class=\"dropdown-toggle\"\n      role=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\"></it-icon>\n    </a>\n  }\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"fullWidth\" [class.dark]=\"dark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"] }]
         }], propDecorators: { mode: [{
                 type: Input
             }], color: [{
@@ -1071,11 +1072,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 const dropdownComponents = [ItDropdownComponent, ItDropdownItemComponent];
 class ItDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownComponent, ItDropdownItemComponent], exports: [ItDropdownComponent, ItDropdownItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownItemComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownComponent, ItDropdownItemComponent], exports: [ItDropdownComponent, ItDropdownItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dropdownComponents,
@@ -1084,12 +1085,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
         }] });
 
 class ItAvatarDropdownItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarDropdownItemComponent, isStandalone: true, selector: "it-avatar-dropdown-item", inputs: { link: "link", title: "title", accesskey: "accesskey", tabindex: "tabindex" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItAvatarDropdownItemComponent, isStandalone: true, selector: "it-avatar-dropdown-item", inputs: { link: "link", title: "title", accesskey: "accesskey", tabindex: "tabindex" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarDropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-avatar-dropdown-item', template: '<ng-template><ng-content></ng-content></ng-template>', imports: [NgTemplateOutlet], styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
+            args: [{ selector: 'it-avatar-dropdown-item', template: '<ng-template><ng-content></ng-content></ng-template>', imports: [NgTemplateOutlet], styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
         }], propDecorators: { _implicitContent: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
@@ -1106,12 +1107,12 @@ class ItAvatarDropdownComponent {
     constructor() {
         this.componentClass = 'avatar avatar-dropdown';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAvatarDropdownComponent, isStandalone: true, selector: "it-avatar-dropdown", host: { properties: { "class": "this.componentClass" } }, queries: [{ propertyName: "items", predicate: ItAvatarDropdownItemComponent }], ngImport: i0, template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItAvatarDropdownComponent, isStandalone: true, selector: "it-avatar-dropdown", host: { properties: { "class": "this.componentClass" } }, queries: [{ propertyName: "items", predicate: ItAvatarDropdownItemComponent }], ngImport: i0, template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarDropdownComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-avatar-dropdown', imports: [ItDropdownModule, NgTemplateOutlet, RouterLink], template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
+            args: [{ selector: 'it-avatar-dropdown', imports: [ItDropdownModule, NgTemplateOutlet, RouterLink], template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
         }], propDecorators: { componentClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -1125,10 +1126,10 @@ class ItAvatarExtraTextDirective {
         const cssClass = 'extra-text';
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarExtraTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarExtraTextDirective, isStandalone: true, selector: "[itAvatarExtraText]", host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarExtraText"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarExtraTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ItAvatarExtraTextDirective, isStandalone: true, selector: "[itAvatarExtraText]", host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarExtraText"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarExtraTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarExtraTextDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1145,10 +1146,10 @@ class ItAvatarListItemDirective {
         const cssClass = `list-item`;
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarListItemDirective, isStandalone: true, selector: "[itAvatarListItem]", host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarListItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ItAvatarListItemDirective, isStandalone: true, selector: "[itAvatarListItem]", host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarListItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarListItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1160,12 +1161,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 args: ['class']
             }] } });
 class ItAvatarGroupItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarGroupItemComponent, isStandalone: true, selector: "it-avatar-item", viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<ng-template let-linkListItem="linkList">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItAvatarGroupItemComponent, isStandalone: true, selector: "it-avatar-item", viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<ng-template let-linkListItem="linkList">
     <ng-content></ng-content>
   </ng-template>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarGroupItemComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1182,8 +1183,8 @@ class ItAvatarGroupComponent {
     constructor() {
         this.linkList = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAvatarGroupComponent, isStandalone: true, selector: "it-avatar-group", inputs: { linkList: ["linkList", "linkList", inputToBoolean] }, host: { properties: { "class.link-list-wrapper": "this.linkList" } }, queries: [{ propertyName: "avatars", predicate: ItAvatarGroupItemComponent }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItAvatarGroupComponent, isStandalone: true, selector: "it-avatar-group", inputs: { linkList: ["linkList", "linkList", inputToBoolean] }, host: { properties: { "class.link-list-wrapper": "this.linkList" } }, queries: [{ propertyName: "avatars", predicate: ItAvatarGroupItemComponent }], ngImport: i0, template: `
     <ul [class]="linkList ? 'link-list avatar-group' : 'avatar-group-stacked'">
       @for (avatar of avatars; track avatar) {
         <li>
@@ -1193,10 +1194,9 @@ class ItAvatarGroupComponent {
     </ul>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarGroupComponent, decorators: [{
             type: Component,
             args: [{
-                    standalone: true,
                     selector: 'it-avatar-group',
                     imports: [NgTemplateOutlet],
                     template: `
@@ -1239,10 +1239,10 @@ class ItAvatarPresenceDirective {
         const cssClass = `avatar-presence ${this._presence}`;
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarPresenceDirective, isStandalone: true, selector: "[itAvatarPresence]", inputs: { presence: "presence" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarPresence"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ItAvatarPresenceDirective, isStandalone: true, selector: "[itAvatarPresence]", inputs: { presence: "presence" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarPresence"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarPresenceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarPresenceDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1275,10 +1275,10 @@ class ItAvatarStatusDirective {
         const cssClass = `avatar-status ${this._status}`;
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarStatusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarStatusDirective, isStandalone: true, selector: "[itAvatarStatus]", inputs: { status: "status" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarStatus"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarStatusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ItAvatarStatusDirective, isStandalone: true, selector: "[itAvatarStatus]", inputs: { status: "status" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarStatus"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarStatusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarStatusDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1303,10 +1303,10 @@ class ItAvatarWrapperDirective {
         }
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItAvatarWrapperDirective, isStandalone: true, selector: "[itAvatarWrapper]", inputs: { extraText: ["extraText", "extraText", inputToBoolean] }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarWrapper"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.3", type: ItAvatarWrapperDirective, isStandalone: true, selector: "[itAvatarWrapper]", inputs: { extraText: ["extraText", "extraText", inputToBoolean] }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatarWrapper"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarWrapperDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1397,10 +1397,10 @@ class ItAvatarDirective {
         }
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarDirective, isStandalone: true, selector: "[itAvatar]", inputs: { color: "color", size: "size" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatar"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ItAvatarDirective, isStandalone: true, selector: "[itAvatar]", inputs: { color: "color", size: "size" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatar"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1429,8 +1429,8 @@ const avatarComponents = [
     ItAvatarListItemDirective,
 ];
 class ItAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarGroupItemComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarGroupItemComponent,
             ItAvatarGroupComponent,
             ItAvatarDropdownComponent,
             ItAvatarDropdownItemComponent,
@@ -1449,9 +1449,9 @@ class ItAvatarModule {
             ItAvatarStatusDirective,
             ItAvatarPresenceDirective,
             ItAvatarListItemDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarDropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarDropdownComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: avatarComponents,
@@ -1474,10 +1474,10 @@ class ItBadgeDirective {
         }
         return badgeClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItBadgeDirective, isStandalone: true, selector: "[itBadge]", inputs: { color: ["itBadge", "color"], rounded: ["rounded", "rounded", inputToBoolean] }, host: { properties: { "class": "this.badgeClass" } }, exportAs: ["itBadge"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.3", type: ItBadgeDirective, isStandalone: true, selector: "[itBadge]", inputs: { color: ["itBadge", "color"], rounded: ["rounded", "rounded", inputToBoolean] }, host: { properties: { "class": "this.badgeClass" } }, exportAs: ["itBadge"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1505,12 +1505,12 @@ class ItProgressBarComponent {
         }
         return ` bg-${this.color}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItProgressBarComponent, isStandalone: true, selector: "it-progress-bar", inputs: { value: "value", showLabel: ["showLabel", "showLabel", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean], color: "color" }, ngImport: i0, template: "<div class=\"progress-bar-wrapper\">\n  @if (showLabel) {\n    <div class=\"progress-bar-label\">\n      <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n    </div>\n  }\n  <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n    @if (indeterminate) {\n      <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n    } @else {\n      <div\n        class=\"progress-bar{{ bgColor }}\"\n        role=\"progressbar\"\n        [style.width.%]=\"value\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"></div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItProgressBarComponent, isStandalone: true, selector: "it-progress-bar", inputs: { value: "value", showLabel: ["showLabel", "showLabel", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean], color: "color" }, ngImport: i0, template: "<div class=\"progress-bar-wrapper\">\n  @if (showLabel) {\n    <div class=\"progress-bar-label\">\n      <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n    </div>\n  }\n  <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n    @if (indeterminate) {\n      <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n    } @else {\n      <div\n        class=\"progress-bar{{ bgColor }}\"\n        role=\"progressbar\"\n        [style.width.%]=\"value\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"></div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div class=\"progress-bar-wrapper\">\n  @if (showLabel) {\n    <div class=\"progress-bar-label\">\n      <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n    </div>\n  }\n  <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n    @if (indeterminate) {\n      <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n    } @else {\n      <div\n        class=\"progress-bar{{ bgColor }}\"\n        role=\"progressbar\"\n        [style.width.%]=\"value\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"></div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'it-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div class=\"progress-bar-wrapper\">\n  @if (showLabel) {\n    <div class=\"progress-bar-label\">\n      <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n    </div>\n  }\n  <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n    @if (indeterminate) {\n      <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n    } @else {\n      <div\n        class=\"progress-bar{{ bgColor }}\"\n        role=\"progressbar\"\n        [style.width.%]=\"value\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"></div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { value: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1534,12 +1534,12 @@ class ItProgressButtonComponent {
     get isIndeterminate() {
         return typeof this.progress !== 'number' && !!this.progress;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItProgressButtonComponent, isStandalone: true, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (isProgress) {\n  <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n", dependencies: [{ kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItProgressButtonComponent, isStandalone: true, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (isProgress) {\n  <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n", dependencies: [{ kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItProgressButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'button[itButton][progress]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItProgressBarComponent], template: "<ng-content></ng-content>\n\n@if (isProgress) {\n  <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n" }]
+            args: [{ selector: 'button[itButton][progress]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItProgressBarComponent], template: "<ng-content></ng-content>\n\n@if (isProgress) {\n  <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n" }]
         }], propDecorators: { progress: [{
                 type: Input
             }], progressColor: [{
@@ -1551,8 +1551,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
  * @description Bootstrap italia custom button styles
  */
 class ItButtonDirective {
-    constructor(progressButtonComponent) {
-        this.progressButtonComponent = progressButtonComponent;
+    constructor() {
+        this.progressButtonComponent = inject(ItProgressButtonComponent, { optional: true, host: true });
         /**
          * The type attribute
          * @default button
@@ -1581,21 +1581,17 @@ class ItButtonDirective {
         }
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItButtonDirective, deps: [{ token: ItProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { properties: { "disabled": "this.disabled", "type": "this.type", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.3", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { properties: { "disabled": "this.disabled", "type": "this.type", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[itButton]',
                     exportAs: 'itButton',
                 }]
-        }], ctorParameters: () => [{ type: ItProgressButtonComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }], propDecorators: { color: [{
+        }], propDecorators: { color: [{
                 type: Input,
                 args: ['itButton']
             }], size: [{
@@ -1661,12 +1657,12 @@ class ItCalloutComponent {
                 return 'info-circle';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCalloutComponent, isStandalone: true, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon", labelWaria: "labelWaria" }, ngImport: i0, template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItCalloutComponent, isStandalone: true, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon", labelWaria: "labelWaria" }, ngImport: i0, template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCalloutComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-callout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItIconComponent], template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"] }]
+            args: [{ selector: 'it-callout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItIconComponent], template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], hiddenLabel: [{
@@ -1699,12 +1695,12 @@ class ItCardComponent extends ItAbstractComponent {
          */
         this.bodyClass = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { teaser: ["teaser", "teaser", inputToBoolean], special: ["special", "special", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], background: ["background", "background", inputToBoolean], borderBottom: ["borderBottom", "borderBottom", inputToBoolean], big: ["big", "big", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { teaser: ["teaser", "teaser", inputToBoolean], special: ["special", "special", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], background: ["background", "background", inputToBoolean], borderBottom: ["borderBottom", "borderBottom", inputToBoolean], big: ["big", "big", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCardComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
+            args: [{ selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
         }], propDecorators: { teaser: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -1740,12 +1736,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
  * @description element, image or text slide of carousel
  */
 class ItCarouselItemComponent extends ItAbstractComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItCarouselItemComponent, isStandalone: true, selector: "it-carousel-item", viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCarouselItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItCarouselItemComponent, isStandalone: true, selector: "it-carousel-item", viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCarouselItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-carousel-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'it-carousel-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { htmlContent: [{
                 type: ViewChild,
                 args: [TemplateRef]
@@ -1756,12 +1752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
  * @description A presentation component for scrolling through elements, images or text slides.
  */
 class ItCarouselComponent {
-    get typeClass() {
-        const typeClass = 'it-carousel-landscape-abstract';
-        return this.type === 'default' ? typeClass : typeClass + `-${this.type}`;
-    }
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         /**
          * The carousel type
          * @default default
@@ -1773,6 +1765,10 @@ class ItCarouselComponent {
          */
         this.trackClass = '';
     }
+    get typeClass() {
+        const typeClass = 'it-carousel-landscape-abstract';
+        return this.type === 'default' ? typeClass : typeClass + `-${this.type}`;
+    }
     ngAfterViewInit() {
         this.items?.changes
             .pipe(
@@ -1798,13 +1794,13 @@ class ItCarouselComponent {
     dispose() {
         this.carousel?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCarouselComponent, isStandalone: true, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: ["fullCarousel", "fullCarousel", inputToBoolean], bigImg: ["bigImg", "bigImg", inputToBoolean], standardImage: ["standardImage", "standardImage", inputToBoolean], lined: ["lined", "lined", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItCarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\">\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItCarouselComponent, isStandalone: true, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: ["fullCarousel", "fullCarousel", inputToBoolean], bigImg: ["bigImg", "bigImg", inputToBoolean], standardImage: ["standardImage", "standardImage", inputToBoolean], lined: ["lined", "lined", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItCarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\">\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCarouselComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-carousel', exportAs: 'itCarousel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\">\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+            args: [{ selector: 'it-carousel', exportAs: 'itCarousel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\">\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { title: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -1832,11 +1828,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 const carouselComponents = [ItCarouselComponent, ItCarouselItemComponent];
 class ItCarouselModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, imports: [ItCarouselComponent, ItCarouselItemComponent], exports: [ItCarouselComponent, ItCarouselItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItCarouselModule, imports: [ItCarouselComponent, ItCarouselItemComponent], exports: [ItCarouselComponent, ItCarouselItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCarouselModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: carouselComponents,
@@ -1948,12 +1944,12 @@ class ItChipComponent {
     clickToClose() {
         this.closeEvent.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItChipComponent, isStandalone: true, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div\n  class=\"chip\"\n  [ngClass]=\"[\n    !showCloseButton ? 'chip-simple' : 'alert',\n    size === 'lg' ? 'chip-lg' : '',\n    color ? 'chip-' + color : '',\n    disabled ? 'chip-disabled' : '',\n  ]\">\n  @if (icon) {\n    <svg class=\"icon icon-xs\">\n      <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n    </svg>\n  }\n  @if (avatar) {\n    <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n  }\n  <span class=\"chip-label\">{{ label }}</span>\n  @if (showCloseButton) {\n    <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n      <svg class=\"icon\">\n        <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n      </svg>\n      <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItChipComponent, isStandalone: true, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div\n  class=\"chip\"\n  [ngClass]=\"[\n    !showCloseButton ? 'chip-simple' : 'alert',\n    size === 'lg' ? 'chip-lg' : '',\n    color ? 'chip-' + color : '',\n    disabled ? 'chip-disabled' : '',\n  ]\">\n  @if (icon) {\n    <svg class=\"icon icon-xs\">\n      <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n    </svg>\n  }\n  @if (avatar) {\n    <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n  }\n  <span class=\"chip-label\">{{ label }}</span>\n  @if (showCloseButton) {\n    <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n      <svg class=\"icon\">\n        <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n      </svg>\n      <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItChipComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TranslateModule], template: "<div\n  class=\"chip\"\n  [ngClass]=\"[\n    !showCloseButton ? 'chip-simple' : 'alert',\n    size === 'lg' ? 'chip-lg' : '',\n    color ? 'chip-' + color : '',\n    disabled ? 'chip-disabled' : '',\n  ]\">\n  @if (icon) {\n    <svg class=\"icon icon-xs\">\n      <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n    </svg>\n  }\n  @if (avatar) {\n    <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n  }\n  <span class=\"chip-label\">{{ label }}</span>\n  @if (showCloseButton) {\n    <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n      <svg class=\"icon\">\n        <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n      </svg>\n      <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n  }\n</div>\n" }]
+            args: [{ selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TranslateModule], template: "<div\n  class=\"chip\"\n  [ngClass]=\"[\n    !showCloseButton ? 'chip-simple' : 'alert',\n    size === 'lg' ? 'chip-lg' : '',\n    color ? 'chip-' + color : '',\n    disabled ? 'chip-disabled' : '',\n  ]\">\n  @if (icon) {\n    <svg class=\"icon icon-xs\">\n      <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n    </svg>\n  }\n  @if (avatar) {\n    <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n  }\n  <span class=\"chip-label\">{{ label }}</span>\n  @if (showCloseButton) {\n    <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n      <svg class=\"icon\">\n        <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n      </svg>\n      <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], showCloseButton: [{
@@ -1975,6 +1971,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItDimmerComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this._active = false;
+        this._color = '';
+    }
     /**
      * Dimmer status
      * @default false
@@ -1995,43 +1996,38 @@ class ItDimmerComponent {
     get color() {
         return this._color;
     }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this._active = false;
-        this._color = '';
-    }
     ngOnInit() {
         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, '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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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.9 }))]),
                 transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-dimmer', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+            args: [{ selector: 'it-dimmer', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('fade', [
                             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, 'show']\">\n    <div class=\"dimmer-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
+        }], propDecorators: { active: [{
                 type: Input
             }], color: [{
                 type: Input
             }] } });
 
 class ItDimmerIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItDimmerIconComponent, isStandalone: true, selector: "it-dimmer-icon", ngImport: i0, template: "<div class=\"dimmer-icon\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItDimmerIconComponent, isStandalone: true, selector: "it-dimmer-icon", ngImport: i0, template: "<div class=\"dimmer-icon\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerIconComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-dimmer-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"dimmer-icon\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'it-dimmer-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"dimmer-icon\">\n  <ng-content></ng-content>\n</div>\n" }]
         }] });
 
 class ItDimmerButtonsComponent {
@@ -2048,23 +2044,23 @@ class ItDimmerButtonsComponent {
     get hasOneButton() {
         return this._hasOneButton;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItDimmerButtonsComponent, isStandalone: true, selector: "it-dimmer-buttons", inputs: { hasOneButton: "hasOneButton" }, ngImport: i0, template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItDimmerButtonsComponent, isStandalone: true, selector: "it-dimmer-buttons", inputs: { hasOneButton: "hasOneButton" }, ngImport: i0, template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ 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: ItDimmerButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerButtonsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-dimmer-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'it-dimmer-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { hasOneButton: [{
                 type: Input
             }] } });
 
 const dimmerComponents = [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent];
 class ItDimmerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, imports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent], exports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerModule, imports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent], exports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDimmerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dimmerComponents,
@@ -2073,6 +2069,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
         }] });
 
 class ItForwardDirective {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this._itForward = undefined;
+    }
     /**
      * Indica, se HTMLElement, l'elemento a cui navigare, o se stringa, il selettore che selezionerà l'elemento a cui navigare.
      */
@@ -2082,10 +2082,6 @@ class ItForwardDirective {
     get itForward() {
         return this._itForward;
     }
-    constructor(document) {
-        this.document = document;
-        this._itForward = undefined;
-    }
     onClick(event) {
         event.preventDefault();
         if (this.itForward) {
@@ -2105,21 +2101,17 @@ class ItForwardDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItForwardDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItForwardDirective, isStandalone: true, selector: "[itForward]", inputs: { itForward: "itForward" }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "forward" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItForwardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: ItForwardDirective, isStandalone: true, selector: "[itForward]", inputs: { itForward: "itForward" }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "forward" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItForwardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItForwardDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[itForward]',
-                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
                     host: { class: 'forward' },
                 }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { itForward: [{
+        }], propDecorators: { itForward: [{
                 type: Input
             }], onClick: [{
                 type: HostListener,
@@ -2127,12 +2119,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItListComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItListComponent, isStandalone: true, selector: "it-list", inputs: { linkList: ["linkList", "linkList", inputToBoolean], linkSubList: ["linkSubList", "linkSubList", inputToBoolean], multiline: ["multiline", "multiline", inputToBoolean] }, ngImport: i0, template: "@if (!linkSubList) {\n  <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n    <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </ul>\n  </div>\n}\n@if (linkSubList) {\n  <ul class=\"link-sublist\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItListComponent, isStandalone: true, selector: "it-list", inputs: { linkList: ["linkList", "linkList", inputToBoolean], linkSubList: ["linkSubList", "linkSubList", inputToBoolean], multiline: ["multiline", "multiline", inputToBoolean] }, ngImport: i0, template: "@if (!linkSubList) {\n  <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n    <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </ul>\n  </div>\n}\n@if (linkSubList) {\n  <ul class=\"link-sublist\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItListComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (!linkSubList) {\n  <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n    <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </ul>\n  </div>\n}\n@if (linkSubList) {\n  <ul class=\"link-sublist\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n" }]
+            args: [{ selector: 'it-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (!linkSubList) {\n  <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n    <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </ul>\n  </div>\n}\n@if (linkSubList) {\n  <ul class=\"link-sublist\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n" }]
         }], propDecorators: { linkList: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -2145,9 +2137,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItListItemComponent extends ItLinkComponent {
-    constructor(elRef) {
-        super();
-        this.elRef = elRef;
+    constructor() {
+        super(...arguments);
+        this.elRef = inject(ElementRef);
     }
     /**
      * The avatar url
@@ -2183,13 +2175,13 @@ class ItListItemComponent extends ItLinkComponent {
         }
         return itemClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItListItemComponent, isStandalone: true, selector: "it-list-item", inputs: { active: ["active", "active", inputToBoolean], size: "size", iconLeft: ["iconLeft", "iconLeft", inputToBoolean], iconRight: ["iconRight", "iconRight", inputToBoolean], avatar: "avatar", image: "image" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItListItemComponent, isStandalone: true, selector: "it-list-item", inputs: { active: ["active", "active", inputToBoolean], size: "size", iconLeft: ["iconLeft", "iconLeft", inputToBoolean], iconRight: ["iconRight", "iconRight", inputToBoolean], avatar: "avatar", image: "image" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItListItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItLinkComponent], template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
+            args: [{ selector: 'it-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItLinkComponent], template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"] }]
+        }], propDecorators: { active: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
             }], size: [{
@@ -2208,11 +2200,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 const listComponents = [ItListComponent, ItListItemComponent];
 class ItListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, imports: [ItListComponent, ItListItemComponent], exports: [ItListComponent, ItListItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItListModule, imports: [ItListComponent, ItListItemComponent], exports: [ItListComponent, ItListItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItListModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: listComponents,
@@ -2351,12 +2343,12 @@ class ItModalComponent extends ItAbstractComponent {
     dispose() {
         this.modal?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItModalComponent, isStandalone: true, selector: "it-modal", inputs: { closeButton: ["closeButton", "closeButton", inputToBoolean], alertModal: ["alertModal", "alertModal", inputToBoolean], dialogLinkList: ["dialogLinkList", "dialogLinkList", inputToBoolean], popconfirm: ["popconfirm", "popconfirm", inputToBoolean], scrollable: ["scrollable", "scrollable", inputToBoolean], fade: ["fade", "fade", inputToBoolean], alignment: "alignment", size: "size", backdrop: "backdrop", focus: ["focus", "focus", inputToBoolean], keyboard: ["keyboard", "keyboard", inputToBoolean], footerShadow: ["footerShadow", "footerShadow", inputToBoolean], options: "options" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", hidePreventedEvent: "hidePreventedEvent" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div\n  #modalElement\n  [id]=\"id\"\n  [class]=\"modalClass\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-hidden=\"true\"\n  [attr.aria-labelledby]=\"id + '-title'\"\n  [attr.aria-describedby]=\"id + '-description'\">\n  <div [class]=\"dialogClass\">\n    <div class=\"modal-content\" role=\"document\">\n      <div class=\"modal-header\">\n        <ng-content select=\"[beforeTitle]\"></ng-content>\n\n        <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n          <ng-content select=\"[modalTitle]\"></ng-content>\n        </h2>\n\n        @if (closeButton) {\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n        }\n      </div>\n\n      <div class=\"modal-body\">\n        <div id=\"{{ id }}-description\">\n          <ng-content select=\"[description]\"></ng-content>\n        </div>\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItModalComponent, isStandalone: true, selector: "it-modal", inputs: { closeButton: ["closeButton", "closeButton", inputToBoolean], alertModal: ["alertModal", "alertModal", inputToBoolean], dialogLinkList: ["dialogLinkList", "dialogLinkList", inputToBoolean], popconfirm: ["popconfirm", "popconfirm", inputToBoolean], scrollable: ["scrollable", "scrollable", inputToBoolean], fade: ["fade", "fade", inputToBoolean], alignment: "alignment", size: "size", backdrop: "backdrop", focus: ["focus", "focus", inputToBoolean], keyboard: ["keyboard", "keyboard", inputToBoolean], footerShadow: ["footerShadow", "footerShadow", inputToBoolean], options: "options" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", hidePreventedEvent: "hidePreventedEvent" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div\n  #modalElement\n  [id]=\"id\"\n  [class]=\"modalClass\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-hidden=\"true\"\n  [attr.aria-labelledby]=\"id + '-title'\"\n  [attr.aria-describedby]=\"id + '-description'\">\n  <div [class]=\"dialogClass\">\n    <div class=\"modal-content\" role=\"document\">\n      <div class=\"modal-header\">\n        <ng-content select=\"[beforeTitle]\"></ng-content>\n\n        <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n          <ng-content select=\"[modalTitle]\"></ng-content>\n        </h2>\n\n        @if (closeButton) {\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n        }\n      </div>\n\n      <div class=\"modal-body\">\n        <div id=\"{{ id }}-description\">\n          <ng-content select=\"[description]\"></ng-content>\n        </div>\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItModalComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-modal', exportAs: 'itModal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div\n  #modalElement\n  [id]=\"id\"\n  [class]=\"modalClass\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-hidden=\"true\"\n  [attr.aria-labelledby]=\"id + '-title'\"\n  [attr.aria-describedby]=\"id + '-description'\">\n  <div [class]=\"dialogClass\">\n    <div class=\"modal-content\" role=\"document\">\n      <div class=\"modal-header\">\n        <ng-content select=\"[beforeTitle]\"></ng-content>\n\n        <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n          <ng-content select=\"[modalTitle]\"></ng-content>\n        </h2>\n\n        @if (closeButton) {\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n        }\n      </div>\n\n      <div class=\"modal-body\">\n        <div id=\"{{ id }}-description\">\n          <ng-content select=\"[description]\"></ng-content>\n        </div>\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"] }]
+            args: [{ selector: 'it-modal', exportAs: 'itModal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div\n  #modalElement\n  [id]=\"id\"\n  [class]=\"modalClass\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-hidden=\"true\"\n  [attr.aria-labelledby]=\"id + '-title'\"\n  [attr.aria-describedby]=\"id + '-description'\">\n  <div [class]=\"dialogClass\">\n    <div class=\"modal-content\" role=\"document\">\n      <div class=\"modal-header\">\n        <ng-content select=\"[beforeTitle]\"></ng-content>\n\n        <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n          <ng-content select=\"[modalTitle]\"></ng-content>\n        </h2>\n\n        @if (closeButton) {\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n        }\n      </div>\n\n      <div class=\"modal-body\">\n        <div id=\"{{ id }}-description\">\n          <ng-content select=\"[description]\"></ng-content>\n        </div>\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"] }]
         }], propDecorators: { closeButton: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -2531,18 +2523,18 @@ class ItNotificationService {
             position,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNotificationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class ItNotificationsComponent {
-    constructor(_changeDetectorRef, _notificationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._notificationService = _notificationService;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._notificationService = inject(ItNotificationService);
         /**
          * Default notifications duration (milliseconds)
          * @default 8000
@@ -2626,13 +2618,13 @@ class ItNotificationsComponent {
                 return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ItNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItNotificationsComponent, isStandalone: true, selector: "it-notifications", inputs: { duration: "duration", position: "position", dismissible: ["dismissible", "dismissible", inputToBoolean] }, ngImport: i0, template: "@for (notification of notifications; track notification.id) {\n  <div\n    [id]=\"notification.id\"\n    class=\"notification {{ notification.position }} {{ notification.type }}\"\n    [class.with-icon]=\"!!notification.icon\"\n    [class.dismissable]=\"notification.dismissible\"\n    role=\"alert\"\n    [attr.aria-labelledby]=\"notification.id + '-title'\">\n    <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n      @if (notification.icon) {\n        <it-icon [name]=\"notification.icon\"></it-icon>\n      }\n      <ng-container>{{ notification.title }}</ng-container>\n    </h2>\n    @if (notification.message) {\n      <p>{{ notification.message }}</p>\n    }\n    @if (notification.dismissible) {\n      <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n        <it-icon name=\"close\"></it-icon>\n        <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItNotificationsComponent, isStandalone: true, selector: "it-notifications", inputs: { duration: "duration", position: "position", dismissible: ["dismissible", "dismissible", inputToBoolean] }, ngImport: i0, template: "@for (notification of notifications; track notification.id) {\n  <div\n    [id]=\"notification.id\"\n    class=\"notification {{ notification.position }} {{ notification.type }}\"\n    [class.with-icon]=\"!!notification.icon\"\n    [class.dismissable]=\"notification.dismissible\"\n    role=\"alert\"\n    [attr.aria-labelledby]=\"notification.id + '-title'\">\n    <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n      @if (notification.icon) {\n        <it-icon [name]=\"notification.icon\"></it-icon>\n      }\n      <ng-container>{{ notification.title }}</ng-container>\n    </h2>\n    @if (notification.message) {\n      <p>{{ notification.message }}</p>\n    }\n    @if (notification.dismissible) {\n      <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n        <it-icon name=\"close\"></it-icon>\n        <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNotificationsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-notifications', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule], template: "@for (notification of notifications; track notification.id) {\n  <div\n    [id]=\"notification.id\"\n    class=\"notification {{ notification.position }} {{ notification.type }}\"\n    [class.with-icon]=\"!!notification.icon\"\n    [class.dismissable]=\"notification.dismissible\"\n    role=\"alert\"\n    [attr.aria-labelledby]=\"notification.id + '-title'\">\n    <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n      @if (notification.icon) {\n        <it-icon [name]=\"notification.icon\"></it-icon>\n      }\n      <ng-container>{{ notification.title }}</ng-container>\n    </h2>\n    @if (notification.message) {\n      <p>{{ notification.message }}</p>\n    }\n    @if (notification.dismissible) {\n      <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n        <it-icon name=\"close\"></it-icon>\n        <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [".notification{z-index:10000}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ItNotificationService }], propDecorators: { duration: [{
+            args: [{ selector: 'it-notifications', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule], template: "@for (notification of notifications; track notification.id) {\n  <div\n    [id]=\"notification.id\"\n    class=\"notification {{ notification.position }} {{ notification.type }}\"\n    [class.with-icon]=\"!!notification.icon\"\n    [class.dismissable]=\"notification.dismissible\"\n    role=\"alert\"\n    [attr.aria-labelledby]=\"notification.id + '-title'\">\n    <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n      @if (notification.icon) {\n        <it-icon [name]=\"notification.icon\"></it-icon>\n      }\n      <ng-container>{{ notification.title }}</ng-container>\n    </h2>\n    @if (notification.message) {\n      <p>{{ notification.message }}</p>\n    }\n    @if (notification.dismissible) {\n      <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n        <it-icon name=\"close\"></it-icon>\n        <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [".notification{z-index:10000}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { duration: [{
                 type: Input
             }], position: [{
                 type: Input
@@ -2648,11 +2640,11 @@ class ItAbstractFormComponent extends ItAbstractComponent {
     set disabled(isDisabled) {
         this.setDisabledState(isDisabled);
     }
-    constructor(_translateService, _ngControl, fgd) {
+    constructor() {
         super();
-        this._translateService = _translateService;
-        this._ngControl = _ngControl;
-        this.fgd = fgd;
+        this._translateService = inject(TranslateService);
+        this._ngControl = inject(NgControl, { self: true, optional: true });
+        this.fgd = inject(ControlContainer, { optional: true });
         /**
          * Validation color display mode (validation triggered if field is touched or not pristine)
          * - <b>true</b>: Always show the validation color
@@ -2812,19 +2804,16 @@ class ItAbstractFormComponent extends ItAbstractComponent {
             this.validationMode = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, deps: [{ token: i1.TranslateService }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItAbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: ["disabled", "disabled", inputToBoolean] }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAbstractFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItAbstractFormComponent, isStandalone: false, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: ["disabled", "disabled", inputToBoolean] }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAbstractFormComponent, decorators: [{
             type: Component,
-            args: [{ template: '' }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i1$1.NgControl, decorators: [{
-                    type: Self
-                }, {
-                    type: Optional
-                }] }, { type: i1$1.ControlContainer, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { label: [{
+            args: [{
+                    template: '',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], validationMode: [{
                 type: Input
@@ -3156,7 +3145,7 @@ class ItInputComponent extends ItAbstractFormComponent {
         if (this.type !== 'number') {
             return;
         }
-        const step = this.step === 'any' ? 1 : this.step ?? 1;
+        const step = this.step === 'any' ? 1 : (this.step ?? 1);
         let value = Number(this.control.value);
         value = (isNaN(value) ? 0 : value) + (decrease ? -step : step);
         value = Math.round(value * 1e12) / 1e12; // prevent js decimal error
@@ -3168,12 +3157,12 @@ class ItInputComponent extends ItAbstractFormComponent {
         }
         this.control.setValue(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-symbol-label]=\"percentage || currency\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-symbol-label]=\"percentage || currency\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItInputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TranslateModule, AsyncPipe], template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-symbol-label]=\"percentage || currency\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
+            args: [{ selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TranslateModule, AsyncPipe], template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-symbol-label]=\"percentage || currency\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
@@ -3288,12 +3277,12 @@ class ItPaginationComponent {
         event.preventDefault();
         this.changerEvent.emit(value); // emit new changer value
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItPaginationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, LowerCasePipe, ItDropdownModule, ItInputComponent, ReactiveFormsModule], template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n" }]
+            args: [{ selector: 'it-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, LowerCasePipe, ItDropdownModule, ItInputComponent, ReactiveFormsModule], template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n" }]
         }], ctorParameters: () => [], propDecorators: { currentPage: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3375,8 +3364,8 @@ class ItPopoverDirective {
             this.element.setAttribute('data-bs-trigger', trigger);
         }
     }
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor() {
+        this._elementRef = inject(ElementRef);
         /**
          * This event fires immediately when the show method is called.
          */
@@ -3459,17 +3448,17 @@ class ItPopoverDirective {
     update() {
         this.popover?.disable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItPopoverDirective, isStandalone: true, selector: "[itPopover]", inputs: { content: ["itPopover", "content"], popoverTitle: "popoverTitle", popoverPlacement: "popoverPlacement", popoverContainer: "popoverContainer", popoverHtml: ["popoverHtml", "popoverHtml", inputToBoolean], popoverTrigger: "popoverTrigger" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itPopover"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.3", type: ItPopoverDirective, isStandalone: true, selector: "[itPopover]", inputs: { content: ["itPopover", "content"], popoverTitle: "popoverTitle", popoverPlacement: "popoverPlacement", popoverContainer: "popoverContainer", popoverHtml: ["popoverHtml", "popoverHtml", inputToBoolean], popoverTrigger: "popoverTrigger" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itPopover"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItPopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[itPopover]',
                     exportAs: 'itPopover',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { content: [{
+        }], ctorParameters: () => [], propDecorators: { content: [{
                 type: Input,
                 args: ['itPopover']
             }], popoverTitle: [{
@@ -3503,12 +3492,12 @@ class ItSpinnerComponent {
          */
         this.active = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSpinnerComponent, isStandalone: true, selector: "it-spinner", inputs: { active: ["active", "active", inputToBoolean], small: ["small", "small", inputToBoolean], double: ["double", "double", inputToBoolean] }, ngImport: i0, template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n  @if (double) {\n    <div class=\"progress-spinner-inner\"></div>\n    <div class=\"progress-spinner-inner\"></div>\n  }\n  <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSpinnerComponent, isStandalone: true, selector: "it-spinner", inputs: { active: ["active", "active", inputToBoolean], small: ["small", "small", inputToBoolean], double: ["double", "double", inputToBoolean] }, ngImport: i0, template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n  @if (double) {\n    <div class=\"progress-spinner-inner\"></div>\n    <div class=\"progress-spinner-inner\"></div>\n  }\n  <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-spinner', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n  @if (double) {\n    <div class=\"progress-spinner-inner\"></div>\n    <div class=\"progress-spinner-inner\"></div>\n  }\n  <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n" }]
+            args: [{ selector: 'it-spinner', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n  @if (double) {\n    <div class=\"progress-spinner-inner\"></div>\n    <div class=\"progress-spinner-inner\"></div>\n  }\n  <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n" }]
         }], propDecorators: { active: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -3521,12 +3510,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItSteppersItemComponent extends ItAbstractComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItSteppersItemComponent, isStandalone: true, selector: "it-steppers-item", inputs: { label: "label", icon: "icon", iconTitle: "iconTitle" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItSteppersItemComponent, isStandalone: true, selector: "it-steppers-item", inputs: { label: "label", icon: "icon", iconTitle: "iconTitle" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-steppers-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'it-steppers-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3540,8 +3529,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItSteppersContainerComponent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         /**
          * Show the stepper header
          * @default true
@@ -3578,13 +3567,13 @@ class ItSteppersContainerComponent {
     ngOnDestroy() {
         this.stepsSubscriptions?.forEach(step => step.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersContainerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-steppers-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet, TranslateModule, ItButtonDirective, ItProgressBarComponent, ItProgressButtonComponent], template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { activeStep: [{
+            args: [{ selector: 'it-steppers-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet, TranslateModule, ItButtonDirective, ItProgressBarComponent, ItProgressButtonComponent], template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { activeStep: [{
                 type: Input,
                 args: [{ required: true }]
             }], showHeader: [{
@@ -3645,11 +3634,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 const steppersComponents = [ItSteppersContainerComponent, ItSteppersItemComponent];
 class ItSteppersModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent, ItSteppersItemComponent], exports: [ItSteppersContainerComponent, ItSteppersItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent, ItSteppersItemComponent], exports: [ItSteppersContainerComponent, ItSteppersItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: steppersComponents,
@@ -3669,12 +3658,12 @@ class ItTabItemComponent extends ItAbstractComponent {
         super.ngAfterViewInit();
         this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItTabItemComponent, isStandalone: true, selector: "it-tab-item", inputs: { label: "label", icon: "icon", active: ["active", "active", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItTabItemComponent, isStandalone: true, selector: "it-tab-item", inputs: { label: "label", icon: "icon", active: ["active", "active", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTabItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-tab-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'it-tab-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -3739,12 +3728,12 @@ class ItTabContainerComponent extends ItAbstractComponent {
         $event.preventDefault();
         this.tabAdded.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTabContainerComponent, isStandalone: true, selector: "it-tab-container", inputs: { auto: ["auto", "auto", inputToBoolean], iconText: ["iconText", "iconText", inputToBoolean], dark: ["dark", "dark", inputToBoolean], cards: ["cards", "cards", inputToBoolean], vertical: ["vertical", "vertical", inputToBoolean], inverted: ["inverted", "inverted", inputToBoolean], editable: ["editable", "editable", inputToBoolean] }, outputs: { tabSelected: "tabSelected", tabClosed: "tabClosed", tabAdded: "tabAdded" }, queries: [{ propertyName: "tabs", predicate: ItTabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [class.row]=\"vertical\"\n  [class.flex-row-reverse]=\"inverted && vertical\"\n  [class.d-flex]=\"inverted && !vertical\"\n  [class.flex-column-reverse]=\"inverted && !vertical\">\n  <div\n    [class.col-5]=\"inverted && vertical\"\n    [class.col-md-4]=\"inverted && vertical\"\n    [class.col-lg-3]=\"inverted && vertical\"\n    [class.col-4]=\"!inverted && vertical\"\n    [class.col-md-3]=\"!inverted && vertical\">\n    @if (tabs) {\n      <ul\n        class=\"nav nav-tabs\"\n        [class.nav-tabs-editable]=\"editable\"\n        [class.nav-tabs-cards]=\"cards\"\n        [class.nav-tabs-vertical]=\"vertical\"\n        [class.auto]=\"auto\"\n        [class.nav-tabs-icon-text]=\"iconText\"\n        [class.nav-dark]=\"dark\"\n        role=\"tablist\">\n        @for (tab of tabs; track tab.id; let i = $index) {\n          <li class=\"nav-item\">\n            <a\n              #tabNavLinks\n              [id]=\"tab.id + '-tab-link'\"\n              role=\"tab\"\n              class=\"nav-link\"\n              [class.active]=\"tab.active\"\n              [class.disabled]=\"tab.disabled\"\n              [attr.href]=\"'#' + tab.id + '-tab'\"\n              [attr.aria-controls]=\"tab.id + '-tab'\"\n              (click)=\"onTab(tab)\">\n              @if (tab.icon) {\n                <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n              }\n              {{ tab.label }}\n            </a>\n            @if (editable) {\n              <a class=\"nav-link-close\" (click)=\"clickToClose(i)\" (keypress)=\"clickToClose(i)\" [attr.disabled]=\"tab.disabled\">\n                <it-icon name=\"close\"></it-icon>\n              </a>\n            }\n          </li>\n        }\n        @if (editable) {\n          <li class=\"nav-item\">\n            <a href=\"#\" class=\"nav-tab-add\" (click)=\"clickToAdd($event)\" (keypress)=\"clickToAdd($event)\"\n              ><span class=\"visually-hidden\"> Aggiungi un tab</span></a\n            >\n          </li>\n        }\n      </ul>\n    }\n  </div>\n  <div\n    [class.col-7]=\"inverted && vertical\"\n    [class.col-md-8]=\"inverted && vertical\"\n    [class.col-lg-9]=\"inverted && vertical\"\n    [class.col-8]=\"!inverted && vertical\"\n    [class.col-md-9]=\"!inverted && vertical\">\n    @if (tabs) {\n      <div class=\"tab-content\">\n        @for (tab of tabs; track tab.id) {\n          <div\n            [id]=\"tab.id + '-tab'\"\n            class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n            [class.active]=\"tab.active\"\n            [class.show]=\"tab.active\"\n            role=\"tabpanel\"\n            [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n            <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTabContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItTabContainerComponent, isStandalone: true, selector: "it-tab-container", inputs: { auto: ["auto", "auto", inputToBoolean], iconText: ["iconText", "iconText", inputToBoolean], dark: ["dark", "dark", inputToBoolean], cards: ["cards", "cards", inputToBoolean], vertical: ["vertical", "vertical", inputToBoolean], inverted: ["inverted", "inverted", inputToBoolean], editable: ["editable", "editable", inputToBoolean] }, outputs: { tabSelected: "tabSelected", tabClosed: "tabClosed", tabAdded: "tabAdded" }, queries: [{ propertyName: "tabs", predicate: ItTabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [class.row]=\"vertical\"\n  [class.flex-row-reverse]=\"inverted && vertical\"\n  [class.d-flex]=\"inverted && !vertical\"\n  [class.flex-column-reverse]=\"inverted && !vertical\">\n  <div\n    [class.col-5]=\"inverted && vertical\"\n    [class.col-md-4]=\"inverted && vertical\"\n    [class.col-lg-3]=\"inverted && vertical\"\n    [class.col-4]=\"!inverted && vertical\"\n    [class.col-md-3]=\"!inverted && vertical\">\n    @if (tabs) {\n      <ul\n        class=\"nav nav-tabs\"\n        [class.nav-tabs-editable]=\"editable\"\n        [class.nav-tabs-cards]=\"cards\"\n        [class.nav-tabs-vertical]=\"vertical\"\n        [class.auto]=\"auto\"\n        [class.nav-tabs-icon-text]=\"iconText\"\n        [class.nav-dark]=\"dark\"\n        role=\"tablist\">\n        @for (tab of tabs; track tab.id; let i = $index) {\n          <li class=\"nav-item\">\n            <a\n              #tabNavLinks\n              [id]=\"tab.id + '-tab-link'\"\n              role=\"tab\"\n              class=\"nav-link\"\n              [class.active]=\"tab.active\"\n              [class.disabled]=\"tab.disabled\"\n              [attr.href]=\"'#' + tab.id + '-tab'\"\n              [attr.aria-controls]=\"tab.id + '-tab'\"\n              (click)=\"onTab(tab)\">\n              @if (tab.icon) {\n                <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n              }\n              {{ tab.label }}\n            </a>\n            @if (editable) {\n              <a class=\"nav-link-close\" (click)=\"clickToClose(i)\" (keypress)=\"clickToClose(i)\" [attr.disabled]=\"tab.disabled\">\n                <it-icon name=\"close\"></it-icon>\n              </a>\n            }\n          </li>\n        }\n        @if (editable) {\n          <li class=\"nav-item\">\n            <a href=\"#\" class=\"nav-tab-add\" (click)=\"clickToAdd($event)\" (keypress)=\"clickToAdd($event)\"\n              ><span class=\"visually-hidden\"> Aggiungi un tab</span></a\n            >\n          </li>\n        }\n      </ul>\n    }\n  </div>\n  <div\n    [class.col-7]=\"inverted && vertical\"\n    [class.col-md-8]=\"inverted && vertical\"\n    [class.col-lg-9]=\"inverted && vertical\"\n    [class.col-8]=\"!inverted && vertical\"\n    [class.col-md-9]=\"!inverted && vertical\">\n    @if (tabs) {\n      <div class=\"tab-content\">\n        @for (tab of tabs; track tab.id) {\n          <div\n            [id]=\"tab.id + '-tab'\"\n            class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n            [class.active]=\"tab.active\"\n            [class.show]=\"tab.active\"\n            role=\"tabpanel\"\n            [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n            <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTabContainerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "<div\n  [class.row]=\"vertical\"\n  [class.flex-row-reverse]=\"inverted && vertical\"\n  [class.d-flex]=\"inverted && !vertical\"\n  [class.flex-column-reverse]=\"inverted && !vertical\">\n  <div\n    [class.col-5]=\"inverted && vertical\"\n    [class.col-md-4]=\"inverted && vertical\"\n    [class.col-lg-3]=\"inverted && vertical\"\n    [class.col-4]=\"!inverted && vertical\"\n    [class.col-md-3]=\"!inverted && vertical\">\n    @if (tabs) {\n      <ul\n        class=\"nav nav-tabs\"\n        [class.nav-tabs-editable]=\"editable\"\n        [class.nav-tabs-cards]=\"cards\"\n        [class.nav-tabs-vertical]=\"vertical\"\n        [class.auto]=\"auto\"\n        [class.nav-tabs-icon-text]=\"iconText\"\n        [class.nav-dark]=\"dark\"\n        role=\"tablist\">\n        @for (tab of tabs; track tab.id; let i = $index) {\n          <li class=\"nav-item\">\n            <a\n              #tabNavLinks\n              [id]=\"tab.id + '-tab-link'\"\n              role=\"tab\"\n              class=\"nav-link\"\n              [class.active]=\"tab.active\"\n              [class.disabled]=\"tab.disabled\"\n              [attr.href]=\"'#' + tab.id + '-tab'\"\n              [attr.aria-controls]=\"tab.id + '-tab'\"\n              (click)=\"onTab(tab)\">\n              @if (tab.icon) {\n                <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n              }\n              {{ tab.label }}\n            </a>\n            @if (editable) {\n              <a class=\"nav-link-close\" (click)=\"clickToClose(i)\" (keypress)=\"clickToClose(i)\" [attr.disabled]=\"tab.disabled\">\n                <it-icon name=\"close\"></it-icon>\n              </a>\n            }\n          </li>\n        }\n        @if (editable) {\n          <li class=\"nav-item\">\n            <a href=\"#\" class=\"nav-tab-add\" (click)=\"clickToAdd($event)\" (keypress)=\"clickToAdd($event)\"\n              ><span class=\"visually-hidden\"> Aggiungi un tab</span></a\n            >\n          </li>\n        }\n      </ul>\n    }\n  </div>\n  <div\n    [class.col-7]=\"inverted && vertical\"\n    [class.col-md-8]=\"inverted && vertical\"\n    [class.col-lg-9]=\"inverted && vertical\"\n    [class.col-8]=\"!inverted && vertical\"\n    [class.col-md-9]=\"!inverted && vertical\">\n    @if (tabs) {\n      <div class=\"tab-content\">\n        @for (tab of tabs; track tab.id) {\n          <div\n            [id]=\"tab.id + '-tab'\"\n            class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n            [class.active]=\"tab.active\"\n            [class.show]=\"tab.active\"\n            role=\"tabpanel\"\n            [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n            <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "<div\n  [class.row]=\"vertical\"\n  [class.flex-row-reverse]=\"inverted && vertical\"\n  [class.d-flex]=\"inverted && !vertical\"\n  [class.flex-column-reverse]=\"inverted && !vertical\">\n  <div\n    [class.col-5]=\"inverted && vertical\"\n    [class.col-md-4]=\"inverted && vertical\"\n    [class.col-lg-3]=\"inverted && vertical\"\n    [class.col-4]=\"!inverted && vertical\"\n    [class.col-md-3]=\"!inverted && vertical\">\n    @if (tabs) {\n      <ul\n        class=\"nav nav-tabs\"\n        [class.nav-tabs-editable]=\"editable\"\n        [class.nav-tabs-cards]=\"cards\"\n        [class.nav-tabs-vertical]=\"vertical\"\n        [class.auto]=\"auto\"\n        [class.nav-tabs-icon-text]=\"iconText\"\n        [class.nav-dark]=\"dark\"\n        role=\"tablist\">\n        @for (tab of tabs; track tab.id; let i = $index) {\n          <li class=\"nav-item\">\n            <a\n              #tabNavLinks\n              [id]=\"tab.id + '-tab-link'\"\n              role=\"tab\"\n              class=\"nav-link\"\n              [class.active]=\"tab.active\"\n              [class.disabled]=\"tab.disabled\"\n              [attr.href]=\"'#' + tab.id + '-tab'\"\n              [attr.aria-controls]=\"tab.id + '-tab'\"\n              (click)=\"onTab(tab)\">\n              @if (tab.icon) {\n                <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n              }\n              {{ tab.label }}\n            </a>\n            @if (editable) {\n              <a class=\"nav-link-close\" (click)=\"clickToClose(i)\" (keypress)=\"clickToClose(i)\" [attr.disabled]=\"tab.disabled\">\n                <it-icon name=\"close\"></it-icon>\n              </a>\n            }\n          </li>\n        }\n        @if (editable) {\n          <li class=\"nav-item\">\n            <a href=\"#\" class=\"nav-tab-add\" (click)=\"clickToAdd($event)\" (keypress)=\"clickToAdd($event)\"\n              ><span class=\"visually-hidden\"> Aggiungi un tab</span></a\n            >\n          </li>\n        }\n      </ul>\n    }\n  </div>\n  <div\n    [class.col-7]=\"inverted && vertical\"\n    [class.col-md-8]=\"inverted && vertical\"\n    [class.col-lg-9]=\"inverted && vertical\"\n    [class.col-8]=\"!inverted && vertical\"\n    [class.col-md-9]=\"!inverted && vertical\">\n    @if (tabs) {\n      <div class=\"tab-content\">\n        @for (tab of tabs; track tab.id) {\n          <div\n            [id]=\"tab.id + '-tab'\"\n            class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n            [class.active]=\"tab.active\"\n            [class.show]=\"tab.active\"\n            role=\"tabpanel\"\n            [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n            <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { auto: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -3782,11 +3771,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 const tabComponents = [ItTabContainerComponent, ItTabItemComponent];
 class ItTabModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, imports: [ItTabContainerComponent, ItTabItemComponent], exports: [ItTabContainerComponent, ItTabItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItTabModule, imports: [ItTabContainerComponent, ItTabItemComponent], exports: [ItTabContainerComponent, ItTabItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTabModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTabModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: tabComponents,
@@ -3802,12 +3791,12 @@ class ItTableComponent {
          */
         this.responsive = 'responsive';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItTableComponent, isStandalone: true, selector: "it-table", inputs: { color: "color", headColor: "headColor", alignment: "alignment", striped: ["striped", "striped", inputToBoolean], hover: ["hover", "hover", inputToBoolean], bordered: ["bordered", "bordered", inputToBoolean], borderless: ["borderless", "borderless", inputToBoolean], compact: ["compact", "compact", inputToBoolean], captionTop: ["captionTop", "captionTop", inputToBoolean], responsive: "responsive" }, ngImport: i0, template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n  <table\n    class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n    [class.table-striped]=\"striped\"\n    [class.table-hover]=\"hover\"\n    [class.table-bordered]=\"bordered\"\n    [class.table-borderless]=\"borderless\"\n    [class.table-sm]=\"compact\"\n    [class.caption-top]=\"captionTop\">\n    <caption>\n      <ng-content select=\"[caption]\"></ng-content>\n    </caption>\n    <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n      <ng-content select=\"[thead]\"></ng-content>\n    </thead>\n    <tbody>\n      <ng-content select=\"[tbody]\"></ng-content>\n    </tbody>\n    <tfoot>\n      <ng-content select=\"[tfoot]\"></ng-content>\n    </tfoot>\n  </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItTableComponent, isStandalone: true, selector: "it-table", inputs: { color: "color", headColor: "headColor", alignment: "alignment", striped: ["striped", "striped", inputToBoolean], hover: ["hover", "hover", inputToBoolean], bordered: ["bordered", "bordered", inputToBoolean], borderless: ["borderless", "borderless", inputToBoolean], compact: ["compact", "compact", inputToBoolean], captionTop: ["captionTop", "captionTop", inputToBoolean], responsive: "responsive" }, ngImport: i0, template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n  <table\n    class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n    [class.table-striped]=\"striped\"\n    [class.table-hover]=\"hover\"\n    [class.table-bordered]=\"bordered\"\n    [class.table-borderless]=\"borderless\"\n    [class.table-sm]=\"compact\"\n    [class.caption-top]=\"captionTop\">\n    <caption>\n      <ng-content select=\"[caption]\"></ng-content>\n    </caption>\n    <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n      <ng-content select=\"[thead]\"></ng-content>\n    </thead>\n    <tbody>\n      <ng-content select=\"[tbody]\"></ng-content>\n    </tbody>\n    <tfoot>\n      <ng-content select=\"[tfoot]\"></ng-content>\n    </tfoot>\n  </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n  <table\n    class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n    [class.table-striped]=\"striped\"\n    [class.table-hover]=\"hover\"\n    [class.table-bordered]=\"bordered\"\n    [class.table-borderless]=\"borderless\"\n    [class.table-sm]=\"compact\"\n    [class.caption-top]=\"captionTop\">\n    <caption>\n      <ng-content select=\"[caption]\"></ng-content>\n    </caption>\n    <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n      <ng-content select=\"[thead]\"></ng-content>\n    </thead>\n    <tbody>\n      <ng-content select=\"[tbody]\"></ng-content>\n    </tbody>\n    <tfoot>\n      <ng-content select=\"[tfoot]\"></ng-content>\n    </tfoot>\n  </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"] }]
+            args: [{ selector: 'it-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n  <table\n    class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n    [class.table-striped]=\"striped\"\n    [class.table-hover]=\"hover\"\n    [class.table-bordered]=\"bordered\"\n    [class.table-borderless]=\"borderless\"\n    [class.table-sm]=\"compact\"\n    [class.caption-top]=\"captionTop\">\n    <caption>\n      <ng-content select=\"[caption]\"></ng-content>\n    </caption>\n    <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n      <ng-content select=\"[thead]\"></ng-content>\n    </thead>\n    <tbody>\n      <ng-content select=\"[tbody]\"></ng-content>\n    </tbody>\n    <tfoot>\n      <ng-content select=\"[tfoot]\"></ng-content>\n    </tfoot>\n  </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], headColor: [{
@@ -3842,15 +3831,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 const IT_SORT_DEFAULT_OPTIONS = new InjectionToken('IT_SORT_DEFAULT_OPTIONS');
 
 class ItSortDirective {
-    /** The sort direction of the currently active ItSortable. */
-    get direction() {
-        return this._direction;
-    }
-    set direction(direction) {
-        this._direction = direction;
-    }
-    constructor(_defaultOptions) {
-        this._defaultOptions = _defaultOptions;
+    constructor() {
+        this._defaultOptions = inject(IT_SORT_DEFAULT_OPTIONS, { optional: true });
         /**
          * The direction to set when an MatSortable is initially sorted.
          * May be overridden by the MatSortable's sort start.
@@ -3866,6 +3848,13 @@ class ItSortDirective {
         /** Used to notify any child components listening to state changes. */
         this._stateChanges = new Subject();
     }
+    /** The sort direction of the currently active ItSortable. */
+    get direction() {
+        return this._direction;
+    }
+    set direction(direction) {
+        this._direction = direction;
+    }
     /**
      * Register function to be used by the contained ItSortables. Adds the ItSortable to the
      * collection of ItSortables.
@@ -3912,22 +3901,17 @@ class ItSortDirective {
     ngOnDestroy() {
         this._stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortDirective, deps: [{ token: IT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItSortDirective, isStandalone: true, selector: "[itSort]", inputs: { active: ["itSortActive", "active"], start: ["itSortStart", "start"], direction: ["itSortDirection", "direction"], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute] }, outputs: { sortChange: "sortChange" }, host: { properties: { "class": "this.sortDirectiveClass" } }, exportAs: ["itSort"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.3", type: ItSortDirective, isStandalone: true, selector: "[itSort]", inputs: { active: ["itSortActive", "active"], start: ["itSortStart", "start"], direction: ["itSortDirection", "direction"], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute] }, outputs: { sortChange: "sortChange" }, host: { properties: { "class": "this.sortDirectiveClass" } }, exportAs: ["itSort"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSortDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[itSort]',
                     exportAs: 'itSort',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [IT_SORT_DEFAULT_OPTIONS]
-                }] }], propDecorators: { active: [{
+        }], propDecorators: { active: [{
                 type: Input,
                 args: ['itSortActive']
             }], start: [{
@@ -3970,16 +3954,15 @@ function getSortDirectionCycle(start, disableClear) {
  * column definition.
  */
 class ItSortHeaderComponent {
-    constructor(_changeDetectorRef, 
-    // `SortDirective` is not optionally injected, but just asserted manually w/ better error.
-    _sort, defaultOptions) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._sort = _sort;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._sort = inject(ItSortDirective, { optional: true });
         /** Sets the position of the arrow that displays when sorted. */
         this.arrowPosition = 'after';
         /** whether the sort header is disabled. */
         this.sortDisabled = false;
         this.sortHeaderClass = 'it-sort-header';
+        const defaultOptions = inject(IT_SORT_DEFAULT_OPTIONS, { optional: true });
         if (defaultOptions?.arrowPosition) {
             this.arrowPosition = defaultOptions?.arrowPosition;
         }
@@ -4048,20 +4031,13 @@ class ItSortHeaderComponent {
             this._changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ItSortDirective, optional: true }, { token: IT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItSortHeaderComponent, isStandalone: true, selector: "[it-sort-header]", inputs: { id: ["it-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute] }, host: { listeners: { "click": "_handleClick()" }, properties: { "class": "this.sortHeaderClass", "class.it-sort-header-disabled": "this.isDisabled", "attr.aria-sort": "this.ariaSortAttribute" } }, exportAs: ["itSortHeader"], ngImport: i0, template: "<!--\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\n  will be read out as the user is navigating the table's cell (see #13012).\n\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n  class=\"it-sort-header-container it-focus-indicator\"\n  [class.it-sort-header-sorted]=\"isSorted\"\n  [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"isDisabled ? null : 0\"\n  [attr.role]=\"isDisabled ? null : 'button'\">\n  <!--\n    We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n    Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\n  -->\n  <div class=\"it-sort-header-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItSortHeaderComponent, isStandalone: true, selector: "[it-sort-header]", inputs: { id: ["it-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute] }, host: { listeners: { "click": "_handleClick()" }, properties: { "class": "this.sortHeaderClass", "class.it-sort-header-disabled": "this.isDisabled", "attr.aria-sort": "this.ariaSortAttribute" } }, exportAs: ["itSortHeader"], ngImport: i0, template: "<!--\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\n  will be read out as the user is navigating the table's cell (see #13012).\n\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n  class=\"it-sort-header-container it-focus-indicator\"\n  [class.it-sort-header-sorted]=\"isSorted\"\n  [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"isDisabled ? null : 0\"\n  [attr.role]=\"isDisabled ? null : 'button'\">\n  <!--\n    We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n    Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\n  -->\n  <div class=\"it-sort-header-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSortHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[it-sort-header]', exportAs: 'itSortHeader', standalone: true, imports: [ItIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\n  will be read out as the user is navigating the table's cell (see #13012).\n\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n  class=\"it-sort-header-container it-focus-indicator\"\n  [class.it-sort-header-sorted]=\"isSorted\"\n  [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"isDisabled ? null : 0\"\n  [attr.role]=\"isDisabled ? null : 'button'\">\n  <!--\n    We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n    Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\n  -->\n  <div class=\"it-sort-header-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ItSortDirective, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [IT_SORT_DEFAULT_OPTIONS]
-                }] }], propDecorators: { id: [{
+            args: [{ selector: '[it-sort-header]', exportAs: 'itSortHeader', imports: [ItIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\n  will be read out as the user is navigating the table's cell (see #13012).\n\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n  class=\"it-sort-header-container it-focus-indicator\"\n  [class.it-sort-header-sorted]=\"isSorted\"\n  [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"isDisabled ? null : 0\"\n  [attr.role]=\"isDisabled ? null : 'button'\">\n  <!--\n    We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n    Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\n  -->\n  <div class=\"it-sort-header-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input,
                 args: ['it-sort-header']
             }], arrowPosition: [{
@@ -4090,11 +4066,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 const tableComponents = [ItTableComponent, ItSortDirective, ItSortHeaderComponent];
 class ItTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, imports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent], exports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItTableModule, imports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent], exports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTableModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: tableComponents,
@@ -4142,12 +4118,12 @@ class ItTimelineItemComponent extends ItAbstractComponent {
          */
         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", pinIconTitle: "pinIconTitle", categoryLabel: "categoryLabel", dateLabel: "dateLabel", 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  <h3 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\" [title]=\"pinIconTitle\" [attr.role]=\"pinIconTitle ? 'img' : null\"></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  </h3>\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              <span class=\"visually-hidden\">{{ categoryLabel }}</span>\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"visually-hidden\">{{ dateLabel }}</span>\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h4 class=\"card-title\">{{ title }}</h4>\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", "title", "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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", pinIconTitle: "pinIconTitle", categoryLabel: "categoryLabel", dateLabel: "dateLabel", 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  <h3 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\" [title]=\"pinIconTitle\" [attr.role]=\"pinIconTitle ? 'img' : null\"></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  </h3>\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              <span class=\"visually-hidden\">{{ categoryLabel }}</span>\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"visually-hidden\">{{ dateLabel }}</span>\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h4 class=\"card-title\">{{ title }}</h4>\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", "title", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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  <h3 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\" [title]=\"pinIconTitle\" [attr.role]=\"pinIconTitle ? 'img' : null\"></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  </h3>\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              <span class=\"visually-hidden\">{{ categoryLabel }}</span>\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"visually-hidden\">{{ dateLabel }}</span>\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h4 class=\"card-title\">{{ title }}</h4>\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" }]
+            args: [{ 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  <h3 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\" [title]=\"pinIconTitle\" [attr.role]=\"pinIconTitle ? 'img' : null\"></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  </h3>\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              <span class=\"visually-hidden\">{{ categoryLabel }}</span>\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"visually-hidden\">{{ dateLabel }}</span>\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h4 class=\"card-title\">{{ title }}</h4>\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 }]
@@ -4202,12 +4178,12 @@ class ItTimelineComponent extends ItAbstractComponent {
          */
         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", "pinIconTitle", "categoryLabel", "dateLabel", "categoryTitle", "categoryLink", "showReadMore", "readMoreLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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", "pinIconTitle", "categoryLabel", "dateLabel", "categoryTitle", "categoryLink", "showReadMore", "readMoreLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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" }]
+            args: [{ 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: [{
@@ -4216,11 +4192,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItTimelineModule, imports: [ItTimelineComponent, ItTimelineItemComponent], exports: [ItTimelineComponent, ItTimelineItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTimelineModule, imports: [timelineComponents] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: timelineComponents,
@@ -4253,8 +4229,8 @@ class ItTooltipDirective {
     set tooltipHtml(html) {
         this.element.setAttribute('data-bs-html', html ? 'true' : 'false');
     }
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor() {
+        this._elementRef = inject(ElementRef);
         /**
          * This event fires immediately when the show method is called.
          */
@@ -4337,17 +4313,17 @@ class ItTooltipDirective {
     update() {
         this.tooltip?.disable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItTooltipDirective, isStandalone: true, selector: "[itTooltip]", inputs: { title: ["itTooltip", "title"], tooltipPlacement: "tooltipPlacement", tooltipHtml: ["tooltipHtml", "tooltipHtml", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itTooltip"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.3", type: ItTooltipDirective, isStandalone: true, selector: "[itTooltip]", inputs: { title: ["itTooltip", "title"], tooltipPlacement: "tooltipPlacement", tooltipHtml: ["tooltipHtml", "tooltipHtml", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itTooltip"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[itTooltip]',
                     exportAs: 'itTooltip',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
+        }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input,
                 args: ['itTooltip']
             }], tooltipPlacement: [{
@@ -4385,12 +4361,12 @@ class ItCheckboxComponent extends ItAbstractFormComponent {
         this.writeValue(value);
         return this.onChange(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n" }]
+            args: [{ selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n" }]
         }], propDecorators: { toggle: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -4509,12 +4485,12 @@ class ItPasswordInputComponent extends ItAbstractFormComponent {
         }
         return this._translateService.get(keys, { minLength: this.minLength }).pipe(map(labels => Object.values(labels).join(', ')));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItPasswordInputComponent, isStandalone: true, selector: "it-password-input", inputs: { required: "required", minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: ["showStrengthMeter", "showStrengthMeter", inputToBoolean], confirmPasswordField: ["confirmPasswordField", "confirmPasswordField", inputToBoolean], autocomplete: "autocomplete" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <input\n    #input\n    [id]=\"id\"\n    type=\"password\"\n    class=\"form-control input-password\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-describedby]=\"id + '-description'\"\n    [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n  <span class=\"password-icon\" aria-hidden=\"true\">\n    <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n    <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n  </span>\n\n  @if (isInvalid) {\n    <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n\n  @if (description !== undefined && !isStrengthMeter) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">\n      {{ description !== true ? description : (strengthMeterDescription | async) }}\n    </small>\n  }\n\n  <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n    {{ 'it.form.caps-inserted' | translate }}\n  </small>\n\n  @if (isStrengthMeter) {\n    <div class=\"password-strength-meter\">\n      <small\n        [id]=\"id + '-description'\"\n        class=\"form-text text-muted\"\n        [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n        [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n        [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n        [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n      </small>\n      <div class=\"password-meter progress rounded-0 position-absolute\">\n        <div class=\"row position-absolute w-100 m-0\">\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n        </div>\n        <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItPasswordInputComponent, isStandalone: true, selector: "it-password-input", inputs: { required: "required", minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: ["showStrengthMeter", "showStrengthMeter", inputToBoolean], confirmPasswordField: ["confirmPasswordField", "confirmPasswordField", inputToBoolean], autocomplete: "autocomplete" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <input\n    #input\n    [id]=\"id\"\n    type=\"password\"\n    class=\"form-control input-password\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-describedby]=\"id + '-description'\"\n    [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n  <span class=\"password-icon\" aria-hidden=\"true\">\n    <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n    <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n  </span>\n\n  @if (isInvalid) {\n    <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n\n  @if (description !== undefined && !isStrengthMeter) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">\n      {{ description !== true ? description : (strengthMeterDescription | async) }}\n    </small>\n  }\n\n  <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n    {{ 'it.form.caps-inserted' | translate }}\n  </small>\n\n  @if (isStrengthMeter) {\n    <div class=\"password-strength-meter\">\n      <small\n        [id]=\"id + '-description'\"\n        class=\"form-text text-muted\"\n        [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n        [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n        [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n        [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n      </small>\n      <div class=\"password-meter progress rounded-0 position-absolute\">\n        <div class=\"row position-absolute w-100 m-0\">\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n        </div>\n        <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPasswordInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItPasswordInputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-password-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, ItIconComponent, AsyncPipe, TranslateModule], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <input\n    #input\n    [id]=\"id\"\n    type=\"password\"\n    class=\"form-control input-password\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-describedby]=\"id + '-description'\"\n    [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n  <span class=\"password-icon\" aria-hidden=\"true\">\n    <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n    <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n  </span>\n\n  @if (isInvalid) {\n    <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n\n  @if (description !== undefined && !isStrengthMeter) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">\n      {{ description !== true ? description : (strengthMeterDescription | async) }}\n    </small>\n  }\n\n  <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n    {{ 'it.form.caps-inserted' | translate }}\n  </small>\n\n  @if (isStrengthMeter) {\n    <div class=\"password-strength-meter\">\n      <small\n        [id]=\"id + '-description'\"\n        class=\"form-text text-muted\"\n        [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n        [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n        [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n        [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n      </small>\n      <div class=\"password-meter progress rounded-0 position-absolute\">\n        <div class=\"row position-absolute w-100 m-0\">\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n        </div>\n        <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
+            args: [{ selector: 'it-password-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, ItIconComponent, AsyncPipe, TranslateModule], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <input\n    #input\n    [id]=\"id\"\n    type=\"password\"\n    class=\"form-control input-password\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-describedby]=\"id + '-description'\"\n    [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n  <span class=\"password-icon\" aria-hidden=\"true\">\n    <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n    <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n  </span>\n\n  @if (isInvalid) {\n    <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n\n  @if (description !== undefined && !isStrengthMeter) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">\n      {{ description !== true ? description : (strengthMeterDescription | async) }}\n    </small>\n  }\n\n  <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n    {{ 'it.form.caps-inserted' | translate }}\n  </small>\n\n  @if (isStrengthMeter) {\n    <div class=\"password-strength-meter\">\n      <small\n        [id]=\"id + '-description'\"\n        class=\"form-text text-muted\"\n        [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n        [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n        [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n        [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n      </small>\n      <div class=\"password-meter progress rounded-0 position-absolute\">\n        <div class=\"row position-absolute w-100 m-0\">\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n        </div>\n        <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
         }], propDecorators: { required: [{
                 type: Input
             }], minLength: [{
@@ -4575,12 +4551,12 @@ class ItRadioButtonComponent extends ItAbstractFormComponent {
         this.writeValue(this.value);
         return this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRadioButtonComponent, isStandalone: true, selector: "it-radio-button", inputs: { value: "value", inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], forceRadioName: "forceRadioName" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      [name]=\"name\"\n      [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\"\n      [formControl]=\"control\"\n      [attr.aria-describedby]=\"id + '-help'\" />\n\n    <label class=\"form-check-label\" [for]=\"id\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      @if (!customLabel.hasChildNodes()) {\n        {{ label }}\n      }\n    </label>\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <div #customError>\n          <ng-content select=\"[error]\"></ng-content>\n        </div>\n        @if (!customError.hasChildNodes()) {\n          {{ invalidMessage | async }}\n        }\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItRadioButtonComponent, isStandalone: true, selector: "it-radio-button", inputs: { value: "value", inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], forceRadioName: "forceRadioName" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      [name]=\"name\"\n      [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\"\n      [formControl]=\"control\"\n      [attr.aria-describedby]=\"id + '-help'\" />\n\n    <label class=\"form-check-label\" [for]=\"id\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      @if (!customLabel.hasChildNodes()) {\n        {{ label }}\n      }\n    </label>\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <div #customError>\n          <ng-content select=\"[error]\"></ng-content>\n        </div>\n        @if (!customError.hasChildNodes()) {\n          {{ invalidMessage | async }}\n        }\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItRadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      [name]=\"name\"\n      [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\"\n      [formControl]=\"control\"\n      [attr.aria-describedby]=\"id + '-help'\" />\n\n    <label class=\"form-check-label\" [for]=\"id\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      @if (!customLabel.hasChildNodes()) {\n        {{ label }}\n      }\n    </label>\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <div #customError>\n          <ng-content select=\"[error]\"></ng-content>\n        </div>\n        @if (!customError.hasChildNodes()) {\n          {{ invalidMessage | async }}\n        }\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</ng-container>\n" }]
+            args: [{ selector: 'it-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      [name]=\"name\"\n      [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\"\n      [formControl]=\"control\"\n      [attr.aria-describedby]=\"id + '-help'\" />\n\n    <label class=\"form-check-label\" [for]=\"id\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      @if (!customLabel.hasChildNodes()) {\n        {{ label }}\n      }\n    </label>\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <div #customError>\n          <ng-content select=\"[error]\"></ng-content>\n        </div>\n        @if (!customError.hasChildNodes()) {\n          {{ invalidMessage | async }}\n        }\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</ng-container>\n" }]
         }], propDecorators: { value: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4634,12 +4610,12 @@ class ItRangeComponent extends ItAbstractFormComponent {
         const val = (((this.control.value ?? diff / 2) - min) * 100) / diff;
         this.slider.nativeElement.style.setProperty('--range-percentage', `${val}%`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRangeComponent, isStandalone: true, selector: "it-range", inputs: { max: "max", min: "min", step: "step", leftColor: "leftColor", rightColor: "rightColor" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center\">\n  @if (label) {\n    <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n  }\n  <ng-content></ng-content>\n</div>\n\n<input\n  #slider\n  [id]=\"id\"\n  type=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  class=\"form-range\"\n  [class.double-color]=\"!!leftColor && !!rightColor\"\n  [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItRangeComponent, isStandalone: true, selector: "it-range", inputs: { max: "max", min: "min", step: "step", leftColor: "leftColor", rightColor: "rightColor" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center\">\n  @if (label) {\n    <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n  }\n  <ng-content></ng-content>\n</div>\n\n<input\n  #slider\n  [id]=\"id\"\n  type=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  class=\"form-range\"\n  [class.double-color]=\"!!leftColor && !!rightColor\"\n  [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-range', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex justify-content-between align-items-center\">\n  @if (label) {\n    <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n  }\n  <ng-content></ng-content>\n</div>\n\n<input\n  #slider\n  [id]=\"id\"\n  type=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  class=\"form-range\"\n  [class.double-color]=\"!!leftColor && !!rightColor\"\n  [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"] }]
+            args: [{ selector: 'it-range', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex justify-content-between align-items-center\">\n  @if (label) {\n    <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n  }\n  <ng-content></ng-content>\n</div>\n\n<input\n  #slider\n  [id]=\"id\"\n  type=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  class=\"form-range\"\n  [class.double-color]=\"!!leftColor && !!rightColor\"\n  [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"] }]
         }], propDecorators: { max: [{
                 type: Input
             }], min: [{
@@ -4685,12 +4661,12 @@ class ItRatingComponent extends ItAbstractFormComponent {
     generateStars() {
         return Array.from({ length: this.starCount }, (_, i) => i + 1).reverse();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRatingComponent, isStandalone: true, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\" aria-hidden=\"true\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItRatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItRatingComponent, isStandalone: true, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\" aria-hidden=\"true\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItRatingComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-rating', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ReactiveFormsModule, ItIconComponent], template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\" aria-hidden=\"true\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n" }]
+            args: [{ selector: 'it-rating', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ReactiveFormsModule, ItIconComponent], template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\" aria-hidden=\"true\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], starCount: [{
@@ -4745,12 +4721,12 @@ class ItSelectComponent extends ItAbstractFormComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSelectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-select', imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
+            args: [{ selector: 'it-select', imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], groups: [{
@@ -4794,12 +4770,12 @@ class ItTextareaComponent extends ItAbstractFormComponent {
     get isReadonly() {
         return this.readonly === 'plaintext' || !!this.readonly;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTextareaComponent, isStandalone: true, selector: "it-textarea", inputs: { rows: "rows", placeholder: "placeholder", description: "description", readonly: "readonly" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItTextareaComponent, isStandalone: true, selector: "it-textarea", inputs: { rows: "rows", placeholder: "placeholder", description: "description", readonly: "readonly" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTextareaComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"] }]
+            args: [{ selector: 'it-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"] }]
         }], propDecorators: { rows: [{
                 type: Input
             }], placeholder: [{
@@ -4990,12 +4966,12 @@ class ItUploadDragDropComponent extends ItAbstractComponent {
         this.donut?.set(0);
         this._changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItUploadDragDropComponent, isStandalone: true, selector: "it-upload-drag-drop", inputs: { accept: "accept" }, outputs: { fileStartUpload: "fileStartUpload" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "donutElement", first: true, predicate: ["donutElement"], descendants: true }], exportAs: ["itUploadDragDrop"], usesInheritance: true, ngImport: i0, template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItUploadDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItUploadDragDropComponent, isStandalone: true, selector: "it-upload-drag-drop", inputs: { accept: "accept" }, outputs: { fileStartUpload: "fileStartUpload" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "donutElement", first: true, predicate: ["donutElement"], descendants: true }], exportAs: ["itUploadDragDrop"], usesInheritance: true, ngImport: i0, template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadDragDropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItUploadDragDropComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-upload-drag-drop', exportAs: 'itUploadDragDrop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, NgOptimizedImage], template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'it-upload-drag-drop', exportAs: 'itUploadDragDrop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, NgOptimizedImage], template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { accept: [{
                 type: Input
             }], fileStartUpload: [{
@@ -5084,12 +5060,12 @@ class ItUploadFileListComponent extends ItAbstractComponent {
     getFileSize(file) {
         return ItFileUtils.getFileSizeString(file);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-upload-file-list', imports: [ItIconComponent, TranslateModule, ItTooltipDirective, ItProgressBarComponent], template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n" }]
+            args: [{ selector: 'it-upload-file-list', imports: [ItIconComponent, TranslateModule, ItTooltipDirective, ItProgressBarComponent], template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n" }]
         }], propDecorators: { fileList: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5114,8 +5090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
  * Allows you to highlight text with the <mark> tag
  */
 class ItMarkMatchingTextPipe {
-    constructor(domSanitizer) {
-        this.domSanitizer = domSanitizer;
+    constructor() {
+        this.domSanitizer = inject(DomSanitizer);
     }
     /**
      * Allows you to highlight text with the <mark> tag
@@ -5144,16 +5120,16 @@ class ItMarkMatchingTextPipe {
         }
         return allString;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, isStandalone: true, name: "itMarkMatchingText" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItMarkMatchingTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItMarkMatchingTextPipe, isStandalone: true, name: "itMarkMatchingText" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItMarkMatchingTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
                     name: 'itMarkMatchingText',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+        }] });
 
 class ItSearchComponent extends ItAbstractFormComponent {
     constructor() {
@@ -5232,10 +5208,10 @@ class ItSearchComponent extends ItAbstractFormComponent {
         const value = this.control.value;
         return this.forceShowLabel && (!!value || !!this.placeholder);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSearchComponent, isStandalone: true, selector: "it-search", inputs: { searchData: "searchData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { searchSelectedEvent: "searchSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSearchComponent, isStandalone: true, selector: "it-search", inputs: { searchData: "searchData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { searchSelectedEvent: "searchSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSearchComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-search', imports: [AsyncPipe, ItIconComponent, ItMarkMatchingTextPipe, NgTemplateOutlet, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { searchData: [{
@@ -5507,17 +5483,17 @@ class TransferStore {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TransferStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TransferStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TransferStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TransferStore, decorators: [{
             type: Injectable
         }] });
 
 class ItTransferListComponent extends ItAbstractComponent {
-    constructor(store) {
+    constructor() {
         super();
-        this.store = store;
+        this.store = inject(TransferStore);
         /**
          * Widget title
          */
@@ -5566,13 +5542,13 @@ class ItTransferListComponent extends ItAbstractComponent {
     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\">\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 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</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\">\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTransferListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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\">\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 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</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\">\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTransferListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-transfer-list', standalone: true, imports: [TranslateModule, AsyncPipe, TitleCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"it-transfer-wrapper source\">\n  <div class=\"transfer-header\">\n    <div class=\"form-check\">\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 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</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\">\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: [{
+            args: [{ selector: 'it-transfer-list', imports: [TranslateModule, AsyncPipe, TitleCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"it-transfer-wrapper source\">\n  <div class=\"transfer-header\">\n    <div class=\"form-check\">\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 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</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\">\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: () => [], propDecorators: { selectAllCheckboxRef: [{
                 type: ViewChild,
                 args: ['selectAllCheckbox']
             }] } });
@@ -5582,11 +5558,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
  * @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;
+    constructor() {
+        super(...arguments);
+        this._ngControl = inject(NgControl, { self: true, optional: true });
+        this._translateService = inject(TranslateService);
+        this.store = inject(TransferStore);
         /**
          * The select options (left side)
          */
@@ -5694,17 +5670,13 @@ class ItTransferComponent extends ItAbstractFormComponent {
             .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>\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]=\"'it.transfer.source' | translate\"></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          [attr.aria-label]=\"'it.transfer.aria-label-move-forward' | translate\">\n          <it-icon name=\"arrow-right\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-move-forward' | translate }}</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          [attr.aria-label]=\"'it.transfer.aria-label-move-backward' | translate\">\n          <it-icon name=\"arrow-left\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-move-backward' | translate }}</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          [attr.aria-label]=\"'it.transfer.aria-label-reset' | translate\">\n          <it-icon name=\"restore\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-reset' | translate }}</span>\n      </div>\n    </div>\n    <div class=\"col-xs-12 col-md-5\">\n      <it-transfer-list sourceType=\"target\" [title]=\"'it.transfer.target' | translate\"></it-transfer-list>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTransferComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItTransferComponent, isStandalone: true, selector: "it-transfer", inputs: { options: "options", selected: "selected" }, outputs: { transferChanges: "transferChanges" }, providers: [TransferStore], usesInheritance: true, ngImport: i0, template: "<div>\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]=\"'it.transfer.source' | translate\"></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          [attr.aria-label]=\"'it.transfer.aria-label-move-forward' | translate\">\n          <it-icon name=\"arrow-right\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-move-forward' | translate }}</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          [attr.aria-label]=\"'it.transfer.aria-label-move-backward' | translate\">\n          <it-icon name=\"arrow-left\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-move-backward' | translate }}</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          [attr.aria-label]=\"'it.transfer.aria-label-reset' | translate\">\n          <it-icon name=\"restore\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-reset' | translate }}</span>\n      </div>\n    </div>\n    <div class=\"col-xs-12 col-md-5\">\n      <it-transfer-list sourceType=\"target\" [title]=\"'it.transfer.target' | translate\"></it-transfer-list>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItTransferComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-transfer', standalone: true, imports: [TranslateModule, ItIconComponent, ItTransferListComponent, NgClass, AsyncPipe, ReactiveFormsModule], providers: [TransferStore], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\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]=\"'it.transfer.source' | translate\"></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          [attr.aria-label]=\"'it.transfer.aria-label-move-forward' | translate\">\n          <it-icon name=\"arrow-right\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-move-forward' | translate }}</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          [attr.aria-label]=\"'it.transfer.aria-label-move-backward' | translate\">\n          <it-icon name=\"arrow-left\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-move-backward' | translate }}</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          [attr.aria-label]=\"'it.transfer.aria-label-reset' | translate\">\n          <it-icon name=\"restore\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-reset' | translate }}</span>\n      </div>\n    </div>\n    <div class=\"col-xs-12 col-md-5\">\n      <it-transfer-list sourceType=\"target\" [title]=\"'it.transfer.target' | translate\"></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: [{
+            args: [{ selector: 'it-transfer', imports: [TranslateModule, ItIconComponent, ItTransferListComponent, NgClass, AsyncPipe, ReactiveFormsModule], providers: [TransferStore], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\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]=\"'it.transfer.source' | translate\"></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          [attr.aria-label]=\"'it.transfer.aria-label-move-forward' | translate\">\n          <it-icon name=\"arrow-right\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-move-forward' | translate }}</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          [attr.aria-label]=\"'it.transfer.aria-label-move-backward' | translate\">\n          <it-icon name=\"arrow-left\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-move-backward' | translate }}</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          [attr.aria-label]=\"'it.transfer.aria-label-reset' | translate\">\n          <it-icon name=\"restore\"></it-icon>\n        </a>\n        <span class=\"visually-hidden\">{{ 'it.transfer.label-reset' | translate }}</span>\n      </div>\n    </div>\n    <div class=\"col-xs-12 col-md-5\">\n      <it-transfer-list sourceType=\"target\" [title]=\"'it.transfer.target' | translate\"></it-transfer-list>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { options: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -5847,12 +5819,12 @@ class ItAutocompleteComponent extends ItAbstractFormComponent {
             this._findInput();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { source: "source", required: "required", name: "name", description: "description", minLength: "minLength", defaultValue: "defaultValue", assistiveHintLabel: "assistiveHintLabel", noResultsLabel: "noResultsLabel", statusQueryTooShortLabel: "statusQueryTooShortLabel", statusNoResultsLabel: "statusNoResultsLabel", statusSelectedOptionLabel: "statusSelectedOptionLabel", statusResultsLabel: "statusResultsLabel" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "selectAutocompleteEl", first: true, predicate: ["selectAutocomplete"], descendants: true }], 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 #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { source: "source", required: "required", name: "name", description: "description", minLength: "minLength", defaultValue: "defaultValue", assistiveHintLabel: "assistiveHintLabel", noResultsLabel: "noResultsLabel", statusQueryTooShortLabel: "statusQueryTooShortLabel", statusNoResultsLabel: "statusNoResultsLabel", statusSelectedOptionLabel: "statusSelectedOptionLabel", statusResultsLabel: "statusResultsLabel" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "selectAutocompleteEl", first: true, predicate: ["selectAutocomplete"], descendants: true }], 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 #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n  }\n  <div #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'it-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n  }\n  <div #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { source: [{
                 type: Input
             }], required: [{
@@ -5900,8 +5872,8 @@ const formComponents = [
     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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItFormModule, imports: [ItAutocompleteComponent,
             ItSearchComponent,
             ItCheckboxComponent,
             ItInputComponent,
@@ -5926,9 +5898,9 @@ class ItFormModule {
             ItTransferComponent,
             ItUploadDragDropComponent,
             ItUploadFileListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [formComponents] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItFormModule, imports: [formComponents] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: formComponents,
@@ -5937,8 +5909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
         }] });
 
 class ItBackButtonComponent {
-    constructor(_location) {
-        this._location = _location;
+    constructor() {
+        this._location = inject(Location);
         /**
          * Back button style
          * - <b>link</b>: use a link with icon and text
@@ -5974,13 +5946,13 @@ class ItBackButtonComponent {
         }
         this._location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackButtonComponent, deps: [{ token: i1$3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBackButtonComponent, isStandalone: true, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: ["showIcon", "showIcon", inputToBoolean], showText: ["showText", "showText", inputToBoolean], backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItBackButtonComponent, isStandalone: true, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: ["showIcon", "showIcon", inputToBoolean], showText: ["showText", "showText", inputToBoolean], backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBackButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-back-button', exportAs: 'itBackButton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItButtonDirective, ItIconComponent, TranslateModule], template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.Location }], propDecorators: { buttonStyle: [{
+            args: [{ selector: 'it-back-button', exportAs: 'itBackButton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItButtonDirective, ItIconComponent, TranslateModule], template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n" }]
+        }], propDecorators: { buttonStyle: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -6034,12 +6006,12 @@ class ItBackToTopComponent extends ItAbstractComponent {
     dispose() {
         this.backToTop?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItBackToTopComponent, isStandalone: true, selector: "it-back-to-top", inputs: { ariaLabel: "ariaLabel", small: ["small", "small", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  [attr.aria-label]=\"ariaLabel\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItBackToTopComponent, isStandalone: true, selector: "it-back-to-top", inputs: { ariaLabel: "ariaLabel", small: ["small", "small", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  [attr.aria-label]=\"ariaLabel\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackToTopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBackToTopComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-back-to-top', exportAs: 'itBackToTop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent], template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  [attr.aria-label]=\"ariaLabel\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n" }]
+            args: [{ selector: 'it-back-to-top', exportAs: 'itBackToTop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent], template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  [attr.aria-label]=\"ariaLabel\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n" }]
         }], propDecorators: { ariaLabel: [{
                 type: Input
             }], small: [{
@@ -6057,12 +6029,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItBreadcrumbItemComponent extends ItLinkComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItBreadcrumbItemComponent, isStandalone: true, selector: "it-breadcrumb-item", inputs: { active: ["active", "active", inputToBoolean], iconName: "iconName" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItBreadcrumbItemComponent, isStandalone: true, selector: "it-breadcrumb-item", inputs: { active: ["active", "active", inputToBoolean], iconName: "iconName" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBreadcrumbItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'it-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { active: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -6074,8 +6046,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItBreadcrumbComponent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         /**
          * The character to use as separator
          * @default /
@@ -6098,13 +6070,13 @@ class ItBreadcrumbComponent {
     ngOnDestroy() {
         this.itemSubscriptions?.forEach(item => item.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBreadcrumbComponent, isStandalone: true, selector: "it-breadcrumb", inputs: { separator: "separator", dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItBreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItBreadcrumbComponent, isStandalone: true, selector: "it-breadcrumb", inputs: { separator: "separator", dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItBreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItLinkComponent, NgTemplateOutlet], template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { separator: [{
+            args: [{ selector: 'it-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItLinkComponent, NgTemplateOutlet], template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n" }]
+        }], propDecorators: { separator: [{
                 type: Input
             }], dark: [{
                 type: Input,
@@ -6116,11 +6088,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 const breadcrumb = [ItBreadcrumbComponent, ItBreadcrumbItemComponent];
 class ItBreadcrumbsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent], exports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent], exports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItBreadcrumbsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: breadcrumb,
@@ -6149,12 +6121,12 @@ class ItNavBarComponent {
     toggleCollapse() {
         this.navbar?.toggle(this.collapseButton?.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItNavBarComponent, isStandalone: true, selector: "it-navbar", inputs: { megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, viewQueries: [{ propertyName: "collapseButton", first: true, predicate: ["collapseButton"], descendants: true }, { propertyName: "collapseView", first: true, predicate: ["collapseView"], descendants: true }], ngImport: i0, template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItNavBarComponent, isStandalone: true, selector: "it-navbar", inputs: { megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, viewQueries: [{ propertyName: "collapseButton", first: true, predicate: ["collapseButton"], descendants: true }, { propertyName: "collapseView", first: true, predicate: ["collapseView"], descendants: true }], ngImport: i0, template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavBarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective], template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n" }]
+            args: [{ selector: 'it-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective], template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n" }]
         }], propDecorators: { megamenu: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -6170,21 +6142,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItNavBarItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItNavBarItemComponent, isStandalone: true, selector: "it-navbar-item", ngImport: i0, template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItNavBarItemComponent, isStandalone: true, selector: "it-navbar-item", ngImport: i0, template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavBarItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-navbar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n" }]
+            args: [{ selector: 'it-navbar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n" }]
         }] });
 
 const navbarComponents = [ItNavBarComponent, ItNavBarItemComponent];
 class ItNavBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent, ItNavBarItemComponent], exports: [ItNavBarComponent, ItNavBarItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent, ItNavBarItemComponent], exports: [ItNavBarComponent, ItNavBarItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: navbarComponents,
@@ -6239,12 +6211,12 @@ class ItHeaderComponent {
     toggleCollapse() {
         this.itNavBarComponent?.toggleCollapse();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItHeaderComponent, isStandalone: true, selector: "it-header", inputs: { light: ["light", "light", inputToBoolean], sticky: ["sticky", "sticky", inputToBoolean], showSlim: ["showSlim", "showSlim", inputToBoolean], smallHeader: ["smallHeader", "smallHeader", inputToBoolean], showSearch: ["showSearch", "showSearch", inputToBoolean], slimTitle: "slimTitle", slimTitleLink: "slimTitleLink", loginStyle: "loginStyle", megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "itNavBarComponent", first: true, predicate: ItNavBarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container-xxl\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "ngmodule", type: ItNavBarModule }, { kind: "component", type: ItNavBarComponent, selector: "it-navbar", inputs: ["megamenu", "expand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItHeaderComponent, isStandalone: true, selector: "it-header", inputs: { light: ["light", "light", inputToBoolean], sticky: ["sticky", "sticky", inputToBoolean], showSlim: ["showSlim", "showSlim", inputToBoolean], smallHeader: ["smallHeader", "smallHeader", inputToBoolean], showSearch: ["showSearch", "showSearch", inputToBoolean], slimTitle: "slimTitle", slimTitleLink: "slimTitleLink", loginStyle: "loginStyle", megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "itNavBarComponent", first: true, predicate: ItNavBarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container-xxl\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "ngmodule", type: ItNavBarModule }, { kind: "component", type: ItNavBarComponent, selector: "it-navbar", inputs: ["megamenu", "expand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItHeaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule], template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container-xxl\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
+            args: [{ selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule], template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container-xxl\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { light: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -6285,10 +6257,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItFooterComponent extends ItAbstractComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItFooterComponent, isStandalone: true, selector: "it-footer", exportAs: ["itFooter"], usesInheritance: true, ngImport: i0, template: "<footer class=\"it-footer\">\n  <div class=\"it-footer-main\">\n    <div class=\"container\">\n      <section>\n        <div class=\"row clearfix\">\n          <div class=\"col-sm-12\">\n            <ng-content select=\"[header]\"></ng-content>\n          </div>\n        </div>\n      </section>\n      <section>\n        <ng-content select=\"[links]\"></ng-content>\n      </section>\n      <section class=\"py-4 border-white border-top\">\n        <ng-content select=\"[contacts]\"></ng-content>\n      </section>\n    </div>\n  </div>\n  <div class=\"it-footer-small-prints clearfix\">\n    <div class=\"container\">\n      <ul class=\"it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row\">\n        <ng-content select=\"[small-links]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</footer>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: ItFooterComponent, isStandalone: true, selector: "it-footer", exportAs: ["itFooter"], usesInheritance: true, ngImport: i0, template: "<footer class=\"it-footer\">\n  <div class=\"it-footer-main\">\n    <div class=\"container\">\n      <section>\n        <div class=\"row clearfix\">\n          <div class=\"col-sm-12\">\n            <ng-content select=\"[header]\"></ng-content>\n          </div>\n        </div>\n      </section>\n      <section>\n        <ng-content select=\"[links]\"></ng-content>\n      </section>\n      <section class=\"py-4 border-white border-top\">\n        <ng-content select=\"[contacts]\"></ng-content>\n      </section>\n    </div>\n  </div>\n  <div class=\"it-footer-small-prints clearfix\">\n    <div class=\"container\">\n      <ul class=\"it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row\">\n        <ng-content select=\"[small-links]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</footer>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItFooterComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-footer', exportAs: 'itFooter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<footer class=\"it-footer\">\n  <div class=\"it-footer-main\">\n    <div class=\"container\">\n      <section>\n        <div class=\"row clearfix\">\n          <div class=\"col-sm-12\">\n            <ng-content select=\"[header]\"></ng-content>\n          </div>\n        </div>\n      </section>\n      <section>\n        <ng-content select=\"[links]\"></ng-content>\n      </section>\n      <section class=\"py-4 border-white border-top\">\n        <ng-content select=\"[contacts]\"></ng-content>\n      </section>\n    </div>\n  </div>\n  <div class=\"it-footer-small-prints clearfix\">\n    <div class=\"container\">\n      <ul class=\"it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row\">\n        <ng-content select=\"[small-links]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</footer>\n" }]
         }] });
@@ -6300,12 +6272,12 @@ class ItMegamenuComponent {
          */
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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"] }]
+            args: [{ 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: [{
@@ -6448,8 +6420,8 @@ class ItNavscrollListItemComponent {
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavscrollListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", 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"
@@ -6464,7 +6436,7 @@ class ItNavscrollListItemComponent {
     >
   `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavscrollListItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'it-navscroll-list-item',
@@ -6496,8 +6468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavscrollListItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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">
@@ -6510,11 +6482,10 @@ class ItNavscrollListItemsComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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: `
@@ -6604,12 +6575,12 @@ class ItNavscrollComponent {
     #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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavscrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItNavscrollComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-navscroll', standalone: true, imports: [
+            args: [{ selector: 'it-navscroll', imports: [
                         ItNavscrollListItemsComponent,
                         AsyncPipe,
                         NgTemplateOutlet,
@@ -6658,12 +6629,12 @@ class ItSidebarComponent {
         this.dark = false;
         this.componentClass = 'd-block sidebar-wrapper';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSidebarComponent, isStandalone: true, selector: "it-sidebar", inputs: { withRightLine: ["withRightLine", "withRightLine", inputToBoolean], withLeftLine: ["withLeftLine", "withLeftLine", inputToBoolean], dark: ["dark", "dark", inputToBoolean], header: "header" }, host: { properties: { "class.it-line-right-side": "this.withRightLine", "class.it-line-left-side": "this.withLeftLine", "class.theme-dark": "this.dark", "class": "this.componentClass" } }, ngImport: i0, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSidebarComponent, isStandalone: true, selector: "it-sidebar", inputs: { withRightLine: ["withRightLine", "withRightLine", inputToBoolean], withLeftLine: ["withLeftLine", "withLeftLine", inputToBoolean], dark: ["dark", "dark", inputToBoolean], header: "header" }, host: { properties: { "class.it-line-right-side": "this.withRightLine", "class.it-line-left-side": "this.withLeftLine", "class.theme-dark": "this.dark", "class": "this.componentClass" } }, ngImport: i0, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-sidebar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n" }]
+            args: [{ selector: 'it-sidebar', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n" }]
         }], propDecorators: { withRightLine: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -6697,12 +6668,12 @@ class ItSkiplinkComponent {
          */
         this.ariaLabel = 'Scorciatoie di navigazione';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSkiplinkComponent, isStandalone: true, selector: "it-skiplink", inputs: { ariaLabel: "ariaLabel", nav: ["nav", "nav", inputToBoolean] }, exportAs: ["itSkipLink"], ngImport: i0, template: "@if (nav) {\n  <nav class=\"skiplinks\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </ul>\n  </nav>\n} @else {\n  <div class=\"skiplinks\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </div>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSkiplinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSkiplinkComponent, isStandalone: true, selector: "it-skiplink", inputs: { ariaLabel: "ariaLabel", nav: ["nav", "nav", inputToBoolean] }, exportAs: ["itSkipLink"], ngImport: i0, template: "@if (nav) {\n  <nav class=\"skiplinks\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </ul>\n  </nav>\n} @else {\n  <div class=\"skiplinks\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </div>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSkiplinkComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-skiplink', exportAs: 'itSkipLink', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (nav) {\n  <nav class=\"skiplinks\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </ul>\n  </nav>\n} @else {\n  <div class=\"skiplinks\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </div>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'it-skiplink', exportAs: 'itSkipLink', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (nav) {\n  <nav class=\"skiplinks\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </ul>\n  </nav>\n} @else {\n  <div class=\"skiplinks\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </div>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { ariaLabel: [{
                 type: Input
             }], nav: [{
@@ -6711,18 +6682,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItSkiplinkItemComponent {
-    constructor(parent) {
+    constructor() {
+        const parent = inject(ItSkiplinkComponent, { host: true });
         this.inNav = parent.nav ? true : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkItemComponent, deps: [{ token: ItSkiplinkComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSkiplinkItemComponent, isStandalone: true, selector: "it-skiplink-item", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean] }, exportAs: ["itSkipLinkItem"], ngImport: i0, template: "@if (inNav) {\n  <li class=\"visually-hidden-focusable\">\n    <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </it-link>\n  </li>\n} @else {\n  <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </it-link>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSkiplinkItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSkiplinkItemComponent, isStandalone: true, selector: "it-skiplink-item", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean] }, exportAs: ["itSkipLinkItem"], ngImport: i0, template: "@if (inNav) {\n  <li class=\"visually-hidden-focusable\">\n    <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </it-link>\n  </li>\n} @else {\n  <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </it-link>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSkiplinkItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-skiplink-item', exportAs: 'itSkipLinkItem', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (inNav) {\n  <li class=\"visually-hidden-focusable\">\n    <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </it-link>\n  </li>\n} @else {\n  <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </it-link>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: ItSkiplinkComponent, decorators: [{
-                    type: Host
-                }] }], propDecorators: { href: [{
+            args: [{ selector: 'it-skiplink-item', exportAs: 'itSkipLinkItem', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (inNav) {\n  <li class=\"visually-hidden-focusable\">\n    <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </it-link>\n  </li>\n} @else {\n  <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </it-link>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { href: [{
                 type: Input
             }], externalLink: [{
                 type: Input,
@@ -6731,11 +6701,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 
 const skiplinkComponents = [ItSkiplinkComponent, ItSkiplinkItemComponent];
 class ItSkiplinkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, imports: [ItSkiplinkComponent, ItSkiplinkItemComponent], exports: [ItSkiplinkComponent, ItSkiplinkItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, imports: [skiplinkComponents] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSkiplinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItSkiplinkModule, imports: [ItSkiplinkComponent, ItSkiplinkItemComponent], exports: [ItSkiplinkComponent, ItSkiplinkItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSkiplinkModule, imports: [skiplinkComponents] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSkiplinkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: skiplinkComponents,
@@ -6744,8 +6714,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
         }] });
 
 class ItErrorPageComponent {
-    constructor(route) {
-        this.route = route;
+    constructor() {
+        this.route = inject(ActivatedRoute);
         /**
          * Show/Hide error code
          * @default true - show
@@ -6785,13 +6755,13 @@ class ItErrorPageComponent {
     get isDefaultErrorCode() {
         return this.errorCode === 404 || this.errorCode === 403 || this.errorCode === 500;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItErrorPageComponent, deps: [{ token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItErrorPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItErrorPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItErrorPageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-error-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RouterLink, ItBackButtonComponent, ItButtonDirective], template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$4.ActivatedRoute }], propDecorators: { errorCode: [{
+            args: [{ selector: 'it-error-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RouterLink, ItBackButtonComponent, ItButtonDirective], template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { errorCode: [{
                 type: Input
             }], showErrorCode: [{
                 type: Input,
@@ -6809,12 +6779,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }] } });
 
 class ItLanguageSwitcherComponent {
-    constructor(translateService) {
-        this.translateService = translateService;
+    constructor() {
+        this.translateService = inject(TranslateService);
         /**
          * Dropdown mode
          */
         this.mode = 'link';
+        const translateService = this.translateService;
         this.currentLang$ = this.translateService.onLangChange.pipe(startWith({ lang: translateService.currentLang }), map(event => this.availableLanguages?.find(l => l.code === event.lang)));
     }
     ngOnInit() {
@@ -6837,13 +6808,13 @@ class ItLanguageSwitcherComponent {
     changeLanguage(lang) {
         this.translateService.use(lang);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateModule, ItDropdownModule], template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n" }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { availableLanguages: [{
+            args: [{ selector: 'it-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateModule, ItDropdownModule], template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n" }]
+        }], ctorParameters: () => [], propDecorators: { availableLanguages: [{
                 type: Input
             }], mode: [{
                 type: Input
@@ -6890,10 +6861,10 @@ class ItDateAgoPipe extends TranslatePipe {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, isStandalone: true, name: "itDateAgo", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDateAgoPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItDateAgoPipe, isStandalone: true, name: "itDateAgo", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDateAgoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'itDateAgo',
@@ -7003,10 +6974,10 @@ class ItDurationPipe extends TranslatePipe {
                 return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, isStandalone: true, name: "itDuration" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItDurationPipe, isStandalone: true, name: "itDuration" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDurationPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'itDuration',
@@ -7035,15 +7006,14 @@ function provideDesignAngularKit(config) {
     ];
     if (config?.loadFont !== false) {
         // Add provider to initialize the bootstrap-italia font
-        providers.push({
-            provide: APP_INITIALIZER,
-            useFactory: () => {
+        providers.push(provideAppInitializer(() => {
+            const initializerFn = (() => {
                 return () => {
                     loadFonts(`${assetBasePath}/dist/fonts`);
                 };
-            },
-            multi: true,
-        });
+            })();
+            return initializerFn();
+        }));
     }
     // Add provider to initialize the TranslateModule
     const langPrefix = `${assetBasePath}/i18n/`;
@@ -7058,16 +7028,14 @@ function provideDesignAngularKit(config) {
         useDefaultLang: true,
     })));
     // Add provider to initialize library default languages
-    providers.push({
-        provide: APP_INITIALIZER,
-        useFactory: (translateService) => {
+    providers.push(provideAppInitializer(() => {
+        const initializerFn = ((translateService) => {
             return () => {
                 translateService.addLangs(['it', 'en']); // Adds 'it' and 'en' as available languages.
             };
-        },
-        multi: true,
-        deps: [TranslateService],
-    });
+        })(inject(TranslateService));
+        return initializerFn();
+    }));
     return makeEnvironmentProviders(providers);
 }
 
@@ -7146,8 +7114,8 @@ class DesignAngularKitModule {
             ngModule: DesignAngularKitModule,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, imports: [ItAccordionComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DesignAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: DesignAngularKitModule, imports: [ItAccordionComponent,
             ItAlertComponent,
             ItAvatarModule,
             ItBadgeDirective,
@@ -7222,7 +7190,7 @@ class DesignAngularKitModule {
             ItMegamenuComponent,
             ItSkiplinkModule,
             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,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DesignAngularKitModule, imports: [ItAlertComponent,
             ItAvatarModule,
             ItCarouselModule,
             ItChipComponent,
@@ -7256,7 +7224,7 @@ class DesignAngularKitModule {
             ItNavBarModule,
             ItSkiplinkModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DesignAngularKitModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: components,
@@ -7267,11 +7235,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
 // See options: https://videojs.com/guides/options
 
 class ItVideoPlayerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerModule, imports: [ItVideoPlayerComponent], exports: [ItVideoPlayerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItVideoPlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ItVideoPlayerModule, imports: [ItVideoPlayerComponent], exports: [ItVideoPlayerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItVideoPlayerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItVideoPlayerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ItVideoPlayerComponent],