design-angular-kit 1.0.0-21 → 1.0.0-22

package/fesm2022/design-angular-kit.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, NgModule, inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Inject, Directive, HostBinding, Optional, Host, ContentChildren, HostListener, TemplateRef, Injectable, Self, Pipe, ViewChildren } from '@angular/core';
+import { InjectionToken, NgModule, inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Inject, ContentChildren, TemplateRef, Directive, HostBinding, Optional, Host, HostListener, Injectable, Self, Pipe, ViewChildren } from '@angular/core';
 import * as i1 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 { Collapse, Alert, CarouselBI, Dropdown, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, BackToTop } from 'bootstrap-italia';
+import { Collapse, Alert, Dropdown, CarouselBI, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, BackToTop } from 'bootstrap-italia';
 import * as i1$3 from '@angular/common';
 import { NgIf, NgTemplateOutlet, NgForOf, NgClass, AsyncPipe, LowerCasePipe, CommonModule, NgOptimizedImage, NgFor, DOCUMENT } from '@angular/common';
-import { startWith, Subject, filter, Observable, of, debounceTime, distinctUntilChanged, switchMap, map, tap, take, forkJoin } from 'rxjs';
-import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$4 from '@angular/router';
 import { RouterLink } from '@angular/router';
+import { startWith, Subject, filter, Observable, of, debounceTime, distinctUntilChanged, switchMap, map, tap, take, forkJoin } from 'rxjs';
+import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$1 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/platform-browser';
@@ -394,6 +394,409 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 args: ['alertElement']
             }] } });
 
+class ItLinkComponent extends ItAbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Custom class
+         */
+        this.class = '';
+    }
+    get isExternalLink() {
+        return isTrueBooleanInput(this.externalLink);
+    }
+    get isDisabled() {
+        return isTrueBooleanInput(this.disabled);
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (changes['class']) {
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItLinkComponent, isStandalone: true, selector: "it-link", inputs: { href: "href", externalLink: "externalLink", disabled: "disabled", class: "class" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<a *ngIf=\"!isExternalLink; else externalLink\" [id]=\"id\" [class]=\"class\" [routerLink]=\"(isDisabled ? null : href)!\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [id]=\"id\" [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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItLinkComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, RouterLink, NgTemplateOutlet], template: "<a *ngIf=\"!isExternalLink; else externalLink\" [id]=\"id\" [class]=\"class\" [routerLink]=\"(isDisabled ? null : href)!\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [id]=\"id\" [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" }]
+        }], propDecorators: { href: [{
+                type: Input
+            }], externalLink: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class ItDropdownItemComponent extends ItLinkComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * The icon position
+         * @default right
+         */
+        this.iconPosition = 'right';
+        /**
+         * Change icon color if menu is dark
+         * @default false
+         */
+        this.isDark = false;
+    }
+    get isDivider() {
+        return isTrueBooleanInput(this.divider);
+    }
+    get isActive() {
+        return isTrueBooleanInput(this.active);
+    }
+    get isLarge() {
+        return isTrueBooleanInput(this.large);
+    }
+    get linkClass() {
+        let linkClass = `list-item ${this.isActive ? 'active' : 'dropdown-item'}`;
+        if (this.isDisabled) {
+            linkClass += ' disabled';
+        }
+        if (this.isLarge) {
+            linkClass += ' large';
+        }
+        if (this.iconName) {
+            linkClass += ` ${this.iconPosition === 'right' ? 'right-icon' : 'left-icon'}`;
+        }
+        return linkClass;
+    }
+    setDark(dark) {
+        if (this.isDark !== dark) {
+            this.isDark = dark;
+            this._changeDetectorRef.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItDropdownItemComponent, isStandalone: true, 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\" [id]=\"id\" [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                [svgClass]=\"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                [svgClass]=\"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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ItIconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, ItIconComponent, TranslateModule, ItLinkComponent], template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [id]=\"id\" [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                [svgClass]=\"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                [svgClass]=\"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"] }]
+        }], propDecorators: { divider: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], large: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }] } });
+
+class ItDropdownComponent extends ItAbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Dropdown mode
+         */
+        this.mode = 'button';
+        /**
+         * Fires immediately when the show instance method is called.
+         */
+        this.showEvent = new EventEmitter();
+        /**
+         * Fired when the dropdown has been made visible to the user and CSS transitions have completed.
+         */
+        this.shownEvent = new EventEmitter();
+        /**
+         * Fires immediately when the hide instance method has been called.
+         */
+        this.hideEvent = new EventEmitter();
+        /**
+         * Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
+         */
+        this.hiddenEvent = new EventEmitter();
+    }
+    get buttonClass() {
+        let btnClass = 'btn dropdown-toggle';
+        if (this.color) {
+            btnClass += ` btn-${this.color}`;
+        }
+        else {
+            btnClass += ` btn-dropdown`;
+        }
+        return btnClass;
+    }
+    get isFullWidth() {
+        return isTrueBooleanInput(this.fullWidth);
+    }
+    get isDark() {
+        return isTrueBooleanInput(this.dark);
+    }
+    ngOnChanges(changes) {
+        if (changes['dark'] && !changes['dark'].firstChange) {
+            this.setDarkItems();
+        }
+        if (changes['mode'] && !changes['mode'].firstChange) {
+            this.updateListeners();
+        }
+        super.ngOnChanges(changes);
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.setDarkItems();
+        this.updateListeners();
+    }
+    /**
+     * Set child items dark mode
+     * @private
+     */
+    setDarkItems() {
+        this.items?.forEach(item => {
+            item.setDark(this.isDark);
+        });
+    }
+    updateListeners() {
+        if (this.dropdownButton) {
+            const element = this.dropdownButton.nativeElement;
+            this.dropdown = Dropdown.getOrCreateInstance(element);
+            element.addEventListener('show.bs.dropdown', event => this.showEvent.emit(event));
+            element.addEventListener('shown.bs.dropdown', event => this.shownEvent.emit(event));
+            element.addEventListener('hide.bs.dropdown', event => this.hideEvent.emit(event));
+            element.addEventListener('hidden.bs.dropdown', event => this.hiddenEvent.emit(event));
+        }
+    }
+    /**
+     * Toggles the dropdown menu of a given navbar or tabbed navigation.
+     */
+    toggle() {
+        this.dropdown?.toggle();
+    }
+    /**
+     * Shows the dropdown menu of a given navbar or tabbed navigation.
+     */
+    show() {
+        this.dropdown?.show();
+    }
+    /**
+     * Hides the dropdown menu of a given navbar or tabbed navigation.
+     */
+    hide() {
+        this.dropdown?.hide();
+    }
+    /**
+     * Updates the position of an element's dropdown.
+     */
+    update() {
+        this.dropdown?.update();
+    }
+    /**
+     * Destroys an element's dropdown. (Removes stored data on the DOM element)
+     */
+    dispose() {
+        this.dropdown?.dispose();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItDropdownComponent, isStandalone: true, selector: "it-dropdown", inputs: { mode: "mode", color: "color", direction: "direction", fullWidth: "fullWidth", dark: "dark" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, queries: [{ propertyName: "items", predicate: ItDropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{direction}}\">\n  <button #dropdownButton\n          *ngIf=\"mode === 'button'; else linkButton\"\n          [id]=\"id\"\n          [class]=\"buttonClass\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\">\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n    <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n  </button>\n\n  <ng-template #linkButton>\n    <a #dropdownButton\n       [id]=\"id\"\n       class=\"btn btn-dropdown dropdown-toggle\"\n       role=\"button\"\n       data-bs-toggle=\"dropdown\"\n       aria-haspopup=\"true\"\n       aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" color=\"primary\"></it-icon>\n    </a>\n  </ng-template>\n\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-dropdown', exportAs: 'itDropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet, NgIf], template: "<div class=\"dropdown {{direction}}\">\n  <button #dropdownButton\n          *ngIf=\"mode === 'button'; else linkButton\"\n          [id]=\"id\"\n          [class]=\"buttonClass\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\">\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n    <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n  </button>\n\n  <ng-template #linkButton>\n    <a #dropdownButton\n       [id]=\"id\"\n       class=\"btn btn-dropdown dropdown-toggle\"\n       role=\"button\"\n       data-bs-toggle=\"dropdown\"\n       aria-haspopup=\"true\"\n       aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" color=\"primary\"></it-icon>\n    </a>\n  </ng-template>\n\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"] }]
+        }], propDecorators: { mode: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], items: [{
+                type: ContentChildren,
+                args: [ItDropdownItemComponent]
+            }], showEvent: [{
+                type: Output
+            }], shownEvent: [{
+                type: Output
+            }], hideEvent: [{
+                type: Output
+            }], hiddenEvent: [{
+                type: Output
+            }], dropdownButton: [{
+                type: ViewChild,
+                args: ['dropdownButton']
+            }] } });
+
+const dropdownComponents = [ItDropdownComponent, ItDropdownItemComponent];
+class ItDropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownComponent, ItDropdownItemComponent], exports: [ItDropdownComponent, ItDropdownItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownItemComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: dropdownComponents,
+                    exports: dropdownComponents
+                }]
+        }] });
+
+class ItAvatarDropdownItemComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItAvatarDropdownItemComponent, isStandalone: true, selector: "it-avatar-dropdown-item", inputs: { link: "link", title: "title", accesskey: "accesskey", tabindex: "tabindex" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-avatar-dropdown-item', imports: [NgForOf, NgIf, NgTemplateOutlet], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
+        }], propDecorators: { _implicitContent: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }], link: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], accesskey: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }] } });
+class ItAvatarDropdownComponent {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItAvatarDropdownComponent, isStandalone: true, selector: "it-avatar-dropdown", host: { classAttribute: "avatar avatar-dropdown" }, queries: [{ propertyName: "items", predicate: ItAvatarDropdownItemComponent }], ngImport: i0, template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">  \n  <a button role=\"button\" class=\"\" aria-pressed=\"false\">\n    <ng-content select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  </a>\n  <ng-container list class=\"dropdown-menu\">\n    <li it-dropdown-item *ngFor=\"let item of items\">\n      <a *ngIf=\"item.link; else nolink\" \n      [routerLink]=\"item.link\" \n      class=\"dropdown-item list-item\"\n      title=\"item.title\"\n      accesskey=\"item.accesskey\"\n      tabindex=\"item.tabindex\"\n      >\n        <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n      </a>\n      <ng-template #nolink>\n        <div class=\"dropdown-item list-item\">\n          <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n        </div>\n      </ng-template>\n    </li>\n  </ng-container>\n</it-dropdown>", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-avatar-dropdown', host: { 'class': 'avatar avatar-dropdown' }, imports: [ItDropdownModule, NgTemplateOutlet, NgForOf, NgIf], template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">  \n  <a button role=\"button\" class=\"\" aria-pressed=\"false\">\n    <ng-content select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  </a>\n  <ng-container list class=\"dropdown-menu\">\n    <li it-dropdown-item *ngFor=\"let item of items\">\n      <a *ngIf=\"item.link; else nolink\" \n      [routerLink]=\"item.link\" \n      class=\"dropdown-item list-item\"\n      title=\"item.title\"\n      accesskey=\"item.accesskey\"\n      tabindex=\"item.tabindex\"\n      >\n        <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n      </a>\n      <ng-template #nolink>\n        <div class=\"dropdown-item list-item\">\n          <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n        </div>\n      </ng-template>\n    </li>\n  </ng-container>\n</it-dropdown>", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { items: [{
+                type: ContentChildren,
+                args: [ItAvatarDropdownItemComponent]
+            }] } });
+
+class ItAvatarGroupItemComponent {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItAvatarGroupItemComponent, isStandalone: true, selector: "it-avatar-item", viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarGroupItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-avatar-item', template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _implicitContent: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+class ItAvatarGroupComponent {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItAvatarGroupComponent, isStandalone: true, selector: "it-avatar-group", host: { properties: { "class.link-list-wrapper": "linkList" } }, queries: [{ propertyName: "avatars", predicate: ItAvatarGroupItemComponent }], ngImport: i0, template: "<ul class=\"avatar-group-stacked\">\n  <li *ngFor=\"let avatar of avatars\">\n      <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n  </li>\n</ul>", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-avatar-group', host: {
+                        '[class.link-list-wrapper]': 'linkList'
+                    }, imports: [NgForOf, NgTemplateOutlet], template: "<ul class=\"avatar-group-stacked\">\n  <li *ngFor=\"let avatar of avatars\">\n      <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n  </li>\n</ul>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { avatars: [{
+                type: ContentChildren,
+                args: [ItAvatarGroupItemComponent]
+            }] } });
+
+var ColorsEnum;
+(function (ColorsEnum) {
+    ColorsEnum["primary"] = "primary";
+    ColorsEnum["secondary"] = "secondary";
+    ColorsEnum["success"] = "success";
+    ColorsEnum["danger"] = "danger";
+    ColorsEnum["warning"] = "warning";
+    ColorsEnum["green"] = "green";
+    ColorsEnum["orange"] = "orange";
+    ColorsEnum["red"] = "red";
+})(ColorsEnum || (ColorsEnum = {}));
+
+var SizesEnum;
+(function (SizesEnum) {
+    SizesEnum["xs"] = "size-xs";
+    SizesEnum["sm"] = "size-sm";
+    SizesEnum["lg"] = "size-lg";
+    SizesEnum["xl"] = "size-xl";
+    SizesEnum["xxl"] = "size-xxl";
+})(SizesEnum || (SizesEnum = {}));
+
+class ItAvatarDirective {
+    /**
+     * Indica il colore dell'avatar. Può assumere i valori:
+     * <ul>
+     * <li> primary
+     * <li> secondary
+     * <li> green
+     * <li> orange
+     * <li> red
+     * </ul>
+     */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        const colorsKey = value;
+        if (ColorsEnum[colorsKey]) {
+            this._color = ColorsEnum[colorsKey];
+        }
+        else {
+            this._color = undefined;
+        }
+    }
+    /**
+     * Indica la grandezza dell'avatar. Può assumere i valori:
+     * <ul>
+     * <li> xs
+     * <li> sm
+     * <li> lg
+     * <li> xl
+     * <li> xxl
+     * </ul>
+     */
+    get size() {
+        return this._size;
+    }
+    set size(value) {
+        const sizesKey = value;
+        if (SizesEnum[sizesKey]) {
+            this._size = SizesEnum[sizesKey];
+        }
+        else {
+            this._size = undefined;
+        }
+    }
+    get hostClasses() {
+        let cssClass = 'avatar';
+        if (this.size) {
+            cssClass += ` ${this.size}`;
+        }
+        if (this.color) {
+            cssClass += ` avatar-${this.color}`;
+        }
+        return cssClass;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ItAvatarDirective, isStandalone: true, selector: "[itAvatar]", inputs: { color: "color", size: "size" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatar"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItAvatarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[itAvatar]',
+                    exportAs: 'itAvatar'
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 /**
  * Badge
  * @description Useful for small counters and labels
@@ -897,255 +1300,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 }]
         }] });
 
-class ItLinkComponent extends ItAbstractComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Custom class
-         */
-        this.class = '';
-    }
-    get isExternalLink() {
-        return isTrueBooleanInput(this.externalLink);
-    }
-    get isDisabled() {
-        return isTrueBooleanInput(this.disabled);
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
-    }
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-        if (changes['class']) {
-            this._changeDetectorRef.markForCheck();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItLinkComponent, isStandalone: true, selector: "it-link", inputs: { href: "href", externalLink: "externalLink", disabled: "disabled", class: "class" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<a *ngIf=\"!isExternalLink; else externalLink\" [id]=\"id\" [class]=\"class\" [routerLink]=\"(isDisabled ? null : href)!\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [id]=\"id\" [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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItLinkComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'it-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, RouterLink, NgTemplateOutlet], template: "<a *ngIf=\"!isExternalLink; else externalLink\" [id]=\"id\" [class]=\"class\" [routerLink]=\"(isDisabled ? null : href)!\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [id]=\"id\" [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" }]
-        }], propDecorators: { href: [{
-                type: Input
-            }], externalLink: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }] } });
-
-class ItDropdownItemComponent extends ItLinkComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * The icon position
-         * @default right
-         */
-        this.iconPosition = 'right';
-        /**
-         * Change icon color if menu is dark
-         * @default false
-         */
-        this.isDark = false;
-    }
-    get isDivider() {
-        return isTrueBooleanInput(this.divider);
-    }
-    get isActive() {
-        return isTrueBooleanInput(this.active);
-    }
-    get isLarge() {
-        return isTrueBooleanInput(this.large);
-    }
-    get linkClass() {
-        let linkClass = `list-item ${this.isActive ? 'active' : 'dropdown-item'}`;
-        if (this.isDisabled) {
-            linkClass += ' disabled';
-        }
-        if (this.isLarge) {
-            linkClass += ' large';
-        }
-        if (this.iconName) {
-            linkClass += ` ${this.iconPosition === 'right' ? 'right-icon' : 'left-icon'}`;
-        }
-        return linkClass;
-    }
-    setDark(dark) {
-        if (this.isDark !== dark) {
-            this.isDark = dark;
-            this._changeDetectorRef.detectChanges();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItDropdownItemComponent, isStandalone: true, 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\" [id]=\"id\" [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                [svgClass]=\"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                [svgClass]=\"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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ItIconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, ItIconComponent, TranslateModule, ItLinkComponent], template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [id]=\"id\" [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                [svgClass]=\"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                [svgClass]=\"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"] }]
-        }], propDecorators: { divider: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], large: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }] } });
-
-class ItDropdownComponent extends ItAbstractComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * Dropdown mode
-         */
-        this.mode = 'button';
-        /**
-         * Fires immediately when the show instance method is called.
-         */
-        this.showEvent = new EventEmitter();
-        /**
-         * Fired when the dropdown has been made visible to the user and CSS transitions have completed.
-         */
-        this.shownEvent = new EventEmitter();
-        /**
-         * Fires immediately when the hide instance method has been called.
-         */
-        this.hideEvent = new EventEmitter();
-        /**
-         * Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
-         */
-        this.hiddenEvent = new EventEmitter();
-    }
-    get buttonClass() {
-        let btnClass = 'btn dropdown-toggle';
-        if (this.color) {
-            btnClass += ` btn-${this.color}`;
-        }
-        else {
-            btnClass += ` btn-dropdown`;
-        }
-        return btnClass;
-    }
-    get isFullWidth() {
-        return isTrueBooleanInput(this.fullWidth);
-    }
-    get isDark() {
-        return isTrueBooleanInput(this.dark);
-    }
-    ngOnChanges(changes) {
-        if (changes['dark'] && !changes['dark'].firstChange) {
-            this.setDarkItems();
-        }
-        if (changes['mode'] && !changes['mode'].firstChange) {
-            this.updateListeners();
-        }
-        super.ngOnChanges(changes);
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this.setDarkItems();
-        this.updateListeners();
-    }
-    /**
-     * Set child items dark mode
-     * @private
-     */
-    setDarkItems() {
-        this.items?.forEach(item => {
-            item.setDark(this.isDark);
-        });
-    }
-    updateListeners() {
-        if (this.dropdownButton) {
-            const element = this.dropdownButton.nativeElement;
-            this.dropdown = Dropdown.getOrCreateInstance(element);
-            element.addEventListener('show.bs.dropdown', event => this.showEvent.emit(event));
-            element.addEventListener('shown.bs.dropdown', event => this.shownEvent.emit(event));
-            element.addEventListener('hide.bs.dropdown', event => this.hideEvent.emit(event));
-            element.addEventListener('hidden.bs.dropdown', event => this.hiddenEvent.emit(event));
-        }
-    }
-    /**
-     * Toggles the dropdown menu of a given navbar or tabbed navigation.
-     */
-    toggle() {
-        this.dropdown?.toggle();
-    }
-    /**
-     * Shows the dropdown menu of a given navbar or tabbed navigation.
-     */
-    show() {
-        this.dropdown?.show();
-    }
-    /**
-     * Hides the dropdown menu of a given navbar or tabbed navigation.
-     */
-    hide() {
-        this.dropdown?.hide();
-    }
-    /**
-     * Updates the position of an element's dropdown.
-     */
-    update() {
-        this.dropdown?.update();
-    }
-    /**
-     * Destroys an element's dropdown. (Removes stored data on the DOM element)
-     */
-    dispose() {
-        this.dropdown?.dispose();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItDropdownComponent, isStandalone: true, selector: "it-dropdown", inputs: { mode: "mode", color: "color", direction: "direction", fullWidth: "fullWidth", dark: "dark" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, queries: [{ propertyName: "items", predicate: ItDropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{direction}}\">\n  <button #dropdownButton\n          *ngIf=\"mode === 'button'; else linkButton\"\n          [id]=\"id\"\n          [class]=\"buttonClass\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\">\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n    <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n  </button>\n\n  <ng-template #linkButton>\n    <a #dropdownButton\n       [id]=\"id\"\n       class=\"btn btn-dropdown dropdown-toggle\"\n       role=\"button\"\n       data-bs-toggle=\"dropdown\"\n       aria-haspopup=\"true\"\n       aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" color=\"primary\"></it-icon>\n    </a>\n  </ng-template>\n\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'it-dropdown', exportAs: 'itDropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet, NgIf], template: "<div class=\"dropdown {{direction}}\">\n  <button #dropdownButton\n          *ngIf=\"mode === 'button'; else linkButton\"\n          [id]=\"id\"\n          [class]=\"buttonClass\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\">\n    <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n    <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n  </button>\n\n  <ng-template #linkButton>\n    <a #dropdownButton\n       [id]=\"id\"\n       class=\"btn btn-dropdown dropdown-toggle\"\n       role=\"button\"\n       data-bs-toggle=\"dropdown\"\n       aria-haspopup=\"true\"\n       aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" color=\"primary\"></it-icon>\n    </a>\n  </ng-template>\n\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"] }]
-        }], propDecorators: { mode: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], dark: [{
-                type: Input
-            }], items: [{
-                type: ContentChildren,
-                args: [ItDropdownItemComponent]
-            }], showEvent: [{
-                type: Output
-            }], shownEvent: [{
-                type: Output
-            }], hideEvent: [{
-                type: Output
-            }], hiddenEvent: [{
-                type: Output
-            }], dropdownButton: [{
-                type: ViewChild,
-                args: ['dropdownButton']
-            }] } });
-
-const dropdownComponents = [ItDropdownComponent, ItDropdownItemComponent];
-class ItDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownComponent, ItDropdownItemComponent], exports: [ItDropdownComponent, ItDropdownItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownItemComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItDropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: dropdownComponents,
-                    exports: dropdownComponents
-                }]
-        }] });
-
 class ItListComponent {
     get isLinkList() {
         return isTrueBooleanInput(this.linkList);
@@ -2213,11 +2367,11 @@ class ItInputComponent extends ItAbstractFormComponent {
         this.showAutocompletion = this.type === 'search';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: "currency", percentage: "percentage", adaptive: "adaptive", autocomplete: "autocomplete", autocompleteData: "autocompleteData", autocompleteDebounceTime: "autocompleteDebounceTime" }, outputs: { autocompleteSelectedEvent: "autocompleteSelectedEvent" }, 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             [min]=\"min ?? null\"\n             [max]=\"max ?? null\"\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             [autocomplete]=\"autocomplete\"\n             [attr.aria-describedby]=\"id + '-description'\"\n             (blur)=\"markAsTouched()\" />\n\n      <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n        <span class=\"visually-hidden\">{{'it.form.increase-value' | translate}}</span>\n      </button>\n      <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n        <span class=\"visually-hidden\">{{'it.form.decrease-value' | translate}}</span>\n      </button>\n    </span>\n\n    <input *ngIf=\"type !== 'number'\"\n           [id]=\"id\"\n           [type]=\"type\"\n           [max]=\"type === 'date' ? maxDate : undefined\"\n           [min]=\"type === 'date' ? minDate : undefined\"\n           [class.form-control]=\"readonly !== 'plaintext'\"\n           [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n           [class.is-invalid]=\"isInvalid\"\n           [class.is-valid]=\"isValid\"\n           [formControl]=\"control\"\n           [placeholder]=\"placeholder\"\n           [readonly]=\"isReadonly\"\n           (keydown)=\"onKeyDown()\"\n           [autocomplete]=\"autocomplete\"\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}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: MarkMatchingTextPipe, name: "markMatchingText" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: "currency", percentage: "percentage", symbol: "symbol", adaptive: "adaptive", autocomplete: "autocomplete", autocompleteData: "autocompleteData", autocompleteDebounceTime: "autocompleteDebounceTime" }, outputs: { autocompleteSelectedEvent: "autocompleteSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n\n  <div class=\"input-group\" [class.disabled]=\"!control.enabled\" [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\" [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\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    <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"isActiveLabel\" [class.input-number-label]=\"type === 'number'\"\n    [class.empty-prepend-label]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n    {{label}}\n  </label>\n    <ng-container *ngIf=\"type === 'number'\">\n      <span *ngIf=\"currency || percentage\" class=\"input-group-text fw-semibold\">{{symbol}}</span>\n      <input type=\"number\" [id]=\"id\" [step]=\"step ?? null\" [min]=\"min ?? null\" [max]=\"max ?? null\"\n        [class.form-control]=\"readonly !== 'plaintext'\" [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\" [class.is-valid]=\"isValid\" [formControl]=\"control\" [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\" [autocomplete]=\"autocomplete\" [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{'it.form.increase-value' | translate}}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{'it.form.decrease-value' | translate}}</span>\n        </button>\n      </span>\n    </ng-container>\n    <input *ngIf=\"type !== 'number'\" [id]=\"id\" [type]=\"type\" [max]=\"type === 'date' ? maxDate : undefined\"\n      [min]=\"type === 'date' ? minDate : undefined\" [class.form-control]=\"readonly !== 'plaintext'\"\n      [class.form-control-plaintext]=\"readonly === 'plaintext'\" [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"isReadonly\"\n      (keydown)=\"onKeyDown()\" [autocomplete]=\"autocomplete\" [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\"\n        [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>", 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 .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "pipe", type: MarkMatchingTextPipe, name: "markMatchingText" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItInputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, ReactiveFormsModule, TranslateModule, AsyncPipe, ItIconComponent, MarkMatchingTextPipe, NgTemplateOutlet, NgForOf], 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             [min]=\"min ?? null\"\n             [max]=\"max ?? null\"\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             [autocomplete]=\"autocomplete\"\n             [attr.aria-describedby]=\"id + '-description'\"\n             (blur)=\"markAsTouched()\" />\n\n      <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n        <span class=\"visually-hidden\">{{'it.form.increase-value' | translate}}</span>\n      </button>\n      <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n        <span class=\"visually-hidden\">{{'it.form.decrease-value' | translate}}</span>\n      </button>\n    </span>\n\n    <input *ngIf=\"type !== 'number'\"\n           [id]=\"id\"\n           [type]=\"type\"\n           [max]=\"type === 'date' ? maxDate : undefined\"\n           [min]=\"type === 'date' ? minDate : undefined\"\n           [class.form-control]=\"readonly !== 'plaintext'\"\n           [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n           [class.is-invalid]=\"isInvalid\"\n           [class.is-valid]=\"isValid\"\n           [formControl]=\"control\"\n           [placeholder]=\"placeholder\"\n           [readonly]=\"isReadonly\"\n           (keydown)=\"onKeyDown()\"\n           [autocomplete]=\"autocomplete\"\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}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
+            args: [{ standalone: true, selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, ReactiveFormsModule, TranslateModule, AsyncPipe, ItIconComponent, MarkMatchingTextPipe, NgTemplateOutlet, NgForOf], template: "<div class=\"form-group\">\n\n  <div class=\"input-group\" [class.disabled]=\"!control.enabled\" [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\" [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\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    <label *ngIf=\"label\" [for]=\"id\" [class.active]=\"isActiveLabel\" [class.input-number-label]=\"type === 'number'\"\n    [class.empty-prepend-label]=\"!prependText.hasChildNodes() && !prepend.hasChildNodes()\">\n    {{label}}\n  </label>\n    <ng-container *ngIf=\"type === 'number'\">\n      <span *ngIf=\"currency || percentage\" class=\"input-group-text fw-semibold\">{{symbol}}</span>\n      <input type=\"number\" [id]=\"id\" [step]=\"step ?? null\" [min]=\"min ?? null\" [max]=\"max ?? null\"\n        [class.form-control]=\"readonly !== 'plaintext'\" [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\" [class.is-valid]=\"isValid\" [formControl]=\"control\" [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\" [autocomplete]=\"autocomplete\" [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{'it.form.increase-value' | translate}}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{'it.form.decrease-value' | translate}}</span>\n        </button>\n      </span>\n    </ng-container>\n    <input *ngIf=\"type !== 'number'\" [id]=\"id\" [type]=\"type\" [max]=\"type === 'date' ? maxDate : undefined\"\n      [min]=\"type === 'date' ? minDate : undefined\" [class.form-control]=\"readonly !== 'plaintext'\"\n      [class.form-control-plaintext]=\"readonly === 'plaintext'\" [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"isReadonly\"\n      (keydown)=\"onKeyDown()\" [autocomplete]=\"autocomplete\" [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\"\n        [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>", 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 .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
@@ -2240,6 +2394,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                 type: Input
             }], percentage: [{
                 type: Input
+            }], symbol: [{
+                type: Input
             }], adaptive: [{
                 type: Input
             }], autocomplete: [{
@@ -2342,7 +2498,7 @@ class ItPaginationComponent {
         this.changerEvent.emit(value); // emit new changer value
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination[currentPage][pageNumbers]", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: "simpleMode", textLinks: "textLinks", currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: "showJumpToPage" }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"pagination-wrapper\"\n     [class.justify-content-center]=\"alignment==='center'\"\n     [class.justify-content-end]=\"alignment==='end'\"\n     [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n\n  <ul *ngIf=\"pages.length\" class=\"pagination\">\n    <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n      <a class=\"page-link\" [class.text]=\"isTextLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n        <it-icon *ngIf=\"!isTextLinks\" name=\"chevron-left\" color=\"primary\"></it-icon>\n        <span class=\"visually-hidden\">\n          {{(isTextLinks ? 'it.core.page' : 'it.core.previous-page') | translate}}\n        </span>\n        <ng-container *ngIf=\"isTextLinks\">{{'it.core.previous' | translate}}</ng-container>\n      </a>\n    </li>\n\n    <ng-container *ngIf=\"isSimpleMode; else defaultView\">\n      <li class=\"page-item\"><span class=\"page-link\" aria-current=\"page\">{{currentPage + 1}}</span></li>\n      <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n      <li class=\"page-item\"><span class=\"page-link\">{{pageNumbers}}</span></li>\n      <li class=\"page-item visually-hidden\">\n        <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n          {{'it.core.page-of-total'|translate : {page: (currentPage + 1), total: pageNumbers} }}\n        </a>\n      </li>\n    </ng-container>\n    <ng-template #defaultView>\n      <ng-container *ngIf=\"pageNumbers > visiblePages && pages[0] >= 2\">\n        <li class=\"page-item\">\n          <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n        </li>\n        <li class=\"page-item\" *ngIf=\"pages[0] >= 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\" href=\"#\" (click)=\"pageChange($event, page)\">{{page}}</a>\n        </ng-template>\n      </li>\n\n      <ng-container *ngIf=\"pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers\">\n        <li class=\"page-item\" *ngIf=\"pages[pages.length - 1] < (pageNumbers - 1)\">\n          <span class=\"page-link\">...</span>\n        </li>\n        <li class=\"page-item\">\n          <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{pageNumbers}}</a>\n        </li>\n      </ng-container>\n    </ng-template>\n\n    <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n      <a class=\"page-link\" [class.text]=\"isTextLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n        <span class=\"visually-hidden\">\n          {{(isTextLinks ? 'it.core.page' : 'it.core.next-page') | translate}}\n        </span>\n        <ng-container *ngIf=\"isTextLinks\">{{'it.core.next' | translate}}</ng-container>\n        <it-icon *ngIf=\"!isTextLinks\" name=\"chevron-right\" color=\"primary\"></it-icon>\n      </a>\n    </li>\n  </ul>\n\n  <it-dropdown *ngIf=\"currentChanger !== undefined\">\n    <span button>{{currentChanger}} / {{'it.core.page' | translate | lowercase}}</span>\n    <ng-container list>\n      <it-dropdown-item *ngFor=\"let value of changerValues\" href=\"#\" externalLink=\"true\"\n                        (click)=\"changerChange($event, value)\">\n        {{value}} / {{'it.core.page' | translate | lowercase}}\n      </it-dropdown-item>\n    </ng-container>\n  </it-dropdown>\n\n  <it-input *ngIf=\"isShowJumpToPage\" type=\"number\" [min]=\"1\" [max]=\"pageNumbers\"\n            [label]=\"('it.core.go-to' | translate) + '...'\" [formControl]=\"jumpToPage\"></it-input>\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ItIconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "adaptive", "autocomplete", "autocompleteData", "autocompleteDebounceTime"], outputs: ["autocompleteSelectedEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination[currentPage][pageNumbers]", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: "simpleMode", textLinks: "textLinks", currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: "showJumpToPage" }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"pagination-wrapper\"\n     [class.justify-content-center]=\"alignment==='center'\"\n     [class.justify-content-end]=\"alignment==='end'\"\n     [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n\n  <ul *ngIf=\"pages.length\" class=\"pagination\">\n    <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n      <a class=\"page-link\" [class.text]=\"isTextLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n        <it-icon *ngIf=\"!isTextLinks\" name=\"chevron-left\" color=\"primary\"></it-icon>\n        <span class=\"visually-hidden\">\n          {{(isTextLinks ? 'it.core.page' : 'it.core.previous-page') | translate}}\n        </span>\n        <ng-container *ngIf=\"isTextLinks\">{{'it.core.previous' | translate}}</ng-container>\n      </a>\n    </li>\n\n    <ng-container *ngIf=\"isSimpleMode; else defaultView\">\n      <li class=\"page-item\"><span class=\"page-link\" aria-current=\"page\">{{currentPage + 1}}</span></li>\n      <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n      <li class=\"page-item\"><span class=\"page-link\">{{pageNumbers}}</span></li>\n      <li class=\"page-item visually-hidden\">\n        <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n          {{'it.core.page-of-total'|translate : {page: (currentPage + 1), total: pageNumbers} }}\n        </a>\n      </li>\n    </ng-container>\n    <ng-template #defaultView>\n      <ng-container *ngIf=\"pageNumbers > visiblePages && pages[0] >= 2\">\n        <li class=\"page-item\">\n          <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n        </li>\n        <li class=\"page-item\" *ngIf=\"pages[0] >= 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\" href=\"#\" (click)=\"pageChange($event, page)\">{{page}}</a>\n        </ng-template>\n      </li>\n\n      <ng-container *ngIf=\"pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers\">\n        <li class=\"page-item\" *ngIf=\"pages[pages.length - 1] < (pageNumbers - 1)\">\n          <span class=\"page-link\">...</span>\n        </li>\n        <li class=\"page-item\">\n          <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{pageNumbers}}</a>\n        </li>\n      </ng-container>\n    </ng-template>\n\n    <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n      <a class=\"page-link\" [class.text]=\"isTextLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n        <span class=\"visually-hidden\">\n          {{(isTextLinks ? 'it.core.page' : 'it.core.next-page') | translate}}\n        </span>\n        <ng-container *ngIf=\"isTextLinks\">{{'it.core.next' | translate}}</ng-container>\n        <it-icon *ngIf=\"!isTextLinks\" name=\"chevron-right\" color=\"primary\"></it-icon>\n      </a>\n    </li>\n  </ul>\n\n  <it-dropdown *ngIf=\"currentChanger !== undefined\">\n    <span button>{{currentChanger}} / {{'it.core.page' | translate | lowercase}}</span>\n    <ng-container list>\n      <it-dropdown-item *ngFor=\"let value of changerValues\" href=\"#\" externalLink=\"true\"\n                        (click)=\"changerChange($event, value)\">\n        {{value}} / {{'it.core.page' | translate | lowercase}}\n      </it-dropdown-item>\n    </ng-container>\n  </it-dropdown>\n\n  <it-input *ngIf=\"isShowJumpToPage\" type=\"number\" [min]=\"1\" [max]=\"pageNumbers\"\n            [label]=\"('it.core.go-to' | translate) + '...'\" [formControl]=\"jumpToPage\"></it-input>\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ItIconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "svgClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete", "autocompleteData", "autocompleteDebounceTime"], outputs: ["autocompleteSelectedEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItPaginationComponent, decorators: [{
             type: Component,
@@ -4326,6 +4482,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
 const core = [
     ItAccordionComponent,
     ItAlertComponent,
+    ItAvatarGroupItemComponent,
+    ItAvatarGroupComponent,
+    ItAvatarDropdownComponent,
+    ItAvatarDropdownItemComponent,
+    ItAvatarDirective,
     ItBadgeDirective,
     ItButtonDirective,
     ItCalloutComponent,
@@ -4372,6 +4533,11 @@ class ItComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: ItComponentsModule, imports: [ItAccordionComponent,
             ItAlertComponent,
+            ItAvatarGroupItemComponent,
+            ItAvatarGroupComponent,
+            ItAvatarDropdownComponent,
+            ItAvatarDropdownItemComponent,
+            ItAvatarDirective,
             ItBadgeDirective,
             ItButtonDirective,
             ItCalloutComponent,
@@ -4402,6 +4568,11 @@ class ItComponentsModule {
             ItLanguageSwitcherComponent,
             MarkMatchingTextPipe], exports: [ItAccordionComponent,
             ItAlertComponent,
+            ItAvatarGroupItemComponent,
+            ItAvatarGroupComponent,
+            ItAvatarDropdownComponent,
+            ItAvatarDropdownItemComponent,
+            ItAvatarDirective,
             ItBadgeDirective,
             ItButtonDirective,
             ItCalloutComponent,
@@ -4432,6 +4603,7 @@ class ItComponentsModule {
             ItLanguageSwitcherComponent,
             MarkMatchingTextPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ItComponentsModule, imports: [ItAlertComponent,
+            ItAvatarDropdownComponent,
             ItCarouselModule,
             ItChipComponent,
             ItDimmerModule,
@@ -4645,5 +4817,5 @@ const IconNameArray = [
  * Generated bundle index. Do not edit.
  */
 
-export { CAP_REGEX, DESIGN_ANGULAR_KIT_CONFIG, DesignAngularKitConfig, DesignAngularKitModule, EMAIL_REGEX, FileUtils, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IconNameArray, ItAccordionComponent, ItAlertComponent, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItComponentsModule, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItErrorPageComponent, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItModalComponent, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTextareaComponent, ItTooltipDirective, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, MarkMatchingTextPipe, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, URL_REGEX, VAT_NUMBER_REGEX };
+export { CAP_REGEX, DESIGN_ANGULAR_KIT_CONFIG, DesignAngularKitConfig, DesignAngularKitModule, EMAIL_REGEX, FileUtils, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItComponentsModule, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItErrorPageComponent, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItModalComponent, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTextareaComponent, ItTooltipDirective, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, MarkMatchingTextPipe, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, URL_REGEX, VAT_NUMBER_REGEX };
 //# sourceMappingURL=design-angular-kit.mjs.map