design-angular-kit 1.0.0-2 → 1.0.0-4

package/fesm2020/design-angular-kit.mjs

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Self, Optional, Directive, HostBinding, ChangeDetectionStrategy, ContentChildren, HostListener, TemplateRef, ViewChild, EventEmitter, Output, Injectable, Inject, NgModule } from '@angular/core';
-import * as i2$1 from '@ngx-translate/core';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { Component, Input, Self, Optional, Directive, HostBinding, ChangeDetectionStrategy, ContentChildren, HostListener, TemplateRef, ViewChild, EventEmitter, Output, Injectable, Pipe, Inject, NgModule } from '@angular/core';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule, TranslateStore, TranslateLoader } from '@ngx-translate/core';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import * as i1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule, NgIf, NgForOf } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i2$2 from '@angular/router';
+import * as i2$1 from '@angular/router';
 import { RouterLink } from '@angular/router';
 import { CarouselBI, Collapse, Modal, Notification, Popover, Tooltip, InputPassword, ProgressDonut } from 'bootstrap-italia';
-import { Subject, filter, Observable, take } from 'rxjs';
+import { Subject, filter, Observable, map, of, take } from 'rxjs';
+import * as i1$2 from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
 
 class AbstractComponent {
@@ -190,7 +191,7 @@ class AbstractFormComponent extends AbstractComponent {
         return this.control.getError(errorCode, path);
     }
 }
-AbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractFormComponent, deps: [{ token: i2.NgControl, optional: true, self: true }, { token: i2$1.TranslateService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractFormComponent, deps: [{ token: i2.NgControl, optional: true, self: true }, { token: i1.TranslateService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 AbstractFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractFormComponent, decorators: [{
             type: Component,
@@ -199,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i2$1.TranslateService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { label: [{
+                }] }, { type: i1.TranslateService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { label: [{
                 type: Input
             }], validationMode: [{
                 type: Input
@@ -287,7 +288,7 @@ class AlertComponent {
     }
 }
 AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AlertComponent, selector: "it-alert", inputs: { color: "color", dismissible: "dismissible" }, ngImport: i0, template: "<div class=\"alert alert-{{color}}\"\n     [class.alert-dismissible]=\"isDismissible\"\n     [class.fade]=\"isDismissible\"\n     [class.show]=\"isDismissible\"\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  <button *ngIf=\"isDismissible\"\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"alert\"\n          [attr.aria-label]=\"'it.core.close-alert'|translate\">\n    <it-icon name=\"close\"></it-icon>\n  </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AlertComponent, selector: "it-alert", inputs: { color: "color", dismissible: "dismissible" }, ngImport: i0, template: "<div class=\"alert alert-{{color}}\"\n     [class.alert-dismissible]=\"isDismissible\"\n     [class.fade]=\"isDismissible\"\n     [class.show]=\"isDismissible\"\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  <button *ngIf=\"isDismissible\"\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"alert\"\n          [attr.aria-label]=\"'it.core.close-alert'|translate\">\n    <it-icon name=\"close\"></it-icon>\n  </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-alert', template: "<div class=\"alert alert-{{color}}\"\n     [class.alert-dismissible]=\"isDismissible\"\n     [class.fade]=\"isDismissible\"\n     [class.show]=\"isDismissible\"\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  <button *ngIf=\"isDismissible\"\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"alert\"\n          [attr.aria-label]=\"'it.core.close-alert'|translate\">\n    <it-icon name=\"close\"></it-icon>\n  </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
@@ -343,7 +344,7 @@ class ProgressBarComponent {
     }
 }
 ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: { value: "value", showLabel: "showLabel", indeterminate: "indeterminate", color: "color" }, ngImport: i0, template: "<div class=\"progress-bar-wrapper\">\n  <div *ngIf=\"showLabel\" class=\"progress-bar-label\">\n    <span class=\"visually-hidden\">{{'it.core.progress'|translate}} </span>{{value}}%\n  </div>\n  <div class=\"progress\"\n       [class.progress-color]=\"!!color\"\n       [class.progress-indeterminate]=\"isIndeterminate\">\n\n    <div *ngIf=\"isIndeterminate; else determinate\" class=\"progress-bar{{bgColor}}\" role=\"progressbar\"></div>\n    <ng-template #determinate>\n      <div class=\"progress-bar{{bgColor}}\" role=\"progressbar\" [style.width.%]=\"value\"\n           [attr.aria-valuenow]=\"value\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n    </ng-template>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: { value: "value", showLabel: "showLabel", indeterminate: "indeterminate", color: "color" }, ngImport: i0, template: "<div class=\"progress-bar-wrapper\">\n  <div *ngIf=\"showLabel\" class=\"progress-bar-label\">\n    <span class=\"visually-hidden\">{{'it.core.progress'|translate}} </span>{{value}}%\n  </div>\n  <div class=\"progress\"\n       [class.progress-color]=\"!!color\"\n       [class.progress-indeterminate]=\"isIndeterminate\">\n\n    <div *ngIf=\"isIndeterminate; else determinate\" class=\"progress-bar{{bgColor}}\" role=\"progressbar\"></div>\n    <ng-template #determinate>\n      <div class=\"progress-bar{{bgColor}}\" role=\"progressbar\" [style.width.%]=\"value\"\n           [attr.aria-valuenow]=\"value\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n    </ng-template>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-progress-bar[value]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"progress-bar-wrapper\">\n  <div *ngIf=\"showLabel\" class=\"progress-bar-label\">\n    <span class=\"visually-hidden\">{{'it.core.progress'|translate}} </span>{{value}}%\n  </div>\n  <div class=\"progress\"\n       [class.progress-color]=\"!!color\"\n       [class.progress-indeterminate]=\"isIndeterminate\">\n\n    <div *ngIf=\"isIndeterminate; else determinate\" class=\"progress-bar{{bgColor}}\" role=\"progressbar\"></div>\n    <ng-template #determinate>\n      <div class=\"progress-bar{{bgColor}}\" role=\"progressbar\" [style.width.%]=\"value\"\n           [attr.aria-valuenow]=\"value\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n    </ng-template>\n  </div>\n</div>\n" }]
@@ -431,24 +432,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class CalloutComponent {
-    constructor(_renderer, _elementRef) {
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        /**
-         * Callout appearance
-         * - <b>default</b>
-         * - <b>highlight</b>: Callout version with border only on the left side
-         * - <b>more</b>: It looks radically different from the other styles available and is suitable for more extensive texts
-         * @default default
-         */
-        this.appearance = 'default';
+    constructor() {
+        this._label = undefined;
+        this._hiddenLabel = undefined;
+        this._color = undefined;
+        this._appearance = 'default';
+        this._icon = undefined;
     }
     /**
-     * Retrieve the current icon to show
+     * Callout label
+     */
+    set label(value) { this._label = value; }
+    get label() { return this._label; }
+    /**
+     * Callout hiddenLabel
+     */
+    set hiddenLabel(value) { this._hiddenLabel = value; }
+    get hiddenLabel() { return this._hiddenLabel; }
+    /**
+     * Callout color
+     * - <b>success</b>
+     * - <b>danger</b>
+     * - <b>warning</b>
+     * - <b>important</b>
+     * - <b>note</b>
+     */
+    set color(value) { this._color = value; }
+    get color() { return this._color; }
+    /**
+     * Callout appearance
+     * - <b>default</b>
+     * - <b>highlight</b>: Callout version with border only on the left side
+     * - <b>more</b>: It looks radically different from the other styles available and is suitable for more extensive texts
+     * @default default
+     */
+    set appearance(value) { this._appearance = value; }
+    get appearance() { return this._appearance; }
+    /**
+     * Custom icon
      */
+    set icon(value) { this._icon = value; }
+    get icon() { return this._icon; }
     get iconName() {
-        if (this.icon) {
-            return this.icon;
+        if (this._icon) {
+            return this._icon;
         }
         if (this.appearance === 'more') {
             return 'zoom-in';
@@ -466,23 +493,22 @@ class CalloutComponent {
                 return 'info-circle';
         }
     }
-    ngAfterViewInit() {
-        this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
-    }
 }
-CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalloutComponent, selector: "it-callout", inputs: { title: "title", icon: "icon", color: "color", appearance: "appearance" }, ngImport: i0, template: "<div class=\"callout {{color}}\"\n     [class.callout-highlight]=\"appearance === 'highlight'\"\n     [class.callout-more]=\"appearance === 'more'\">\n\n  <div class=\"callout-title\" *ngIf=\"title\">\n    <it-icon [name]=\"iconName\"></it-icon>\n    <span class=\"visually-hidden\">{{title}}</span>\n    {{title}}\n  </div>\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</div>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }] });
+CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalloutComponent, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon" }, ngImport: i0, template: "<div class=\"callout {{color}}\" [class.callout-highlight]=\"appearance === 'highlight'\"\n  [class.callout-more]=\"appearance === 'more'\">\n  <div class=\"callout-title\" *ngIf=\"label\">\n    <it-icon [name]=\"iconName\"></it-icon>\n    <span *ngIf=\"hiddenLabel\" class=\"visually-hidden\">{{ hiddenLabel }}</span>\n    <span>{{ label }}</span>\n  </div>\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</div>", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalloutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-callout', template: "<div class=\"callout {{color}}\"\n     [class.callout-highlight]=\"appearance === 'highlight'\"\n     [class.callout-more]=\"appearance === 'more'\">\n\n  <div class=\"callout-title\" *ngIf=\"title\">\n    <it-icon [name]=\"iconName\"></it-icon>\n    <span class=\"visually-hidden\">{{title}}</span>\n    {{title}}\n  </div>\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</div>\n", styles: [".callout-big-text:empty{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { title: [{
+            args: [{ selector: 'it-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"callout {{color}}\" [class.callout-highlight]=\"appearance === 'highlight'\"\n  [class.callout-more]=\"appearance === 'more'\">\n  <div class=\"callout-title\" *ngIf=\"label\">\n    <it-icon [name]=\"iconName\"></it-icon>\n    <span *ngIf=\"hiddenLabel\" class=\"visually-hidden\">{{ hiddenLabel }}</span>\n    <span>{{ label }}</span>\n  </div>\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</div>", styles: [".callout-big-text:empty{display:none}\n"] }]
+        }], propDecorators: { label: [{
                 type: Input
-            }], icon: [{
+            }], hiddenLabel: [{
                 type: Input
             }], color: [{
                 type: Input
             }], appearance: [{
                 type: Input
+            }], icon: [{
+                type: Input
             }] } });
 
 class CardComponent extends AbstractComponent {
@@ -587,7 +613,7 @@ class CarouselComponent {
     }
 }
 CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselComponent, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: "fullCarousel", bigImg: "bigImg", lined: "lined" }, queries: [{ propertyName: "items", predicate: CarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div class=\"it-carousel-wrapper splide {{typeClass}}\"\n     [class.it-full-carousel]=\"isFullCarousel\"\n     [class.it-big-img]=\"isBigImg\"\n     data-bs-carousel-splide #carousel>\n\n  <div class=\"it-header-block\" *ngIf=\"title\">\n    <div class=\"it-header-block-title\">\n      <h2>{{title}}</h2>\n    </div>\n  </div>\n\n  <div class=\"splide__track {{trackClass}}\">\n    <ul class=\"splide__list\">\n      <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n        <div class=\"it-single-slide-wrapper\">\n          <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselComponent, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: "fullCarousel", bigImg: "bigImg", lined: "lined" }, queries: [{ propertyName: "items", predicate: CarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div class=\"it-carousel-wrapper splide {{typeClass}}\"\n     [class.it-full-carousel]=\"isFullCarousel\"\n     [class.it-big-img]=\"isBigImg\"\n     data-bs-carousel-splide #carousel>\n\n  <div class=\"it-header-block\" *ngIf=\"title\">\n    <div class=\"it-header-block-title\">\n      <h2>{{title}}</h2>\n    </div>\n  </div>\n\n  <div class=\"splide__track {{trackClass}}\">\n    <ul class=\"splide__list\">\n      <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n        <div class=\"it-single-slide-wrapper\">\n          <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-carousel', exportAs: 'itCarousel', template: "<div class=\"it-carousel-wrapper splide {{typeClass}}\"\n     [class.it-full-carousel]=\"isFullCarousel\"\n     [class.it-big-img]=\"isBigImg\"\n     data-bs-carousel-splide #carousel>\n\n  <div class=\"it-header-block\" *ngIf=\"title\">\n    <div class=\"it-header-block-title\">\n      <h2>{{title}}</h2>\n    </div>\n  </div>\n\n  <div class=\"splide__track {{trackClass}}\">\n    <ul class=\"splide__list\">\n      <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n        <div class=\"it-single-slide-wrapper\">\n          <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"] }]
@@ -722,7 +748,7 @@ class LinkComponent {
     }
 }
 LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LinkComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LinkComponent, selector: "it-link", inputs: { href: "href", externalLink: "externalLink", disabled: "disabled", class: "class" }, ngImport: i0, template: "<a *ngIf=\"!isExternalLink; else externalLink\" [class]=\"class\" [routerLink]=\"isDisabled ? null : href\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [class]=\"class\" [attr.href]=\"isDisabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LinkComponent, selector: "it-link", inputs: { href: "href", externalLink: "externalLink", disabled: "disabled", class: "class" }, ngImport: i0, template: "<a *ngIf=\"!isExternalLink; else externalLink\" [class]=\"class\" [routerLink]=\"isDisabled ? null : href\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [class]=\"class\" [attr.href]=\"isDisabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-link', template: "<a *ngIf=\"!isExternalLink; else externalLink\" [class]=\"class\" [routerLink]=\"isDisabled ? null : href\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [class]=\"class\" [attr.href]=\"isDisabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
@@ -783,7 +809,7 @@ class DropdownItemComponent extends LinkComponent {
     }
 }
 DropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: { divider: "divider", active: "active", large: "large", iconName: "iconName", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span><ng-content></ng-content></span>\n\n      <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+DropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: { divider: "divider", active: "active", large: "large", iconName: "iconName", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span><ng-content></ng-content></span>\n\n      <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-dropdown-item', template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span><ng-content></ng-content></span>\n\n      <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
@@ -880,7 +906,7 @@ class ListItemComponent extends LinkComponent {
     }
 }
 ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ListItemComponent, selector: "it-list-item", inputs: { active: "active", large: "large", 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    <div *ngIf=\"avatar\" class=\"avatar size-lg\">\n      <img [attr.src]=\"avatar\" alt=\"avatar\">\n    </div>\n\n    <div *ngIf=\"image\" class=\"it-thumb\">\n      <img [attr.src]=\"image\" alt=\"thumb\">\n    </div>\n\n    <div class=\"it-right-zone\">\n      <span class=\"text\">\n        <ng-content></ng-content>\n      </span>\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\n  <div *ngIf=\"!href; else link\" [class]=\"itemClass\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n\n  <ng-template #link>\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }] });
+ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ListItemComponent, selector: "it-list-item", inputs: { active: "active", large: "large", 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    <div *ngIf=\"avatar\" class=\"avatar size-lg\">\n      <img [attr.src]=\"avatar\" alt=\"avatar\">\n    </div>\n\n    <div *ngIf=\"image\" class=\"it-thumb\">\n      <img [attr.src]=\"image\" alt=\"thumb\">\n    </div>\n\n    <div class=\"it-right-zone\">\n      <span class=\"text\">\n        <ng-content></ng-content>\n      </span>\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\n  <div *ngIf=\"!href; else link\" [class]=\"itemClass\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n\n  <ng-template #link>\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-list-item', template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    <div *ngIf=\"avatar\" class=\"avatar size-lg\">\n      <img [attr.src]=\"avatar\" alt=\"avatar\">\n    </div>\n\n    <div *ngIf=\"image\" class=\"it-thumb\">\n      <img [attr.src]=\"image\" alt=\"thumb\">\n    </div>\n\n    <div class=\"it-right-zone\">\n      <span class=\"text\">\n        <ng-content></ng-content>\n      </span>\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\n  <div *ngIf=\"!href; else link\" [class]=\"itemClass\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n\n  <ng-template #link>\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}\n"] }]
@@ -964,7 +990,7 @@ class ModalComponent extends AbstractComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "it-modal[id][title]", inputs: { title: "title", size: "size" }, outputs: { onShow: "onShow", onShown: "onShown", onHide: "onHide", onHidden: "onHidden", onHidePrevented: "onHidePrevented" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"modal fade\"\n     tabindex=\"-1\"\n     role=\"dialog\"\n     aria-hidden=\"true\"\n     [attr.aria-labelledby]=\"id+'-label'\" #modalElement>\n  <div class=\"modal-dialog {{size}}\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title h5 no_toc\" id=\"{{id}}-label\">{{title}}</h2>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\n      </div>\n      <div class=\"modal-body mb-3\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer modal-footer-shadow\">\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: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "it-modal[id][title]", inputs: { title: "title", size: "size" }, outputs: { onShow: "onShow", onShown: "onShown", onHide: "onHide", onHidden: "onHidden", onHidePrevented: "onHidePrevented" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"modal fade\"\n     tabindex=\"-1\"\n     role=\"dialog\"\n     aria-hidden=\"true\"\n     [attr.aria-labelledby]=\"id+'-label'\" #modalElement>\n  <div class=\"modal-dialog {{size}}\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title h5 no_toc\" id=\"{{id}}-label\">{{title}}</h2>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\n      </div>\n      <div class=\"modal-body mb-3\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer modal-footer-shadow\">\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: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-modal[id][title]', exportAs: 'itModal', template: "<div [id]=\"id\" class=\"modal fade\"\n     tabindex=\"-1\"\n     role=\"dialog\"\n     aria-hidden=\"true\"\n     [attr.aria-labelledby]=\"id+'-label'\" #modalElement>\n  <div class=\"modal-dialog {{size}}\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title h5 no_toc\" id=\"{{id}}-label\">{{title}}</h2>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\n      </div>\n      <div class=\"modal-body mb-3\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer modal-footer-shadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"] }]
@@ -1169,7 +1195,7 @@ class NotificationsComponent {
     }
 }
 NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationsComponent, deps: [{ token: NotificationsService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationsComponent, selector: "it-notifications", inputs: { duration: "duration", position: "position" }, ngImport: i0, template: "<div *ngFor=\"let notification of notifications; let i = index\"\n     [id]=\"notification.id\"\n     class=\"notification {{notification.position}} {{notification.type}}\"\n     [class.with-icon]=\"notification.type !== NotificationType.Standard\"\n     [class.dismissable]=\"notification.dismissable\"\n     role=\"alert\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n  <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n    <ng-container>{{notification.title}}</ng-container>\n  </h2>\n  <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n  <button *ngIf=\"notification.dismissable\" type=\"button\" class=\"btn notification-close\"\n          (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</div>\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationsComponent, selector: "it-notifications", inputs: { duration: "duration", position: "position" }, ngImport: i0, template: "<div *ngFor=\"let notification of notifications; let i = index\"\n     [id]=\"notification.id\"\n     class=\"notification {{notification.position}} {{notification.type}}\"\n     [class.with-icon]=\"notification.type !== NotificationType.Standard\"\n     [class.dismissable]=\"notification.dismissable\"\n     role=\"alert\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n  <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n    <ng-container>{{notification.title}}</ng-container>\n  </h2>\n  <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n  <button *ngIf=\"notification.dismissable\" type=\"button\" class=\"btn notification-close\"\n          (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</div>\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-notifications', template: "<div *ngFor=\"let notification of notifications; let i = index\"\n     [id]=\"notification.id\"\n     class=\"notification {{notification.position}} {{notification.type}}\"\n     [class.with-icon]=\"notification.type !== NotificationType.Standard\"\n     [class.dismissable]=\"notification.dismissable\"\n     role=\"alert\" [attr.aria-labelledby]=\"notification.id+'-title'\">\n\n  <h2 [id]=\"notification.id+'-title'\" class=\"h5\">\n    <ng-container>{{notification.title}}</ng-container>\n  </h2>\n  <p *ngIf=\"notification.message\">{{notification.message}}</p>\n\n  <button *ngIf=\"notification.dismissable\" type=\"button\" class=\"btn notification-close\"\n          (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</div>\n", styles: [".notification{z-index:10000}\n"] }]
@@ -1211,7 +1237,7 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "it-pagination[currentPage][pageNumbers]", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", alignment: "alignment" }, outputs: { newPageEvent: "newPageEvent" }, ngImport: i0, template: "<nav class=\"pagination-wrapper\"\n     [class.justify-content-center]=\"alignment==='center'\"\n     [class.justify-content-end]=\"alignment==='end'\">\n  <ul class=\"pagination\">\n    <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n      <a class=\"page-link\" (click)=\"pageChange(currentPage)\">\n        <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n        <span class=\"visually-hidden\">{{'it.core.previous-page'|translate}}</span>\n      </a>\n    </li>\n\n    <ng-container *ngIf=\"pageNumbers > 5 && currentPage > 2\">\n      <li class=\"page-item\"><a class=\"page-link\" (click)=\"pageChange(1)\">1</a></li>\n      <li class=\"page-item\" *ngIf=\"currentPage > 3\">\n        <span class=\"page-link\">...</span>\n      </li>\n    </ng-container>\n\n    <li class=\"page-item\" *ngFor=\"let page of pages\">\n      <a class=\"page-link\" aria-current=\"page\" *ngIf=\"page === (currentPage + 1); else inactivePage\">\n        <span class=\"d-inline-block d-sm-none\">{{'it.core.page'|translate}}</span> {{page}}\n      </a>\n      <ng-template #inactivePage>\n        <a class=\"page-link\" (click)=\"pageChange(page)\">{{page}}</a>\n      </ng-template>\n    </li>\n\n    <ng-container *ngIf=\"pageNumbers > 5 && pageNumbers - currentPage > 3\">\n      <li class=\"page-item\">\n        <span class=\"page-link\">...</span>\n      </li>\n      <li class=\"page-item\"><a class=\"page-link\" (click)=\"pageChange(pageNumbers)\">{{pageNumbers}}</a></li>\n    </ng-container>\n\n    <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n      <a class=\"page-link\" (click)=\"pageChange(currentPage + 2)\">\n        <span class=\"visually-hidden\">{{'it.core.next-page'|translate}}</span>\n        <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n      </a>\n    </li>\n  </ul>\n</nav>\n", styles: [".page-item:not(.disabled)>a.page-link{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "it-pagination[currentPage][pageNumbers]", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", alignment: "alignment" }, outputs: { newPageEvent: "newPageEvent" }, ngImport: i0, template: "<nav class=\"pagination-wrapper\"\n     [class.justify-content-center]=\"alignment==='center'\"\n     [class.justify-content-end]=\"alignment==='end'\">\n  <ul class=\"pagination\">\n    <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n      <a class=\"page-link\" (click)=\"pageChange(currentPage)\">\n        <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n        <span class=\"visually-hidden\">{{'it.core.previous-page'|translate}}</span>\n      </a>\n    </li>\n\n    <ng-container *ngIf=\"pageNumbers > 5 && currentPage > 2\">\n      <li class=\"page-item\"><a class=\"page-link\" (click)=\"pageChange(1)\">1</a></li>\n      <li class=\"page-item\" *ngIf=\"currentPage > 3\">\n        <span class=\"page-link\">...</span>\n      </li>\n    </ng-container>\n\n    <li class=\"page-item\" *ngFor=\"let page of pages\">\n      <a class=\"page-link\" aria-current=\"page\" *ngIf=\"page === (currentPage + 1); else inactivePage\">\n        <span class=\"d-inline-block d-sm-none\">{{'it.core.page'|translate}}</span> {{page}}\n      </a>\n      <ng-template #inactivePage>\n        <a class=\"page-link\" (click)=\"pageChange(page)\">{{page}}</a>\n      </ng-template>\n    </li>\n\n    <ng-container *ngIf=\"pageNumbers > 5 && pageNumbers - currentPage > 3\">\n      <li class=\"page-item\">\n        <span class=\"page-link\">...</span>\n      </li>\n      <li class=\"page-item\"><a class=\"page-link\" (click)=\"pageChange(pageNumbers)\">{{pageNumbers}}</a></li>\n    </ng-container>\n\n    <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n      <a class=\"page-link\" (click)=\"pageChange(currentPage + 2)\">\n        <span class=\"visually-hidden\">{{'it.core.next-page'|translate}}</span>\n        <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n      </a>\n    </li>\n  </ul>\n</nav>\n", styles: [".page-item:not(.disabled)>a.page-link{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-pagination[currentPage][pageNumbers]', template: "<nav class=\"pagination-wrapper\"\n     [class.justify-content-center]=\"alignment==='center'\"\n     [class.justify-content-end]=\"alignment==='end'\">\n  <ul class=\"pagination\">\n    <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n      <a class=\"page-link\" (click)=\"pageChange(currentPage)\">\n        <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n        <span class=\"visually-hidden\">{{'it.core.previous-page'|translate}}</span>\n      </a>\n    </li>\n\n    <ng-container *ngIf=\"pageNumbers > 5 && currentPage > 2\">\n      <li class=\"page-item\"><a class=\"page-link\" (click)=\"pageChange(1)\">1</a></li>\n      <li class=\"page-item\" *ngIf=\"currentPage > 3\">\n        <span class=\"page-link\">...</span>\n      </li>\n    </ng-container>\n\n    <li class=\"page-item\" *ngFor=\"let page of pages\">\n      <a class=\"page-link\" aria-current=\"page\" *ngIf=\"page === (currentPage + 1); else inactivePage\">\n        <span class=\"d-inline-block d-sm-none\">{{'it.core.page'|translate}}</span> {{page}}\n      </a>\n      <ng-template #inactivePage>\n        <a class=\"page-link\" (click)=\"pageChange(page)\">{{page}}</a>\n      </ng-template>\n    </li>\n\n    <ng-container *ngIf=\"pageNumbers > 5 && pageNumbers - currentPage > 3\">\n      <li class=\"page-item\">\n        <span class=\"page-link\">...</span>\n      </li>\n      <li class=\"page-item\"><a class=\"page-link\" (click)=\"pageChange(pageNumbers)\">{{pageNumbers}}</a></li>\n    </ng-container>\n\n    <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n      <a class=\"page-link\" (click)=\"pageChange(currentPage + 2)\">\n        <span class=\"visually-hidden\">{{'it.core.next-page'|translate}}</span>\n        <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n      </a>\n    </li>\n  </ul>\n</nav>\n", styles: [".page-item:not(.disabled)>a.page-link{cursor:pointer}\n"] }]
@@ -1409,7 +1435,7 @@ class ProgressButtonComponent {
     }
 }
 ProgressButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressButtonComponent, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n                 [value]=\"progressValue\"\n                 [indeterminate]=\"isIndeterminate\"\n                 [color]=\"progressColor\"></it-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProgressButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressButtonComponent, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n                 [value]=\"progressValue\"\n                 [indeterminate]=\"isIndeterminate\"\n                 [color]=\"progressColor\"></it-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[itButton][progress]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n                 [value]=\"progressValue\"\n                 [indeterminate]=\"isIndeterminate\"\n                 [color]=\"progressColor\"></it-progress-bar>\n" }]
@@ -1437,7 +1463,7 @@ class SpinnerComponent {
     }
 }
 SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SpinnerComponent, selector: "it-spinner", inputs: { active: "active", small: "small", double: "double" }, ngImport: i0, template: "<div class=\"progress-spinner\"\n     [class.progress-spinner-double]=\"isDouble\"\n     [class.progress-spinner-active]=\"isActive\"\n     [class.size-sm]=\"isSmall\">\n  <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n  <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n  <span class=\"visually-hidden\">{{'it.core.loading'|translate}}...</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SpinnerComponent, selector: "it-spinner", inputs: { active: "active", small: "small", double: "double" }, ngImport: i0, template: "<div class=\"progress-spinner\"\n     [class.progress-spinner-double]=\"isDouble\"\n     [class.progress-spinner-active]=\"isActive\"\n     [class.size-sm]=\"isSmall\">\n  <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n  <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n  <span class=\"visually-hidden\">{{'it.core.loading'|translate}}...</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-spinner', template: "<div class=\"progress-spinner\"\n     [class.progress-spinner-double]=\"isDouble\"\n     [class.progress-spinner-active]=\"isActive\"\n     [class.size-sm]=\"isSmall\">\n  <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n  <div *ngIf=\"isDouble\" class=\"progress-spinner-inner\"></div>\n  <span class=\"visually-hidden\">{{'it.core.loading'|translate}}...</span>\n</div>\n" }]
@@ -1494,7 +1520,7 @@ class TabContainerComponent {
     }
 }
 TabContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabContainerComponent, selector: "it-tab-container", inputs: { auto: "auto", iconText: "iconText", dark: "dark" }, queries: [{ propertyName: "tabs", predicate: TabItemComponent }], ngImport: i0, template: "<ul class=\"nav nav-tabs\"\n    [class.auto]=\"isTrueBooleanInput(auto)\"\n    [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n    [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n    role=\"tablist\">\n\n  <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n    <a [id]=\"tab.id+'-tab-link'\"\n       role=\"tab\"\n       data-bs-toggle=\"tab\"\n       class=\"nav-link\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n       [attr.href]=\"'#'+tab.id+'-tab'\"\n       [attr.aria-controls]=\"tab.id+'-tab'\">\n      <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\"></it-icon>\n      {{tab.label}}\n    </a>\n  </li>\n</ul>\n\n<div class=\"tab-content\">\n  <div *ngFor=\"let tab of tabs\"\n       [id]=\"tab.id+'-tab'\"\n       class=\"tab-pane fade {{tab.class ?? ''}}\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.show]=\"isTrueBooleanInput(tab.active)\"\n       role=\"tabpanel\"\n       [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n    <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }] });
+TabContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabContainerComponent, selector: "it-tab-container", inputs: { auto: "auto", iconText: "iconText", dark: "dark" }, queries: [{ propertyName: "tabs", predicate: TabItemComponent }], ngImport: i0, template: "<ul class=\"nav nav-tabs\"\n    [class.auto]=\"isTrueBooleanInput(auto)\"\n    [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n    [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n    role=\"tablist\">\n\n  <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n    <a [id]=\"tab.id+'-tab-link'\"\n       role=\"tab\"\n       data-bs-toggle=\"tab\"\n       class=\"nav-link\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n       [attr.href]=\"'#'+tab.id+'-tab'\"\n       [attr.aria-controls]=\"tab.id+'-tab'\">\n      <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\"></it-icon>\n      {{tab.label}}\n    </a>\n  </li>\n</ul>\n\n<div class=\"tab-content\">\n  <div *ngFor=\"let tab of tabs\"\n       [id]=\"tab.id+'-tab'\"\n       class=\"tab-pane fade {{tab.class ?? ''}}\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.show]=\"isTrueBooleanInput(tab.active)\"\n       role=\"tabpanel\"\n       [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n    <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-tab-container', template: "<ul class=\"nav nav-tabs\"\n    [class.auto]=\"isTrueBooleanInput(auto)\"\n    [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n    [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n    role=\"tablist\">\n\n  <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n    <a [id]=\"tab.id+'-tab-link'\"\n       role=\"tab\"\n       data-bs-toggle=\"tab\"\n       class=\"nav-link\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n       [attr.href]=\"'#'+tab.id+'-tab'\"\n       [attr.aria-controls]=\"tab.id+'-tab'\">\n      <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\"></it-icon>\n      {{tab.label}}\n    </a>\n  </li>\n</ul>\n\n<div class=\"tab-content\">\n  <div *ngFor=\"let tab of tabs\"\n       [id]=\"tab.id+'-tab'\"\n       class=\"tab-pane fade {{tab.class ?? ''}}\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.show]=\"isTrueBooleanInput(tab.active)\"\n       role=\"tabpanel\"\n       [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n    <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n  </div>\n</div>\n" }]
@@ -1717,7 +1743,7 @@ class CheckboxComponent extends AbstractFormComponent {
     }
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckboxComponent, selector: "it-checkbox[id][label]", inputs: { toggle: "toggle", inline: "inline", group: "group", checked: "checked", indeterminate: "indeterminate" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\"\n       [class.form-check-group]=\"isGroup\"\n       [class.form-check-inline]=\"inline\">\n\n    <div *ngIf=\"toggle; else defaultStyle\" class=\"toggles\">\n      <label [for]=\"id\">\n        {{label}}\n        <input [id]=\"id\"\n               type=\"checkbox\"\n               [formControl]=\"control\"\n               [attr.aria-describedby]=\"id + '-help'\">\n        <span class=\"lever\"></span>\n      </label>\n    </div>\n\n    <ng-template #defaultStyle>\n      <input [id]=\"id\"\n             type=\"checkbox\"\n             class=\"form-check-input\"\n             [class.is-invalid]=\"isInvalid\"\n             [class.is-valid]=\"isValid\"\n             [class.semi-checked]=\"isIndeterminate\"\n             [formControl]=\"control\"\n             [attr.aria-describedby]=\"id + '-help'\">\n      <label class=\"form-check-label\" [for]=\"id\">{{label}}</label>\n    </ng-template>\n\n    <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n      <ng-content></ng-content>\n    </small>\n\n    <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  </div>\n\n  <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckboxComponent, selector: "it-checkbox[id][label]", inputs: { toggle: "toggle", inline: "inline", group: "group", checked: "checked", indeterminate: "indeterminate" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\"\n       [class.form-check-group]=\"isGroup\"\n       [class.form-check-inline]=\"inline\">\n\n    <div *ngIf=\"toggle; else defaultStyle\" class=\"toggles\">\n      <label [for]=\"id\">\n        {{label}}\n        <input [id]=\"id\"\n               type=\"checkbox\"\n               [formControl]=\"control\"\n               [attr.aria-describedby]=\"id + '-help'\">\n        <span class=\"lever\"></span>\n      </label>\n    </div>\n\n    <ng-template #defaultStyle>\n      <input [id]=\"id\"\n             type=\"checkbox\"\n             class=\"form-check-input\"\n             [class.is-invalid]=\"isInvalid\"\n             [class.is-valid]=\"isValid\"\n             [class.semi-checked]=\"isIndeterminate\"\n             [formControl]=\"control\"\n             [attr.aria-describedby]=\"id + '-help'\">\n      <label class=\"form-check-label\" [for]=\"id\">{{label}}</label>\n    </ng-template>\n\n    <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n      <ng-content></ng-content>\n    </small>\n\n    <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  </div>\n\n  <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-checkbox[id][label]', template: "<ng-container>\n  <div class=\"form-check\"\n       [class.form-check-group]=\"isGroup\"\n       [class.form-check-inline]=\"inline\">\n\n    <div *ngIf=\"toggle; else defaultStyle\" class=\"toggles\">\n      <label [for]=\"id\">\n        {{label}}\n        <input [id]=\"id\"\n               type=\"checkbox\"\n               [formControl]=\"control\"\n               [attr.aria-describedby]=\"id + '-help'\">\n        <span class=\"lever\"></span>\n      </label>\n    </div>\n\n    <ng-template #defaultStyle>\n      <input [id]=\"id\"\n             type=\"checkbox\"\n             class=\"form-check-input\"\n             [class.is-invalid]=\"isInvalid\"\n             [class.is-valid]=\"isValid\"\n             [class.semi-checked]=\"isIndeterminate\"\n             [formControl]=\"control\"\n             [attr.aria-describedby]=\"id + '-help'\">\n      <label class=\"form-check-label\" [for]=\"id\">{{label}}</label>\n    </ng-template>\n\n    <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n      <ng-content></ng-content>\n    </small>\n\n    <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  </div>\n\n  <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n</ng-template>\n" }]
@@ -1836,43 +1862,46 @@ class ItValidators {
     /**
      * Email validator
      */
-    static email() {
-        return [Validators.email, ItValidators.customPattern(EMAIL_REGEX, { invalidEmail: true })];
+    static get email() {
+        return Validators.compose([
+            Validators.email,
+            ItValidators.customPattern(EMAIL_REGEX, { invalidEmail: true })
+        ]);
     }
     /**
      * Phone number validator
      */
-    static tel() {
+    static get tel() {
         return ItValidators.customPattern(PHONE_NUMBER_REGEX, { invalidTel: true });
     }
     /**
      * URL validator
      */
-    static url() {
+    static get url() {
         return ItValidators.customPattern(URL_REGEX, { invalidUrl: true });
     }
     /**
      * Italian Tax Code validator
      */
-    static taxCode() {
+    static get taxCode() {
         return ItValidators.customPattern(ITALIAN_TAX_CODE_REGEX, { invalidTaxCode: true });
     }
     /**
      * VAT Number validator
      */
-    static vatNumber() {
+    static get vatNumber() {
         return ItValidators.customPattern(VAT_NUMBER_REGEX, { invalidVatNumber: true });
     }
     /**
      * Italian Postal Code validator (CAP)
      */
-    static cap() {
+    static get cap() {
         return ItValidators.customPattern(CAP_REGEX, { invalidCap: true });
     }
     /**
      * Check if value is a valid RegExp
      */
-    static regExp() {
+    static get regExp() {
         return (control) => {
             try {
                 if (control?.value) {
@@ -1888,6 +1917,39 @@ class ItValidators {
 }
 ItValidators.SpecialCharacterPattern = '!@#$%&*_+=;:|,.';
 
+class MarkMatchingTextPipe {
+    constructor(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+    }
+    transform(allString, searchString) {
+        if (!searchString) {
+            return allString;
+        }
+        else if (!allString) {
+            return "";
+        }
+        // Check if search string is a substring of pivot string (no case-sensitive)
+        const idxOfMatchString = allString.toLowerCase().indexOf(searchString.toLowerCase());
+        if (idxOfMatchString !== -1) {
+            // retrieve the exactly substring
+            const matchingString = allString.substring(idxOfMatchString, idxOfMatchString + searchString.length);
+            // Replace original string marking as <strong> (bold) the matchinng substring
+            const regEx = new RegExp('(' + matchingString + ')', 'gi');
+            const res = allString.replace(regEx, '<mark>$1</mark>');
+            return this.domSanitizer.bypassSecurityTrustHtml(res);
+        }
+        return allString;
+    }
+}
+MarkMatchingTextPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MarkMatchingTextPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+MarkMatchingTextPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: MarkMatchingTextPipe, name: "markMatchingText" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MarkMatchingTextPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'markMatchingText'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
+
 class InputComponent extends AbstractFormComponent {
     constructor() {
         super(...arguments);
@@ -1900,7 +1962,18 @@ class InputComponent extends AbstractFormComponent {
          * The input placeholder
          */
         this.placeholder = '';
+        this._autoCompleteData = [];
+        this.showAutocompletion = false;
+        /** Observable da cui vengono emessi i risultati dell'auto completamento */
+        this.autocompleteResults$ = new Observable();
     }
+    /**
+     * Opzionale.
+     * Disponibile solo se il type è search.
+     * Indica la lista di elementi ricercabili su cui basare il sistema di autocompletamento della input
+     */
+    set autoCompleteData(value) { this._autoCompleteData = value; }
+    get autoCompleteData() { return this._autoCompleteData; }
     get isActiveLabel() {
         const value = this.control.value;
         if ((!!value && value !== 0) || value === 0 || !!this.placeholder) {
@@ -1990,6 +2063,7 @@ class InputComponent extends AbstractFormComponent {
                 break;
         }
         this.addValidators(validators);
+        this.autocompleteResults$ = this.getAutocompleteResults$();
     }
     /**
      * Increment or decrease the input number value of step
@@ -2011,12 +2085,62 @@ class InputComponent extends AbstractFormComponent {
         }
         this.control.setValue(value);
     }
+    getAutocompleteResults$() {
+        if (this.type === 'search') {
+            return this.control.valueChanges.pipe(map((value) => {
+                const searchedValue = value;
+                if (searchedValue) {
+                    const lowercaseValue = searchedValue.toLowerCase();
+                    const lowercaseData = this._autoCompleteData.filter((item) => item.value).map(item => {
+                        return { ...item, original: item.value, lowercase: item.value.toLowerCase() };
+                    });
+                    const relatedEntries = [];
+                    lowercaseData.forEach(lowercaseEntry => {
+                        const matching = (lowercaseEntry.lowercase).includes(lowercaseValue);
+                        if (matching) {
+                            relatedEntries.push(lowercaseEntry);
+                        }
+                    });
+                    return { searchedValue, relatedEntries };
+                }
+                else {
+                    return { searchedValue, relatedEntries: [] };
+                }
+            }));
+        }
+        else {
+            return of({ searchedValue: '', relatedEntries: [] });
+        }
+    }
+    isAutocompletable() {
+        if (this._autoCompleteData && this.type === 'search') {
+            return this._autoCompleteData.length > 0;
+        }
+        else {
+            return false;
+        }
+    }
+    onEntryClick(entry, event) {
+        // Se non è stato definito un link associato all'elemento dell'autocomplete, probabilmente il desiderata 
+        // non è effettuare la navigazione al default '#', pertanto in tal caso meglio annullare la navigazione.
+        if (!entry.link) {
+            event.preventDefault();
+        }
+        this.control.setValue(entry.value);
+        this.showAutocompletion = false;
+    }
+    autocompleteItemTrackByValueFn(index, item) {
+        return item.value;
+    }
+    onKeyDown() {
+        this.showAutocompletion = this.type === 'search';
+    }
 }
 InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: InputComponent, selector: "it-input[id]", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", max: "max", min: "min", step: "step", currency: "currency", percentage: "percentage", adaptive: "adaptive" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <div class=\"input-group\">\n    <div class=\"input-group-prepend\" [class.d-none]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n      <div #prepend>\n        <ng-content select=\"[prepend]\"></ng-content>\n      </div>\n      <div class=\"input-group-text\" #prependText>\n        <ng-content select=\"[prependText]\"></ng-content>\n      </div>\n    </div>\n\n    <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"isActiveLabel\"\n           [class.empty-prepend-label]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n      {{label}}\n    </label>\n\n    <span *ngIf=\"type === 'number'\"\n          class=\"input-number\"\n          [class.input-number-currency]=\"currency\"\n          [class.input-number-percentage]=\"percentage\"\n          [class.input-number-adaptive]=\"adaptive\">\n\n      <input type=\"number\"\n             [id]=\"id\"\n             [step]=\"step ?? null\"\n             [class.is-invalid]=\"isInvalid\"\n             [class.is-valid]=\"isValid\"\n             [formControl]=\"control\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"isReadonly\"\n             [attr.aria-describedby]=\"id + '-description'\"\n             (blur)=\"markAsTouched()\" />\n\n      <button type=\"button\" class=\"input-number-add\" (click)=\"incrementNumber()\">\n        <span class=\"visually-hidden\">{{'it.form.increase-value'}}</span>\n      </button>\n      <button type=\"button\" class=\"input-number-sub\" (click)=\"incrementNumber(true)\">\n        <span class=\"visually-hidden\">{{'it.form.decrease-value'}}</span>\n      </button>\n    </span>\n\n    <input *ngIf=\"type !== 'number'\"\n           [id]=\"id\"\n           [type]=\"type\"\n           [class.form-control]=\"readonly !== 'plaintext'\"\n           [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n           [class.is-invalid]=\"isInvalid\"\n           [class.is-valid]=\"isValid\"\n           [formControl]=\"control\"\n           [placeholder]=\"placeholder\"\n           [readonly]=\"isReadonly\"\n           [attr.aria-describedby]=\"id + '-description'\"\n           (blur)=\"markAsTouched()\">\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  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError>\n      <ng-content select=\"[error]\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group .input-number button.input-number-add{top:0}.form-group .input-number button.input-number-sub{bottom:0}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: InputComponent, selector: "it-input[id]", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", max: "max", min: "min", step: "step", currency: "currency", percentage: "percentage", adaptive: "adaptive", autoCompleteData: "autoCompleteData" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <div class=\"input-group\">\n    <div class=\"input-group-prepend\" [class.d-none]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n      <div #prepend>\n        <ng-content select=\"[prepend]\"></ng-content>\n      </div>\n      <div class=\"input-group-text\" #prependText>\n        <ng-content select=\"[prependText]\"></ng-content>\n      </div>\n    </div>\n\n    <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"isActiveLabel\"\n           [class.empty-prepend-label]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n      {{label}}\n    </label>\n\n    <span *ngIf=\"type === 'number'\"\n          class=\"input-number\"\n          [class.input-number-currency]=\"currency\"\n          [class.input-number-percentage]=\"percentage\"\n          [class.input-number-adaptive]=\"adaptive\">\n\n      <input type=\"number\"\n             [id]=\"id\"\n             [step]=\"step ?? null\"\n             [class.is-invalid]=\"isInvalid\"\n             [class.is-valid]=\"isValid\"\n             [formControl]=\"control\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"isReadonly\"\n             [attr.aria-describedby]=\"id + '-description'\"\n             (blur)=\"markAsTouched()\" />\n\n      <button type=\"button\" class=\"input-number-add\" (click)=\"incrementNumber()\">\n        <span class=\"visually-hidden\">{{'it.form.increase-value'}}</span>\n      </button>\n      <button type=\"button\" class=\"input-number-sub\" (click)=\"incrementNumber(true)\">\n        <span class=\"visually-hidden\">{{'it.form.decrease-value'}}</span>\n      </button>\n    </span>\n\n    <input *ngIf=\"type !== 'number'\"\n           [id]=\"id\"\n           [type]=\"type\"\n           [class.form-control]=\"readonly !== 'plaintext'\"\n           [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n           [class.is-invalid]=\"isInvalid\"\n           [class.is-valid]=\"isValid\"\n           [formControl]=\"control\"\n           [placeholder]=\"placeholder\"\n           [readonly]=\"isReadonly\"\n           (keydown)=\"onKeyDown()\"\n           [attr.aria-describedby]=\"id + '-description'\"\n           (blur)=\"markAsTouched()\">\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  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n\n\n\n\n  <!-- INIZIO gestione AUTOCOMPLETAMENTO -->\n\n\n  <!-- Icona lente per autocompletamento -->\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\" *ngIf=\"isAutocompletable()\">\n    <it-icon name = \"search\" size=\"sm\"></it-icon>\n  </span>\n\n  <ng-container *ngIf=\"autocompleteResults$ | async as autocomplete\">\n    <!-- Lista di autocompletamento -->\n    <ul class=\"autocomplete-list\" *ngIf=\"isAutocompletable()\"  [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      <li *ngFor=\"let entry of autocomplete.relatedEntries; trackBy: autocompleteItemTrackByValueFn\" (click)=\"onEntryClick(entry, $event)\">\n        <a [href]=\"entry.link\" >\n          <ng-container *ngTemplateOutlet=\"autocompleteItemTemplate\"></ng-container>\n        </a>\n        <ng-template #autocompleteItemTemplate>\n          <div class=\"avatar size-sm\" *ngIf=\"entry.avatarSrcPath\">\n            <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\">\n          </div>\n          <it-icon *ngIf=\"entry.icon\" [name]=\"entry.icon\" size=\"sm\"></it-icon>\n          <span class=\"autocomplete-list-text\">\n            <span [innerHTML] = \"entry.original | markMatchingText: autocomplete.searchedValue\"></span>\n            <em *ngIf=\"entry.label\">{{entry.label}}</em>\n          </span>\n        </ng-template>\n      </li>\n    </ul>\n  </ng-container>\n  \n\n  <!-- FINE gestione AUTOCOMPLETAMENTO -->\n\n\n\n\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError>\n      <ng-content select=\"[error]\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group .input-number button.input-number-add{top:0}.form-group .input-number button.input-number-sub{bottom:0}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MarkMatchingTextPipe, name: "markMatchingText" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-input[id]', template: "<div class=\"form-group\">\n  <div class=\"input-group\">\n    <div class=\"input-group-prepend\" [class.d-none]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n      <div #prepend>\n        <ng-content select=\"[prepend]\"></ng-content>\n      </div>\n      <div class=\"input-group-text\" #prependText>\n        <ng-content select=\"[prependText]\"></ng-content>\n      </div>\n    </div>\n\n    <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"isActiveLabel\"\n           [class.empty-prepend-label]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n      {{label}}\n    </label>\n\n    <span *ngIf=\"type === 'number'\"\n          class=\"input-number\"\n          [class.input-number-currency]=\"currency\"\n          [class.input-number-percentage]=\"percentage\"\n          [class.input-number-adaptive]=\"adaptive\">\n\n      <input type=\"number\"\n             [id]=\"id\"\n             [step]=\"step ?? null\"\n             [class.is-invalid]=\"isInvalid\"\n             [class.is-valid]=\"isValid\"\n             [formControl]=\"control\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"isReadonly\"\n             [attr.aria-describedby]=\"id + '-description'\"\n             (blur)=\"markAsTouched()\" />\n\n      <button type=\"button\" class=\"input-number-add\" (click)=\"incrementNumber()\">\n        <span class=\"visually-hidden\">{{'it.form.increase-value'}}</span>\n      </button>\n      <button type=\"button\" class=\"input-number-sub\" (click)=\"incrementNumber(true)\">\n        <span class=\"visually-hidden\">{{'it.form.decrease-value'}}</span>\n      </button>\n    </span>\n\n    <input *ngIf=\"type !== 'number'\"\n           [id]=\"id\"\n           [type]=\"type\"\n           [class.form-control]=\"readonly !== 'plaintext'\"\n           [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n           [class.is-invalid]=\"isInvalid\"\n           [class.is-valid]=\"isValid\"\n           [formControl]=\"control\"\n           [placeholder]=\"placeholder\"\n           [readonly]=\"isReadonly\"\n           [attr.aria-describedby]=\"id + '-description'\"\n           (blur)=\"markAsTouched()\">\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  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError>\n      <ng-content select=\"[error]\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group .input-number button.input-number-add{top:0}.form-group .input-number button.input-number-sub{bottom:0}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}\n"] }]
+            args: [{ selector: 'it-input[id]', template: "<div class=\"form-group\">\n  <div class=\"input-group\">\n    <div class=\"input-group-prepend\" [class.d-none]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n      <div #prepend>\n        <ng-content select=\"[prepend]\"></ng-content>\n      </div>\n      <div class=\"input-group-text\" #prependText>\n        <ng-content select=\"[prependText]\"></ng-content>\n      </div>\n    </div>\n\n    <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"isActiveLabel\"\n           [class.empty-prepend-label]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n      {{label}}\n    </label>\n\n    <span *ngIf=\"type === 'number'\"\n          class=\"input-number\"\n          [class.input-number-currency]=\"currency\"\n          [class.input-number-percentage]=\"percentage\"\n          [class.input-number-adaptive]=\"adaptive\">\n\n      <input type=\"number\"\n             [id]=\"id\"\n             [step]=\"step ?? null\"\n             [class.is-invalid]=\"isInvalid\"\n             [class.is-valid]=\"isValid\"\n             [formControl]=\"control\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"isReadonly\"\n             [attr.aria-describedby]=\"id + '-description'\"\n             (blur)=\"markAsTouched()\" />\n\n      <button type=\"button\" class=\"input-number-add\" (click)=\"incrementNumber()\">\n        <span class=\"visually-hidden\">{{'it.form.increase-value'}}</span>\n      </button>\n      <button type=\"button\" class=\"input-number-sub\" (click)=\"incrementNumber(true)\">\n        <span class=\"visually-hidden\">{{'it.form.decrease-value'}}</span>\n      </button>\n    </span>\n\n    <input *ngIf=\"type !== 'number'\"\n           [id]=\"id\"\n           [type]=\"type\"\n           [class.form-control]=\"readonly !== 'plaintext'\"\n           [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n           [class.is-invalid]=\"isInvalid\"\n           [class.is-valid]=\"isValid\"\n           [formControl]=\"control\"\n           [placeholder]=\"placeholder\"\n           [readonly]=\"isReadonly\"\n           (keydown)=\"onKeyDown()\"\n           [attr.aria-describedby]=\"id + '-description'\"\n           (blur)=\"markAsTouched()\">\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  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n\n\n\n\n  <!-- INIZIO gestione AUTOCOMPLETAMENTO -->\n\n\n  <!-- Icona lente per autocompletamento -->\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\" *ngIf=\"isAutocompletable()\">\n    <it-icon name = \"search\" size=\"sm\"></it-icon>\n  </span>\n\n  <ng-container *ngIf=\"autocompleteResults$ | async as autocomplete\">\n    <!-- Lista di autocompletamento -->\n    <ul class=\"autocomplete-list\" *ngIf=\"isAutocompletable()\"  [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      <li *ngFor=\"let entry of autocomplete.relatedEntries; trackBy: autocompleteItemTrackByValueFn\" (click)=\"onEntryClick(entry, $event)\">\n        <a [href]=\"entry.link\" >\n          <ng-container *ngTemplateOutlet=\"autocompleteItemTemplate\"></ng-container>\n        </a>\n        <ng-template #autocompleteItemTemplate>\n          <div class=\"avatar size-sm\" *ngIf=\"entry.avatarSrcPath\">\n            <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\">\n          </div>\n          <it-icon *ngIf=\"entry.icon\" [name]=\"entry.icon\" size=\"sm\"></it-icon>\n          <span class=\"autocomplete-list-text\">\n            <span [innerHTML] = \"entry.original | markMatchingText: autocomplete.searchedValue\"></span>\n            <em *ngIf=\"entry.label\">{{entry.label}}</em>\n          </span>\n        </ng-template>\n      </li>\n    </ul>\n  </ng-container>\n  \n\n  <!-- FINE gestione AUTOCOMPLETAMENTO -->\n\n\n\n\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError>\n      <ng-content select=\"[error]\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group .input-number button.input-number-add{top:0}.form-group .input-number button.input-number-sub{bottom:0}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
@@ -2037,6 +2161,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], adaptive: [{
                 type: Input
+            }], autoCompleteData: [{
+                type: Input
             }] } });
 
 class PasswordInputComponent extends AbstractFormComponent {
@@ -2117,7 +2243,7 @@ class PasswordInputComponent extends AbstractFormComponent {
     }
 }
 PasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PasswordInputComponent, selector: "it-password-input[id]", inputs: { minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: "showStrengthMeter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n\n  <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n\n  <input type=\"password\"\n         [id]=\"id\"\n         class=\"form-control input-password\"\n         [class.input-password-strength-meter]=\"isStrengthMeter\"\n         [class.is-invalid]=\"isInvalid\"\n         [class.is-valid]=\"isValid\"\n         [formControl]=\"control\"\n         [placeholder]=\"placeholder\"\n         [attr.aria-describedby]=\"id + '-description'\" #input>\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  <small *ngIf=\"description && !isStrengthMeter\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+PasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PasswordInputComponent, selector: "it-password-input[id]", inputs: { minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: "showStrengthMeter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n\n  <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n\n  <input type=\"password\"\n         [id]=\"id\"\n         class=\"form-control input-password\"\n         [class.input-password-strength-meter]=\"isStrengthMeter\"\n         [class.is-invalid]=\"isInvalid\"\n         [class.is-valid]=\"isValid\"\n         [formControl]=\"control\"\n         [placeholder]=\"placeholder\"\n         [attr.aria-describedby]=\"id + '-description'\" #input>\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  <small *ngIf=\"description && !isStrengthMeter\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-password-input[id]', template: "<div class=\"form-group\">\n\n  <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n\n  <input type=\"password\"\n         [id]=\"id\"\n         class=\"form-control input-password\"\n         [class.input-password-strength-meter]=\"isStrengthMeter\"\n         [class.is-invalid]=\"isInvalid\"\n         [class.is-valid]=\"isValid\"\n         [formControl]=\"control\"\n         [placeholder]=\"placeholder\"\n         [attr.aria-describedby]=\"id + '-description'\" #input>\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  <small *ngIf=\"description && !isStrengthMeter\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}\n"] }]
@@ -2175,7 +2301,7 @@ class RadioButtonComponent extends AbstractFormComponent {
     }
 }
 RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RadioButtonComponent, selector: "it-radio-button[id][label][value]", inputs: { value: "value", inline: "inline", group: "group", checked: "checked" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\"\n       [class.form-check-group]=\"isGroup\"\n       [class.form-check-inline]=\"isInline\">\n\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      class=\"form-check-input\"\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\">{{label}}</label>\n\n    <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n      <ng-content></ng-content>\n    </small>\n\n    <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n    </div>\n\n  </div>\n\n  <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RadioButtonComponent, selector: "it-radio-button[id][label][value]", inputs: { value: "value", inline: "inline", group: "group", checked: "checked" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\"\n       [class.form-check-group]=\"isGroup\"\n       [class.form-check-inline]=\"isInline\">\n\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      class=\"form-check-input\"\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\">{{label}}</label>\n\n    <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n      <ng-content></ng-content>\n    </small>\n\n    <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n    </div>\n\n  </div>\n\n  <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-radio-button[id][label][value]', template: "<ng-container>\n  <div class=\"form-check\"\n       [class.form-check-group]=\"isGroup\"\n       [class.form-check-inline]=\"isInline\">\n\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      class=\"form-check-input\"\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\">{{label}}</label>\n\n    <small *ngIf=\"isGroup\" [id]=\"id + '-help'\" class=\"form-text\">\n      <ng-content></ng-content>\n    </small>\n\n    <div *ngIf=\"isInvalid && isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n    </div>\n\n  </div>\n\n  <div *ngIf=\"isInvalid && !isGroup\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</ng-container>\n" }]
@@ -2234,7 +2360,7 @@ class SelectComponent extends AbstractFormComponent {
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectComponent, selector: "it-select[id][options]", inputs: { options: "options", groups: "groups", description: "description" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n  <label [for]=\"id\">{{label}}</label>\n  <select [id]=\"id\" [formControl]=\"control\" [attr.aria-describedby]=\"id + '-description'\">\n    <option *ngFor=\"let option of options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n      {{option.text ?? option.value}}\n    </option>\n\n    <ng-container *ngIf=\"groups\">\n      <optgroup *ngFor=\"let group of groups\" [label]=\"group.label\">\n        <option *ngFor=\"let option of group.options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n          {{option.text ?? option.value}}\n        </option>\n      </optgroup>\n    </ng-container>\n  </select>\n  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectComponent, selector: "it-select[id][options]", inputs: { options: "options", groups: "groups", description: "description" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n  <label [for]=\"id\">{{label}}</label>\n  <select [id]=\"id\" [formControl]=\"control\" [attr.aria-describedby]=\"id + '-description'\">\n    <option *ngFor=\"let option of options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n      {{option.text ?? option.value}}\n    </option>\n\n    <ng-container *ngIf=\"groups\">\n      <optgroup *ngFor=\"let group of groups\" [label]=\"group.label\">\n        <option *ngFor=\"let option of group.options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n          {{option.text ?? option.value}}\n        </option>\n      </optgroup>\n    </ng-container>\n  </select>\n  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-select[id][options]', template: "<div class=\"select-wrapper\">\n  <label [for]=\"id\">{{label}}</label>\n  <select [id]=\"id\" [formControl]=\"control\" [attr.aria-describedby]=\"id + '-description'\">\n    <option *ngFor=\"let option of options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n      {{option.text ?? option.value}}\n    </option>\n\n    <ng-container *ngIf=\"groups\">\n      <optgroup *ngFor=\"let group of groups\" [label]=\"group.label\">\n        <option *ngFor=\"let option of group.options\" [disabled]=\"optionIsDisabled(option)\" [value]=\"option.value\">\n          {{option.text ?? option.value}}\n        </option>\n      </optgroup>\n    </ng-container>\n  </select>\n  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
@@ -2275,7 +2401,7 @@ class TextareaComponent extends AbstractFormComponent {
     }
 }
 TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TextareaComponent, selector: "it-textarea[id]", inputs: { rows: "rows", placeholder: "placeholder", description: "description" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: ["textarea.is-invalid{border-color:#d9364f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TextareaComponent, selector: "it-textarea[id]", inputs: { rows: "rows", placeholder: "placeholder", description: "description" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: ["textarea.is-invalid{border-color:#d9364f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-textarea[id]', template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{label}}</label>\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  <small *ngIf=\"description\" [id]=\"id + '-description'\" class=\"form-text\">{{description}}</small>\n  <div *ngIf=\"isInvalid\" class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n    <div #customError><ng-content select=\"[error]\"></ng-content></div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</div>\n", styles: ["textarea.is-invalid{border-color:#d9364f}\n"] }]
@@ -2417,7 +2543,7 @@ class UploadDragDropComponent extends AbstractComponent {
         if (this.accept !== '*' && !this.accept.includes(file.type)) {
             return;
         }
-        this.donut?.set(0);
+        this.reset();
         this.isLoading = true;
         const splitName = file.name.split('.');
         this.filename = splitName[0];
@@ -2427,9 +2553,12 @@ class UploadDragDropComponent extends AbstractComponent {
     }
     /**
      * Percentage of upload
-     * @param value the percentage
+     * @param value the percentage [0 - 100]
      */
     progress(value) {
+        if (!this.isLoading) {
+            return;
+        }
         if (value >= 100) {
             this.success();
         }
@@ -2455,7 +2584,7 @@ class UploadDragDropComponent extends AbstractComponent {
     }
 }
 UploadDragDropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadDragDropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UploadDragDropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UploadDragDropComponent, selector: "it-upload-drag-drop[id]", 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 src=\"/bootstrap-italia/dist/assets/upload-drag-drop-icon.svg\" alt=\"drag-drop-icon\" aria-hidden=\"true\">\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    <p *ngIf=\"isLoading\">{{'it.form.upload-loading'|translate}}</p>\n    <p *ngIf=\"isSuccess\">{{'it.form.upload-complete'|translate}}</p>\n    <p *ngIf=\"!isLoading && !isSuccess\">{{'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  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+UploadDragDropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UploadDragDropComponent, selector: "it-upload-drag-drop[id]", 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 src=\"/bootstrap-italia/dist/assets/upload-drag-drop-icon.svg\" alt=\"drag-drop-icon\" aria-hidden=\"true\">\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    <p *ngIf=\"isLoading\">{{'it.form.upload-loading'|translate}}</p>\n    <p *ngIf=\"isSuccess\">{{'it.form.upload-complete'|translate}}</p>\n    <p *ngIf=\"!isLoading && !isSuccess\">{{'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  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadDragDropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-upload-drag-drop[id]', exportAs: 'itUploadDragDrop', template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img src=\"/bootstrap-italia/dist/assets/upload-drag-drop-icon.svg\" alt=\"drag-drop-icon\" aria-hidden=\"true\">\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    <p *ngIf=\"isLoading\">{{'it.form.upload-loading'|translate}}</p>\n    <p *ngIf=\"isSuccess\">{{'it.form.upload-complete'|translate}}</p>\n    <p *ngIf=\"!isLoading && !isSuccess\">{{'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  </div>\n</div>\n" }]
@@ -2481,7 +2610,9 @@ class UploadFileListComponent extends AbstractComponent {
     constructor() {
         super(...arguments);
         /**
-         * The accepted file type to upload
+         * The accepted file type to upload <br>
+         * Possible values: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">MIME Types</a> separated by comma
+         * @example application/pdf,image/png
          * @default *
          */
         this.accept = "*";
@@ -2545,10 +2676,10 @@ class UploadFileListComponent extends AbstractComponent {
     }
 }
 UploadFileListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UploadFileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UploadFileListComponent, selector: "it-upload-file-list[id][fileList]", inputs: { fileList: "fileList", accept: "accept", multiple: "multiple", images: "images", hideLoadButton: "hideLoadButton" }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isHideLoadButton\">\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"isMultipleInput\"\n         (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</ng-container>\n\n<ul class=\"upload-file-list\" [class.upload-file-list-image]=\"isImageList\" *ngIf=\"fileList.length\">\n  <li *ngFor=\"let item of fileList\" 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\n    <div class=\"upload-image\" *ngIf=\"isImageList; else icon\">\n      <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n    </div>\n    <ng-template #icon>\n      <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? 'primary' : 'danger'\"></it-icon>\n    </ng-template>\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\n    <button *ngIf=\"item.removable && (!item.progress || item.progress < 100)\" (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    <button disabled *ngIf=\"(!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)\">\n      <span class=\"visually-hidden\">{{'it.form.upload-complete'|translate}}</span>\n      <it-icon name=\"check\"></it-icon>\n    </button>\n\n    <it-progress-bar *ngIf=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n                      [value]=\"item.progress\"></it-progress-bar>\n  </li>\n</ul>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "directive", type: TooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["onShow", "onShown", "onHide", "onHidden", "onInserted"], exportAs: ["itTooltip"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+UploadFileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UploadFileListComponent, selector: "it-upload-file-list[id][fileList]", inputs: { fileList: "fileList", accept: "accept", multiple: "multiple", images: "images", hideLoadButton: "hideLoadButton" }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isHideLoadButton\">\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"isMultipleInput\"\n         (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</ng-container>\n\n<ul class=\"upload-file-list\" [class.upload-file-list-image]=\"isImageList\" *ngIf=\"fileList.length\">\n  <li *ngFor=\"let item of fileList\" 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\n    <div class=\"upload-image\" *ngIf=\"isImageList; else icon\">\n      <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n    </div>\n    <ng-template #icon>\n      <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n    </ng-template>\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\n    <button *ngIf=\"item.removable && (!item.progress || item.progress < 100)\" 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    <button *ngIf=\"(!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)\" 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    <it-progress-bar *ngIf=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n                      [value]=\"item.progress\"></it-progress-bar>\n  </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "directive", type: TooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["onShow", "onShown", "onHide", "onHidden", "onInserted"], exportAs: ["itTooltip"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UploadFileListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-upload-file-list[id][fileList]', template: "<ng-container *ngIf=\"!isHideLoadButton\">\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"isMultipleInput\"\n         (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</ng-container>\n\n<ul class=\"upload-file-list\" [class.upload-file-list-image]=\"isImageList\" *ngIf=\"fileList.length\">\n  <li *ngFor=\"let item of fileList\" 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\n    <div class=\"upload-image\" *ngIf=\"isImageList; else icon\">\n      <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n    </div>\n    <ng-template #icon>\n      <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? 'primary' : 'danger'\"></it-icon>\n    </ng-template>\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\n    <button *ngIf=\"item.removable && (!item.progress || item.progress < 100)\" (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    <button disabled *ngIf=\"(!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)\">\n      <span class=\"visually-hidden\">{{'it.form.upload-complete'|translate}}</span>\n      <it-icon name=\"check\"></it-icon>\n    </button>\n\n    <it-progress-bar *ngIf=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n                      [value]=\"item.progress\"></it-progress-bar>\n  </li>\n</ul>\n" }]
+            args: [{ selector: 'it-upload-file-list[id][fileList]', template: "<ng-container *ngIf=\"!isHideLoadButton\">\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"isMultipleInput\"\n         (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</ng-container>\n\n<ul class=\"upload-file-list\" [class.upload-file-list-image]=\"isImageList\" *ngIf=\"fileList.length\">\n  <li *ngFor=\"let item of fileList\" 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\n    <div class=\"upload-image\" *ngIf=\"isImageList; else icon\">\n      <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n    </div>\n    <ng-template #icon>\n      <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n    </ng-template>\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\n    <button *ngIf=\"item.removable && (!item.progress || item.progress < 100)\" 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    <button *ngIf=\"(!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)\" 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    <it-progress-bar *ngIf=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n                      [value]=\"item.progress\"></it-progress-bar>\n  </li>\n</ul>\n" }]
         }], propDecorators: { fileList: [{
                 type: Input
             }], accept: [{
@@ -2609,12 +2740,12 @@ class BackButtonComponent {
         this._location.back();
     }
 }
-BackButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BackButtonComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
-BackButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BackButtonComponent, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: "showIcon", showText: "showText", backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "<a *ngIf=\"buttonStyle === 'link'\" class=\"go-back\" data-bs-toggle=\"historyback\" (click)=\"goBack()\" [routerLink]=\"null\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<button *ngIf=\"buttonStyle === 'button'\"\n        itButton=\"primary\"\n        class=\"go-back\"\n        data-bs-toggle=\"historyback\"\n        (click)=\"goBack()\">\n\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n\n<ng-template #content>\n  <it-icon *ngIf=\"isShowIcon\"\n           size=\"sm\"\n           [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n           [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n           [class.me-2]=\"isShowText\"></it-icon>\n\n  <span [class.visually-hidden]=\"!isShowText\">\n    {{(direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate}}\n  </span>\n</ng-template>\n", styles: ["a.go-back{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+BackButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BackButtonComponent, deps: [{ token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component });
+BackButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BackButtonComponent, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: "showIcon", showText: "showText", backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "<a *ngIf=\"buttonStyle === 'link'\" class=\"go-back\" data-bs-toggle=\"historyback\" (click)=\"goBack()\" [routerLink]=\"null\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<button *ngIf=\"buttonStyle === 'button'\"\n        itButton=\"primary\"\n        class=\"go-back\"\n        data-bs-toggle=\"historyback\"\n        (click)=\"goBack()\">\n\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n\n<ng-template #content>\n  <it-icon *ngIf=\"isShowIcon\"\n           size=\"sm\"\n           [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n           [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n           [class.me-2]=\"isShowText\"></it-icon>\n\n  <span [class.visually-hidden]=\"!isShowText\">\n    {{(direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate}}\n  </span>\n</ng-template>\n", styles: ["a.go-back{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BackButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-back-button', exportAs: 'itBackButton', template: "<a *ngIf=\"buttonStyle === 'link'\" class=\"go-back\" data-bs-toggle=\"historyback\" (click)=\"goBack()\" [routerLink]=\"null\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<button *ngIf=\"buttonStyle === 'button'\"\n        itButton=\"primary\"\n        class=\"go-back\"\n        data-bs-toggle=\"historyback\"\n        (click)=\"goBack()\">\n\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n\n<ng-template #content>\n  <it-icon *ngIf=\"isShowIcon\"\n           size=\"sm\"\n           [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n           [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n           [class.me-2]=\"isShowText\"></it-icon>\n\n  <span [class.visually-hidden]=\"!isShowText\">\n    {{(direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate}}\n  </span>\n</ng-template>\n", styles: ["a.go-back{cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { buttonStyle: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Location }]; }, propDecorators: { buttonStyle: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -2703,7 +2834,7 @@ class BreadcrumbComponent {
     }
 }
 BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BreadcrumbComponent, selector: "it-breadcrumb", inputs: { separator: "separator", dark: "dark" }, queries: [{ propertyName: "items", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path'|translate\">\n  <ol class=\"breadcrumb\" [class.dark]=\"isDark\" [class.px-3]=\"isDark\">\n    <li *ngFor=\"let item of items; let i = index\"\n        class=\"breadcrumb-item\"\n        [class.active]=\"item.isActive\"\n        [attr.aria-current]=\"item.isActive ? 'page' : null\">\n\n      <it-icon *ngIf=\"item.iconName\"\n                [name]=\"item.iconName\"\n                [color]=\"isDark ? 'white' : 'secondary'\"\n                size=\"sm\"\n                class=\"align-top me-1\"></it-icon>\n\n      <it-link *ngIf=\"!item.isActive && !isLastItem(i); else activeContent\"\n                [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n      </it-link>\n\n      <ng-template #activeContent>\n        <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n      </ng-template>\n\n      <span *ngIf=\"!isLastItem(i)\" class=\"separator\">{{separator}}</span>\n    </li>\n  </ol>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BreadcrumbComponent, selector: "it-breadcrumb", inputs: { separator: "separator", dark: "dark" }, queries: [{ propertyName: "items", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path'|translate\">\n  <ol class=\"breadcrumb\" [class.dark]=\"isDark\" [class.px-3]=\"isDark\">\n    <li *ngFor=\"let item of items; let i = index\"\n        class=\"breadcrumb-item\"\n        [class.active]=\"item.isActive\"\n        [attr.aria-current]=\"item.isActive ? 'page' : null\">\n\n      <it-icon *ngIf=\"item.iconName\"\n                [name]=\"item.iconName\"\n                [color]=\"isDark ? 'white' : 'secondary'\"\n                size=\"sm\"\n                class=\"align-top me-1\"></it-icon>\n\n      <it-link *ngIf=\"!item.isActive && !isLastItem(i); else activeContent\"\n                [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n      </it-link>\n\n      <ng-template #activeContent>\n        <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n      </ng-template>\n\n      <span *ngIf=\"!isLastItem(i)\" class=\"separator\">{{separator}}</span>\n    </li>\n  </ol>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-breadcrumb', template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path'|translate\">\n  <ol class=\"breadcrumb\" [class.dark]=\"isDark\" [class.px-3]=\"isDark\">\n    <li *ngFor=\"let item of items; let i = index\"\n        class=\"breadcrumb-item\"\n        [class.active]=\"item.isActive\"\n        [attr.aria-current]=\"item.isActive ? 'page' : null\">\n\n      <it-icon *ngIf=\"item.iconName\"\n                [name]=\"item.iconName\"\n                [color]=\"isDark ? 'white' : 'secondary'\"\n                size=\"sm\"\n                class=\"align-top me-1\"></it-icon>\n\n      <it-link *ngIf=\"!item.isActive && !isLastItem(i); else activeContent\"\n                [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n      </it-link>\n\n      <ng-template #activeContent>\n        <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n      </ng-template>\n\n      <span *ngIf=\"!isLastItem(i)\" class=\"separator\">{{separator}}</span>\n    </li>\n  </ol>\n</nav>\n" }]
@@ -2747,7 +2878,7 @@ class HeaderComponent extends AbstractComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "it-header", inputs: { light: "light", showSlim: "showSlim", slimTitle: "slimTitle", loginStyle: "loginStyle", smallHeader: "smallHeader", showSearch: "showSearch" }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, usesInheritance: true, ngImport: i0, template: "<header class=\"it-header-wrapper\">\n  <div *ngIf=\"isShowSlim\" class=\"it-header-slim-wrapper\" [class.theme-light]=\"isLight\">\n    <div class=\"container\">\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=\"#\">{{slimTitle}}</a>\n            <div class=\"nav-mobile\">\n              <nav [attr.aria-label]=\"'it.navigation.secondary-navigation'|translate\">\n                <a class=\"it-opener d-lg-none\" data-bs-toggle=\"collapse\" href=\"#menuC1\" role=\"button\"\n                   aria-expanded=\"false\" 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              <!-- TODO: add language dropdown -->\n              <ng-content select=\"[slimRightZone]\"></ng-content>\n              <div *ngIf=\"loginStyle === 'default'\" class=\"it-access-top-wrapper\">\n                <a class=\"btn btn-primary btn-sm\" (click)=\"loginClick.emit($event)\">\n                  {{'it.navigation.login'|translate}}\n                </a>\n              </div>\n            </div>\n            <button *ngIf=\"loginStyle === 'full'\" itButton=\"primary\" class=\"btn-full\" (click)=\"loginClick.emit($event)\">\n              <span class=\"rounded-icon\">\n                <it-icon name=\"user\" color=\"primary\"></it-icon>\n                <span class=\"d-none d-lg-block\">{{'it.navigation.full-login'|translate}}</span>\n              </span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"isSmallHeader\">\n      <div class=\"container-fluid\">\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                <div class=\"it-search-wrapper\" *ngIf=\"isShowSearch\">\n                  <span class=\"d-none d-md-block\">{{'it.navigation.search'|translate}}</span>\n                  <a class=\"search-link rounded-icon\" [attr.aria-label]=\"'it.navigation.website-search'|translate\" (click)=\"searchClick.emit($event)\">\n                    <it-icon name=\"search\"></it-icon>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- TODO: complete header -->\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "it-header", inputs: { light: "light", showSlim: "showSlim", slimTitle: "slimTitle", loginStyle: "loginStyle", smallHeader: "smallHeader", showSearch: "showSearch" }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, usesInheritance: true, ngImport: i0, template: "<header class=\"it-header-wrapper\">\n  <div *ngIf=\"isShowSlim\" class=\"it-header-slim-wrapper\" [class.theme-light]=\"isLight\">\n    <div class=\"container\">\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=\"#\">{{slimTitle}}</a>\n            <div class=\"nav-mobile\">\n              <nav [attr.aria-label]=\"'it.navigation.secondary-navigation'|translate\">\n                <a class=\"it-opener d-lg-none\" data-bs-toggle=\"collapse\" href=\"#menuC1\" role=\"button\"\n                   aria-expanded=\"false\" 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              <!-- TODO: add language dropdown -->\n              <ng-content select=\"[slimRightZone]\"></ng-content>\n              <div *ngIf=\"loginStyle === 'default'\" class=\"it-access-top-wrapper\">\n                <a class=\"btn btn-primary btn-sm\" (click)=\"loginClick.emit($event)\">\n                  {{'it.navigation.login'|translate}}\n                </a>\n              </div>\n            </div>\n            <button *ngIf=\"loginStyle === 'full'\" itButton=\"primary\" class=\"btn-full\" (click)=\"loginClick.emit($event)\">\n              <span class=\"rounded-icon\">\n                <it-icon name=\"user\" color=\"primary\"></it-icon>\n                <span class=\"d-none d-lg-block\">{{'it.navigation.full-login'|translate}}</span>\n              </span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"isSmallHeader\">\n      <div class=\"container-fluid\">\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                <div class=\"it-search-wrapper\" *ngIf=\"isShowSearch\">\n                  <span class=\"d-none d-md-block\">{{'it.navigation.search'|translate}}</span>\n                  <a class=\"search-link rounded-icon\" [attr.aria-label]=\"'it.navigation.website-search'|translate\" (click)=\"searchClick.emit($event)\">\n                    <it-icon name=\"search\"></it-icon>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- TODO: complete header -->\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-header', template: "<header class=\"it-header-wrapper\">\n  <div *ngIf=\"isShowSlim\" class=\"it-header-slim-wrapper\" [class.theme-light]=\"isLight\">\n    <div class=\"container\">\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=\"#\">{{slimTitle}}</a>\n            <div class=\"nav-mobile\">\n              <nav [attr.aria-label]=\"'it.navigation.secondary-navigation'|translate\">\n                <a class=\"it-opener d-lg-none\" data-bs-toggle=\"collapse\" href=\"#menuC1\" role=\"button\"\n                   aria-expanded=\"false\" 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              <!-- TODO: add language dropdown -->\n              <ng-content select=\"[slimRightZone]\"></ng-content>\n              <div *ngIf=\"loginStyle === 'default'\" class=\"it-access-top-wrapper\">\n                <a class=\"btn btn-primary btn-sm\" (click)=\"loginClick.emit($event)\">\n                  {{'it.navigation.login'|translate}}\n                </a>\n              </div>\n            </div>\n            <button *ngIf=\"loginStyle === 'full'\" itButton=\"primary\" class=\"btn-full\" (click)=\"loginClick.emit($event)\">\n              <span class=\"rounded-icon\">\n                <it-icon name=\"user\" color=\"primary\"></it-icon>\n                <span class=\"d-none d-lg-block\">{{'it.navigation.full-login'|translate}}</span>\n              </span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"isSmallHeader\">\n      <div class=\"container-fluid\">\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                <div class=\"it-search-wrapper\" *ngIf=\"isShowSearch\">\n                  <span class=\"d-none d-md-block\">{{'it.navigation.search'|translate}}</span>\n                  <a class=\"search-link rounded-icon\" [attr.aria-label]=\"'it.navigation.website-search'|translate\" (click)=\"searchClick.emit($event)\">\n                    <it-icon name=\"search\"></it-icon>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- TODO: complete header -->\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
@@ -2769,10 +2900,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }] } });
 
+class LanguageSwitcherComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.currentLang$ = translateService.onLangChange.pipe(map(event => this.availableLanguages?.find(l => l.code === event.lang)));
+    }
+    ngOnInit() {
+        if (!this.availableLanguages) {
+            this.availableLanguages = this.translateService.getLangs().map(lang => ({
+                code: lang,
+                label: lang,
+                ...(lang === 'it' && { label: 'ITA' }),
+                ...(lang === 'en' && { label: 'ENG' })
+            }));
+        }
+    }
+    /**
+     * Change the current language
+     * @param lang the language code
+     */
+    changeLanguage(lang) {
+        this.translateService.use(lang);
+    }
+}
+LanguageSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+LanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LanguageSwitcherComponent, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages" }, ngImport: i0, template: "<it-dropdown id=\"language-switcher\">\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  <ng-container list>\n    <it-dropdown-item *ngFor=\"let lang of availableLanguages\" (click)=\"changeLanguage(lang.code)\"\n                      [active]=\"lang.code === (currentLang$ | async)?.code\">\n      {{lang.label}}\n      <span class=\"visually-hidden\" *ngIf=\"lang.code === (currentLang$ | async)?.code\">\n        {{'it.utils.selected' | translate}}\n      </span>\n    </it-dropdown-item>\n  </ng-container>\n</it-dropdown>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "it-dropdown[id]", inputs: ["color", "direction", "fullWidth", "dark"] }, { kind: "component", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'it-language-switcher', template: "<it-dropdown id=\"language-switcher\">\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  <ng-container list>\n    <it-dropdown-item *ngFor=\"let lang of availableLanguages\" (click)=\"changeLanguage(lang.code)\"\n                      [active]=\"lang.code === (currentLang$ | async)?.code\">\n      {{lang.label}}\n      <span class=\"visually-hidden\" *ngIf=\"lang.code === (currentLang$ | async)?.code\">\n        {{'it.utils.selected' | translate}}\n      </span>\n    </it-dropdown-item>\n  </ng-container>\n</it-dropdown>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { availableLanguages: [{
+                type: Input
+            }] } });
+
 class NotFoundPageComponent {
 }
 NotFoundPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotFoundPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotFoundPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotFoundPageComponent, selector: "it-not-found-page", ngImport: i0, template: "<div class=\"error-template text-center mt-5\">\n  <h1>404</h1>\n  <h2>{{'it.utils.404.title' | translate}}</h2>\n  <p>{{'it.utils.404.description' | translate}}</p>\n\n  <div class=\"mt-3\">\n    <it-back-button></it-back-button>\n    <a class=\"btn btn-primary ms-3\" href=\"/\" title=\"{{'it.utils.404.go-to-homepage' | translate}}\">\n      {{'it.utils.404.go-to-homepage' | translate}}\n    </a>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+NotFoundPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotFoundPageComponent, selector: "it-not-found-page", ngImport: i0, template: "<div class=\"error-template text-center mt-5\">\n  <h1>404</h1>\n  <h2>{{'it.utils.404.title' | translate}}</h2>\n  <p>{{'it.utils.404.description' | translate}}</p>\n\n  <div class=\"mt-3\">\n    <it-back-button></it-back-button>\n    <a class=\"btn btn-primary ms-3\" href=\"/\" title=\"{{'it.utils.404.go-to-homepage' | translate}}\">\n      {{'it.utils.404.go-to-homepage' | translate}}\n    </a>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotFoundPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-not-found-page', template: "<div class=\"error-template text-center mt-5\">\n  <h1>404</h1>\n  <h2>{{'it.utils.404.title' | translate}}</h2>\n  <p>{{'it.utils.404.description' | translate}}</p>\n\n  <div class=\"mt-3\">\n    <it-back-button></it-back-button>\n    <a class=\"btn btn-primary ms-3\" href=\"/\" title=\"{{'it.utils.404.go-to-homepage' | translate}}\">\n      {{'it.utils.404.go-to-homepage' | translate}}\n    </a>\n  </div>\n\n</div>\n" }]
@@ -2839,7 +3002,7 @@ class ChipComponent {
     }
 }
 ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChipComponent, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"chip\" [ngClass]=\"[!showCloseButton ? 'chip-simple': 'alert', size === 'lg' ? 'chip-lg': '', color ? 'chip-' + color : '', disabled ? 'chip-disabled' : '']\">\n    <svg *ngIf=\"icon\" class=\"icon icon-xs\"><use [attr.href]=\"'/bootstrap-italia/dist/svg/sprites.svg#it-' + icon\" [attr.xlink:href]=\"'/bootstrap-italia/dist/svg/sprites.svg#it-' + icon\"></use></svg>\n    <div *ngIf=\"avatar\" class=\"avatar size-xs\">\n        <img [src]=\"avatar\" [alt]=\"altAvatar\">\n    </div>\n    <span class=\"chip-label\">{{ label }}</span>\n    <button *ngIf=\"showCloseButton\" (click)=\"clickToClose()\" [disabled]=\"disabled\">\n        <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-close\" xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-close\"></use></svg>\n        <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChipComponent, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"chip\" [ngClass]=\"[!showCloseButton ? 'chip-simple': 'alert', size === 'lg' ? 'chip-lg': '', color ? 'chip-' + color : '', disabled ? 'chip-disabled' : '']\">\n    <svg *ngIf=\"icon\" class=\"icon icon-xs\"><use [attr.href]=\"'/bootstrap-italia/dist/svg/sprites.svg#it-' + icon\" [attr.xlink:href]=\"'/bootstrap-italia/dist/svg/sprites.svg#it-' + icon\"></use></svg>\n    <div *ngIf=\"avatar\" class=\"avatar size-xs\">\n        <img [src]=\"avatar\" [alt]=\"altAvatar\">\n    </div>\n    <span class=\"chip-label\">{{ label }}</span>\n    <button *ngIf=\"showCloseButton\" (click)=\"clickToClose()\" [disabled]=\"disabled\">\n        <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-close\" xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-close\"></use></svg>\n        <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chip\" [ngClass]=\"[!showCloseButton ? 'chip-simple': 'alert', size === 'lg' ? 'chip-lg': '', color ? 'chip-' + color : '', disabled ? 'chip-disabled' : '']\">\n    <svg *ngIf=\"icon\" class=\"icon icon-xs\"><use [attr.href]=\"'/bootstrap-italia/dist/svg/sprites.svg#it-' + icon\" [attr.xlink:href]=\"'/bootstrap-italia/dist/svg/sprites.svg#it-' + icon\"></use></svg>\n    <div *ngIf=\"avatar\" class=\"avatar size-xs\">\n        <img [src]=\"avatar\" [alt]=\"altAvatar\">\n    </div>\n    <span class=\"chip-label\">{{ label }}</span>\n    <button *ngIf=\"showCloseButton\" (click)=\"clickToClose()\" [disabled]=\"disabled\">\n        <svg class=\"icon\"><use href=\"/bootstrap-italia/dist/svg/sprites.svg#it-close\" xlink:href=\"/bootstrap-italia/dist/svg/sprites.svg#it-close\"></use></svg>\n        <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n</div>" }]
@@ -2936,7 +3099,7 @@ class DimmerComponent {
     }
 }
 DimmerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DimmerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DimmerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DimmerComponent, selector: "it-dimmer", inputs: { active: "active", color: "color" }, ngImport: i0, template: "<div class=\"dimmer\" *ngIf=\"active\" @fade [ngClass]=\"[color]\">\n  <div class=\"dimmer-inner\">\n    <ng-content></ng-content>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+DimmerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DimmerComponent, selector: "it-dimmer", inputs: { active: "active", color: "color" }, ngImport: i0, template: "<div class=\"dimmer\" *ngIf=\"active\" @fade [ngClass]=\"[color]\">\n  <div class=\"dimmer-inner\">\n    <ng-content></ng-content>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         trigger('fade', [
             transition(':enter', [
                 style({ opacity: 0 }),
@@ -2979,7 +3142,7 @@ class DimmerButtonsComponent {
     get hasOneButton() { return this._hasOneButton; }
 }
 DimmerButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DimmerButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DimmerButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DimmerButtonsComponent, 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>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DimmerButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DimmerButtonsComponent, 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>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DimmerButtonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-dimmer-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{'single-button': hasOneButton}\">\n    <ng-content></ng-content>\n</div>" }]
@@ -3059,7 +3222,9 @@ const navigation = [
  */
 const utils = [
     IconComponent,
-    NotFoundPageComponent
+    NotFoundPageComponent,
+    LanguageSwitcherComponent,
+    MarkMatchingTextPipe
 ];
 class ComponentsModule {
 }
@@ -3106,7 +3271,9 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         BreadcrumbComponent,
         BreadcrumbItemComponent,
         HeaderComponent, IconComponent,
-        NotFoundPageComponent], imports: [CommonModule,
+        NotFoundPageComponent,
+        LanguageSwitcherComponent,
+        MarkMatchingTextPipe], imports: [CommonModule,
         TranslateModule,
         ReactiveFormsModule,
         NgIf,
@@ -3152,7 +3319,9 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         BreadcrumbComponent,
         BreadcrumbItemComponent,
         HeaderComponent, IconComponent,
-        NotFoundPageComponent] });
+        NotFoundPageComponent,
+        LanguageSwitcherComponent,
+        MarkMatchingTextPipe] });
 ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
         TranslateModule,
         ReactiveFormsModule] });
@@ -3185,11 +3354,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class DesignAngularKitModule {
+    constructor(translateService) {
+        this.translateService = translateService;
+        translateService.addLangs(['it', 'en']); // Adds 'it' and 'eng' as available languages.
+        translateService.use('it');
+    }
 }
-DesignAngularKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DesignAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DesignAngularKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DesignAngularKitModule, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.NgModule });
 DesignAngularKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DesignAngularKitModule, imports: [ComponentsModule,
-        HttpClientModule, i2$1.TranslateModule], exports: [ComponentsModule] });
-DesignAngularKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DesignAngularKitModule, imports: [ComponentsModule,
+        HttpClientModule, i1.TranslateModule], exports: [ComponentsModule,
+        TranslateModule] });
+DesignAngularKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DesignAngularKitModule, providers: [TranslateStore], imports: [ComponentsModule,
         HttpClientModule,
         TranslateModule.forChild({
             loader: {
@@ -3197,8 +3372,11 @@ DesignAngularKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
                 useFactory: (http) => new TranslateHttpLoader(http, '/bootstrap-italia/i18n/'),
                 deps: [HttpClient]
             },
+            extend: true,
+            isolate: false,
             defaultLanguage: 'it'
-        }), ComponentsModule] });
+        }), ComponentsModule,
+        TranslateModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DesignAngularKitModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3212,12 +3390,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                                 useFactory: (http) => new TranslateHttpLoader(http, '/bootstrap-italia/i18n/'),
                                 deps: [HttpClient]
                             },
+                            extend: true,
+                            isolate: false,
                             defaultLanguage: 'it'
                         })
                     ],
-                    exports: [ComponentsModule]
+                    exports: [
+                        ComponentsModule,
+                        TranslateModule
+                    ],
+                    providers: [TranslateStore]
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
 
 /*
  * Public API Surface of design-angular-kit
@@ -3227,5 +3411,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AlertComponent, BackButtonComponent, BackToTopComponent, BadgeDirective, BreadcrumbComponent, BreadcrumbItemComponent, ButtonDirective, CAP_REGEX, CalloutComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, ChipComponent, CollapseComponent, ComponentsModule, DesignAngularKitModule, DimmerButtonsComponent, DimmerComponent, DimmerIconComponent, DropdownComponent, DropdownItemComponent, EMAIL_REGEX, FileUtils, ForwardDirective, HeaderComponent, ITALIAN_TAX_CODE_REGEX, IconComponent, InputComponent, ItValidators, LinkComponent, ListComponent, ListItemComponent, ModalComponent, NotFoundPageComponent, NotificationPosition, NotificationType, NotificationsComponent, NotificationsService, PHONE_NUMBER_REGEX, PaginationComponent, PasswordInputComponent, PopoverDirective, ProgressBarComponent, ProgressButtonComponent, RadioButtonComponent, SelectComponent, SpinnerComponent, TabContainerComponent, TabItemComponent, TableComponent, TextareaComponent, TooltipDirective, URL_REGEX, UploadDragDropComponent, UploadFileListComponent, VAT_NUMBER_REGEX };
+export { AccordionComponent, AlertComponent, BackButtonComponent, BackToTopComponent, BadgeDirective, BreadcrumbComponent, BreadcrumbItemComponent, ButtonDirective, CAP_REGEX, CalloutComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, ChipComponent, CollapseComponent, ComponentsModule, DesignAngularKitModule, DimmerButtonsComponent, DimmerComponent, DimmerIconComponent, DropdownComponent, DropdownItemComponent, EMAIL_REGEX, FileUtils, ForwardDirective, HeaderComponent, ITALIAN_TAX_CODE_REGEX, IconComponent, InputComponent, ItValidators, LanguageSwitcherComponent, LinkComponent, ListComponent, ListItemComponent, MarkMatchingTextPipe, ModalComponent, NotFoundPageComponent, NotificationPosition, NotificationType, NotificationsComponent, NotificationsService, PHONE_NUMBER_REGEX, PaginationComponent, PasswordInputComponent, PopoverDirective, ProgressBarComponent, ProgressButtonComponent, RadioButtonComponent, SelectComponent, SpinnerComponent, TabContainerComponent, TabItemComponent, TableComponent, TextareaComponent, TooltipDirective, URL_REGEX, UploadDragDropComponent, UploadFileListComponent, VAT_NUMBER_REGEX };
 //# sourceMappingURL=design-angular-kit.mjs.map