design-angular-kit 1.0.0-5 → 1.0.0-6

package/fesm2020/design-angular-kit.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/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 { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1$1 from '@angular/common';
@@ -11,7 +11,7 @@ import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 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, map, of, take } from 'rxjs';
+import { Subject, filter, Observable, of, debounceTime, distinctUntilChanged, switchMap, map, take } from 'rxjs';
 import * as i1$2 from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
 
@@ -1475,6 +1475,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
+class SteppersItemComponent {
+}
+SteppersItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SteppersItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SteppersItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SteppersItemComponent, selector: "it-steppers-item[label]", inputs: { label: "label", icon: "icon" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SteppersItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'it-steppers-item[label]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], htmlContent: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+class SteppersContainerComponent {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+        /**
+         * Show the stepper header
+         * @default true
+         */
+        this.showHeader = true;
+        /**
+         * Show the back button
+         * @default true
+         */
+        this.showBackButton = true;
+        /**
+         * Show the forward button
+         * @default true
+         */
+        this.showForwardButton = true;
+        /**
+         * Show the confirm button
+         * @default false
+         */
+        this.showConfirmButton = false;
+        /**
+         * Show the save button
+         * @default false
+         */
+        this.showSaveButton = false;
+        this.backClick = new EventEmitter();
+        this.forwardClick = new EventEmitter();
+        this.confirmClick = new EventEmitter();
+        this.saveClick = new EventEmitter();
+    }
+    get isShowHeader() {
+        return isTrueBooleanInput(this.showHeader);
+    }
+    get isSteppersNumber() {
+        return isTrueBooleanInput(this.steppersNumber);
+    }
+    get isDark() {
+        return isTrueBooleanInput(this.dark);
+    }
+    get isShowBackButton() {
+        return isTrueBooleanInput(this.showBackButton);
+    }
+    get isShowForwardButton() {
+        return isTrueBooleanInput(this.showForwardButton);
+    }
+    get isShowConfirmButton() {
+        return isTrueBooleanInput(this.showConfirmButton);
+    }
+    get isConfirmLoading() {
+        return isTrueBooleanInput(this.confirmLoading);
+    }
+    get isShowSaveButton() {
+        return isTrueBooleanInput(this.showSaveButton);
+    }
+    get isSaveLoading() {
+        return isTrueBooleanInput(this.saveLoading);
+    }
+    ngAfterViewInit() {
+        this._changeDetectorRef.detectChanges();
+        this.steps?.changes.subscribe(() => {
+            this._changeDetectorRef.detectChanges();
+        });
+    }
+}
+SteppersContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SteppersContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SteppersContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SteppersContainerComponent, selector: "it-steppers-container[activeStep]", inputs: { activeStep: "activeStep", showHeader: "showHeader", dark: "dark", steppersNumber: "steppersNumber", progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: "showBackButton", showForwardButton: "showForwardButton", showConfirmButton: "showConfirmButton", confirmLoading: "confirmLoading", showSaveButton: "showSaveButton", saveLoading: "saveLoading" }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: SteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"isDark\">\n  <div *ngIf=\"isShowHeader\" class=\"steppers-header\">\n    <ul>\n      <li *ngFor=\"let step of steps; let i = index\"\n          [class.confirmed]=\"i < activeStep\"\n          [class.active]=\"i === activeStep\"\n          [class.no-line]=\"i === activeStep && isSteppersNumber\">\n\n        <it-icon *ngIf=\"step.icon && !isSteppersNumber\" [name]=\"step.icon\"></it-icon>\n        <span *ngIf=\"isSteppersNumber\" class=\"steppers-number\">\n          <ng-container *ngIf=\"i < activeStep; else showNumber\">\n            <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n          </ng-container>\n          <ng-template #showNumber>\n            <span class=\"visually-hidden\">{{'it.core.step' | translate}} </span>{{i + 1}}\n          </ng-template>\n        </span>\n\n        {{step.label}}\n\n        <span *ngIf=\"i < activeStep && !isSteppersNumber\" class=\"ms-auto\">\n          <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n        </span>\n        <span *ngIf=\"i === activeStep\" class=\"visually-hidden\">{{'it.core.active' | translate}}</span>\n      </li>\n    </ul>\n    <span class=\"steppers-index\" aria-hidden=\"true\">\n      <ng-container\n        *ngIf=\"!isSteppersNumber; else showNumbers\">{{(activeStep + 1) + '/' + steps?.length}}</ng-container>\n      <ng-template #showNumbers>\n        <span *ngFor=\"let step of steps; let i = index\" [class.active]=\"i === activeStep\">{{i + 1}}</span>\n      </ng-template>\n    </span>\n  </div>\n\n  <div *ngIf=\"steps?.get(activeStep) as step\" class=\"steppers-content\" aria-live=\"polite\">\n    <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n  </div>\n\n  <nav *ngIf=\"isShowBackButton || isShowSaveButton || isShowForwardButton || isShowConfirmButton || !!progressStyle\"\n       class=\"steppers-nav\">\n    <button *ngIf=\"isShowBackButton\" type=\"button\" itButton=\"outline-primary\" size=\"sm\" class=\"steppers-btn-prev\"\n            (click)=\"backClick.emit(activeStep)\">\n      <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n      {{'it.core.back' | translate}}\n    </button>\n\n    <ng-container *ngIf=\"!!progressStyle\">\n      <ul *ngIf=\"progressStyle === 'dots'; else progressBar\" class=\"steppers-dots\">\n        <li *ngFor=\"let step of steps; let i = index\" [class.done]=\"i < activeStep\">\n          <span class=\"visually-hidden\">\n            {{'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n            {{i < activeStep ? ('- ' + ('it.core.confirmed' | translate)) : ''}}\n          </span>\n        </li>\n      </ul>\n\n      <ng-template #progressBar>\n        <div class=\"steppers-progress\">\n          <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep/(steps?.length||1)) * 100\"></it-progress-bar>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <button *ngIf=\"isShowSaveButton\" type=\"button\" itButton=\"primary\" size=\"sm\" class=\"steppers-btn-save\"\n            [progress]=\"isSaveLoading\" [disabled]=\"isSaveLoading\" (click)=\"saveClick.emit(activeStep)\">\n      {{'it.general.save' | translate}}\n    </button>\n\n    <button *ngIf=\"isShowForwardButton\" type=\"button\" itButton=\"outline-primary\" size=\"sm\" class=\"steppers-btn-next\"\n            (click)=\"forwardClick.emit(activeStep)\">\n      {{'it.core.forward' | translate}}\n      <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n    </button>\n\n    <button *ngIf=\"isShowConfirmButton\" type=\"button\" itButton=\"primary\" size=\"sm\"\n            class=\"steppers-btn-confirm d-lg-block\"\n            [progress]=\"isConfirmLoading\" [disabled]=\"isConfirmLoading\"\n            (click)=\"confirmClick.emit(activeStep)\">\n      {{'it.core.confirm' | translate}}\n    </button>\n  </nav>\n</div>\n\n<ng-template #checkIcon>\n  <it-icon name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{'it.core.confirmed' | translate}}</span>\n</ng-template>\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: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SteppersContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'it-steppers-container[activeStep]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"steppers\" [class.bg-dark]=\"isDark\">\n  <div *ngIf=\"isShowHeader\" class=\"steppers-header\">\n    <ul>\n      <li *ngFor=\"let step of steps; let i = index\"\n          [class.confirmed]=\"i < activeStep\"\n          [class.active]=\"i === activeStep\"\n          [class.no-line]=\"i === activeStep && isSteppersNumber\">\n\n        <it-icon *ngIf=\"step.icon && !isSteppersNumber\" [name]=\"step.icon\"></it-icon>\n        <span *ngIf=\"isSteppersNumber\" class=\"steppers-number\">\n          <ng-container *ngIf=\"i < activeStep; else showNumber\">\n            <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n          </ng-container>\n          <ng-template #showNumber>\n            <span class=\"visually-hidden\">{{'it.core.step' | translate}} </span>{{i + 1}}\n          </ng-template>\n        </span>\n\n        {{step.label}}\n\n        <span *ngIf=\"i < activeStep && !isSteppersNumber\" class=\"ms-auto\">\n          <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n        </span>\n        <span *ngIf=\"i === activeStep\" class=\"visually-hidden\">{{'it.core.active' | translate}}</span>\n      </li>\n    </ul>\n    <span class=\"steppers-index\" aria-hidden=\"true\">\n      <ng-container\n        *ngIf=\"!isSteppersNumber; else showNumbers\">{{(activeStep + 1) + '/' + steps?.length}}</ng-container>\n      <ng-template #showNumbers>\n        <span *ngFor=\"let step of steps; let i = index\" [class.active]=\"i === activeStep\">{{i + 1}}</span>\n      </ng-template>\n    </span>\n  </div>\n\n  <div *ngIf=\"steps?.get(activeStep) as step\" class=\"steppers-content\" aria-live=\"polite\">\n    <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n  </div>\n\n  <nav *ngIf=\"isShowBackButton || isShowSaveButton || isShowForwardButton || isShowConfirmButton || !!progressStyle\"\n       class=\"steppers-nav\">\n    <button *ngIf=\"isShowBackButton\" type=\"button\" itButton=\"outline-primary\" size=\"sm\" class=\"steppers-btn-prev\"\n            (click)=\"backClick.emit(activeStep)\">\n      <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n      {{'it.core.back' | translate}}\n    </button>\n\n    <ng-container *ngIf=\"!!progressStyle\">\n      <ul *ngIf=\"progressStyle === 'dots'; else progressBar\" class=\"steppers-dots\">\n        <li *ngFor=\"let step of steps; let i = index\" [class.done]=\"i < activeStep\">\n          <span class=\"visually-hidden\">\n            {{'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n            {{i < activeStep ? ('- ' + ('it.core.confirmed' | translate)) : ''}}\n          </span>\n        </li>\n      </ul>\n\n      <ng-template #progressBar>\n        <div class=\"steppers-progress\">\n          <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep/(steps?.length||1)) * 100\"></it-progress-bar>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <button *ngIf=\"isShowSaveButton\" type=\"button\" itButton=\"primary\" size=\"sm\" class=\"steppers-btn-save\"\n            [progress]=\"isSaveLoading\" [disabled]=\"isSaveLoading\" (click)=\"saveClick.emit(activeStep)\">\n      {{'it.general.save' | translate}}\n    </button>\n\n    <button *ngIf=\"isShowForwardButton\" type=\"button\" itButton=\"outline-primary\" size=\"sm\" class=\"steppers-btn-next\"\n            (click)=\"forwardClick.emit(activeStep)\">\n      {{'it.core.forward' | translate}}\n      <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n    </button>\n\n    <button *ngIf=\"isShowConfirmButton\" type=\"button\" itButton=\"primary\" size=\"sm\"\n            class=\"steppers-btn-confirm d-lg-block\"\n            [progress]=\"isConfirmLoading\" [disabled]=\"isConfirmLoading\"\n            (click)=\"confirmClick.emit(activeStep)\">\n      {{'it.core.confirm' | translate}}\n    </button>\n  </nav>\n</div>\n\n<ng-template #checkIcon>\n  <it-icon name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{'it.core.confirmed' | translate}}</span>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { activeStep: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], steppersNumber: [{
+                type: Input
+            }], progressStyle: [{
+                type: Input
+            }], progressColor: [{
+                type: Input
+            }], showBackButton: [{
+                type: Input
+            }], showForwardButton: [{
+                type: Input
+            }], showConfirmButton: [{
+                type: Input
+            }], confirmLoading: [{
+                type: Input
+            }], showSaveButton: [{
+                type: Input
+            }], saveLoading: [{
+                type: Input
+            }], steps: [{
+                type: ContentChildren,
+                args: [SteppersItemComponent]
+            }], backClick: [{
+                type: Output
+            }], forwardClick: [{
+                type: Output
+            }], confirmClick: [{
+                type: Output
+            }], saveClick: [{
+                type: Output
+            }] } });
+
 class TabItemComponent extends AbstractComponent {
     constructor() {
         super(...arguments);
@@ -1489,7 +1614,7 @@ class TabItemComponent extends AbstractComponent {
     }
 }
 TabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabItemComponent, selector: "it-tab-item[id]", inputs: { label: "label", icon: "icon", active: "active", disabled: "disabled", class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""] });
+TabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabItemComponent, selector: "it-tab-item[id]", inputs: { label: "label", icon: "icon", active: "active", disabled: "disabled", class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-tab-item[id]', template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
@@ -1520,7 +1645,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$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"] }] });
+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", 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" }]
@@ -1743,10 +1868,10 @@ 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$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" }] });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckboxComponent, selector: "it-checkbox[id]", 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        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\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\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </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\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"!customLabel.hasChildNodes()\">{{label}}</ng-container>\n</ng-template>\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.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" }]
+            args: [{ selector: 'it-checkbox[id]', 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        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\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\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </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\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"!customLabel.hasChildNodes()\">{{label}}</ng-container>\n</ng-template>\n" }]
         }], propDecorators: { toggle: [{
                 type: Input
             }], inline: [{
@@ -1962,18 +2087,20 @@ class InputComponent extends AbstractFormComponent {
          * The input placeholder
          */
         this.placeholder = '';
-        this._autoCompleteData = [];
+        /**
+         * Time span [ms] has passed without another source emission, to delay data filtering.
+         * Useful when the user is typing multiple letters
+         * @default 300 [ms]
+         */
+        this.autocompleteDebounceTime = 300;
+        /**
+         * Fired when the Autocomplete Item has been selected
+         */
+        this.onAutocompleteSelected = new EventEmitter();
         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) {
@@ -2085,47 +2212,37 @@ class InputComponent extends AbstractFormComponent {
         }
         this.control.setValue(value);
     }
+    /**
+     * Create the autocomplete list
+     */
     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 {
+        if (this.type !== 'search') {
+            return of({ searchedValue: '', relatedEntries: [] });
+        }
+        return this.control.valueChanges.pipe(debounceTime(this.autocompleteDebounceTime), // Delay filter data after time span has passed without another source emission, useful when the user is typing multiple letters
+        distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value
+        switchMap(searchedValue => {
+            if (!this.autocompleteData) {
+                return of({ searchedValue, relatedEntries: [] });
+            }
+            const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue);
+            return autoCompleteData$.pipe(map(autocompleteData => {
+                if (!searchedValue) {
                     return { searchedValue, relatedEntries: [] };
                 }
+                const lowercaseValue = searchedValue.toLowerCase();
+                const relatedEntries = autocompleteData.filter(item => item.value?.toLowerCase().includes(lowercaseValue));
+                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 
+        // 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.onAutocompleteSelected.next(entry);
         this.control.setValue(entry.value);
         this.showAutocompletion = false;
     }
@@ -2137,10 +2254,10 @@ class InputComponent extends AbstractFormComponent {
     }
 }
 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", 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" }] });
+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", autocompleteDebounceTime: "autocompleteDebounceTime" }, outputs: { onAutocompleteSelected: "onAutocompleteSelected" }, 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  <!-- INIZIO gestione AUTOCOMPLETAMENTO -->\n  <ng-container *ngIf=\"type === 'search'\">\n    <!-- Icona lente per autocompletamento -->\n    <span class=\"autocomplete-icon\" aria-hidden=\"true\">\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\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n        <li *ngFor=\"let entry of autocomplete.relatedEntries; trackBy: autocompleteItemTrackByValueFn\"\n            (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.value | 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  </ng-container>\n  <!-- FINE gestione AUTOCOMPLETAMENTO -->\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           (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"] }]
+            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  <!-- INIZIO gestione AUTOCOMPLETAMENTO -->\n  <ng-container *ngIf=\"type === 'search'\">\n    <!-- Icona lente per autocompletamento -->\n    <span class=\"autocomplete-icon\" aria-hidden=\"true\">\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\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n        <li *ngFor=\"let entry of autocomplete.relatedEntries; trackBy: autocompleteItemTrackByValueFn\"\n            (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.value | 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  </ng-container>\n  <!-- FINE gestione AUTOCOMPLETAMENTO -->\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: [{
@@ -2161,8 +2278,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], adaptive: [{
                 type: Input
-            }], autoCompleteData: [{
+            }], autocompleteData: [{
                 type: Input
+            }], autocompleteDebounceTime: [{
+                type: Input
+            }], onAutocompleteSelected: [{
+                type: Output
             }] } });
 
 class PasswordInputComponent extends AbstractFormComponent {
@@ -2301,10 +2422,10 @@ 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$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" }] });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RadioButtonComponent, selector: "it-radio-button[id][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\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      <ng-container *ngIf=\"!customLabel.hasChildNodes()\">{{label}}</ng-container>\n    </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>\n        <ng-content select=\"[error]\"></ng-content>\n      </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>\n      <ng-content select=\"[error]\"></ng-content>\n    </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" }]
+            args: [{ selector: 'it-radio-button[id][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\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      <ng-container *ngIf=\"!customLabel.hasChildNodes()\">{{label}}</ng-container>\n    </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>\n        <ng-content select=\"[error]\"></ng-content>\n      </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>\n      <ng-content select=\"[error]\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"!customError.hasChildNodes()\">{{invalidMessage | async}}</ng-container>\n  </div>\n</ng-container>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], inline: [{
@@ -2733,7 +2854,8 @@ class BackButtonComponent {
     /**
      * Go back function
      */
-    goBack() {
+    goBack(event) {
+        event.preventDefault();
         if (this.backFn) {
             return this.backFn(this._location);
         }
@@ -2741,10 +2863,10 @@ class BackButtonComponent {
     }
 }
 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" }] });
+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'\" href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<button *ngIf=\"buttonStyle === 'button'\" itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\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", 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: 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"] }]
+            args: [{ selector: 'it-back-button', exportAs: 'itBackButton', template: "<a *ngIf=\"buttonStyle === 'link'\" href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<button *ngIf=\"buttonStyle === 'button'\" itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\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" }]
         }], ctorParameters: function () { return [{ type: i1$1.Location }]; }, propDecorators: { buttonStyle: [{
                 type: Input
             }], direction: [{
@@ -3189,6 +3311,8 @@ const core = [
     ProgressBarComponent,
     ProgressButtonComponent,
     SpinnerComponent,
+    SteppersContainerComponent,
+    SteppersItemComponent,
     TabContainerComponent,
     TabItemComponent,
     TableComponent,
@@ -3256,6 +3380,8 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ProgressBarComponent,
         ProgressButtonComponent,
         SpinnerComponent,
+        SteppersContainerComponent,
+        SteppersItemComponent,
         TabContainerComponent,
         TabItemComponent,
         TableComponent,
@@ -3304,6 +3430,8 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ProgressBarComponent,
         ProgressButtonComponent,
         SpinnerComponent,
+        SteppersContainerComponent,
+        SteppersItemComponent,
         TabContainerComponent,
         TabItemComponent,
         TableComponent,
@@ -3364,7 +3492,7 @@ DesignAngularKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 DesignAngularKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.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,
+DesignAngularKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DesignAngularKitModule, imports: [ComponentsModule,
         HttpClientModule,
         TranslateModule.forChild({
             loader: {
@@ -3398,8 +3526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     exports: [
                         ComponentsModule,
                         TranslateModule
-                    ],
-                    providers: [TranslateStore]
+                    ]
                 }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
 
@@ -3411,5 +3538,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, 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 };
+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, SteppersContainerComponent, SteppersItemComponent, TabContainerComponent, TabItemComponent, TableComponent, TextareaComponent, TooltipDirective, URL_REGEX, UploadDragDropComponent, UploadFileListComponent, VAT_NUMBER_REGEX };
 //# sourceMappingURL=design-angular-kit.mjs.map