design-angular-kit 1.0.2 → 1.1.0

package/fesm2022/design-angular-kit.mjs

@@ -7,7 +7,7 @@ import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import * as i1$3 from '@angular/common';
-import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, LowerCasePipe, NgOptimizedImage } from '@angular/common';
+import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, LowerCasePipe, NgOptimizedImage, DatePipe } from '@angular/common';
 import * as i1$4 from '@angular/router';
 import { RouterLink } from '@angular/router';
 import { startWith, Subject, filter, debounceTime, distinctUntilChanged, tap, switchMap, of, merge, map, Observable, take, forkJoin, timer, takeWhile, shareReplay } from 'rxjs';
@@ -112,10 +112,10 @@ class ItAbstractComponent {
         const kebabName = name.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
         return `${kebabName}-${ItAbstractComponent.instances++}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItAbstractComponent, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAbstractComponent, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAbstractComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: () => [], propDecorators: { id: [{
@@ -225,10 +225,10 @@ class ItCollapseComponent extends ItAbstractComponent {
     dispose() {
         this.collapse?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItCollapseComponent, isStandalone: true, selector: "it-collapse", inputs: { multi: ["multi", "multi", inputToBoolean], opened: ["opened", "opened", inputToBoolean], class: "class" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itCollapse"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItCollapseComponent, isStandalone: true, selector: "it-collapse", inputs: { multi: ["multi", "multi", inputToBoolean], opened: ["opened", "opened", inputToBoolean], class: "class" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itCollapse"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCollapseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCollapseComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-collapse', exportAs: 'itCollapse', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div [id]=\"id\" class=\"collapse {{ class }}\" [class.multi-collapse]=\"multi\" #collapse>\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { multi: [{
@@ -274,10 +274,10 @@ class ItAccordionComponent extends ItCollapseComponent {
             this._changeDetectorRef.detectChanges();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItAccordionComponent, isStandalone: true, selector: "it-accordion", inputs: { title: "title" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAccordionComponent, isStandalone: true, selector: "it-accordion", inputs: { title: "title" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-accordion', exportAs: 'itAccordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { title: [{
@@ -320,10 +320,10 @@ class ItIconComponent {
     constructor() {
         this.assetBasePath = inject(IT_ASSET_BASE_PATH);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", labelWaria: "labelWaria" }, ngImport: i0, template: "<svg [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"labelWaria\" [class]=\"iconClass\">\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", labelWaria: "labelWaria" }, ngImport: i0, template: "<svg [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"labelWaria\" [class]=\"iconClass\">\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItIconComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<svg [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"labelWaria\" [class]=\"iconClass\">\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{
@@ -385,10 +385,10 @@ class ItAlertComponent extends ItAbstractComponent {
     dispose() {
         this.alert?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent], template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
         }], propDecorators: { color: [{
@@ -406,10 +406,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class ItAvatarGroupItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItAvatarGroupItemComponent, isStandalone: true, selector: "it-avatar-item", viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarGroupItemComponent, isStandalone: true, selector: "it-avatar-item", viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarGroupItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupItemComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -424,10 +424,10 @@ class ItAvatarGroupComponent {
     constructor() {
         this.linkList = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItAvatarGroupComponent, isStandalone: true, selector: "it-avatar-group", inputs: { linkList: ["linkList", "linkList", inputToBoolean] }, host: { properties: { "class.link-list-wrapper": "this.linkList" } }, queries: [{ propertyName: "avatars", predicate: ItAvatarGroupItemComponent }], ngImport: i0, template: "<ul [class]=\"linkList ? 'link-list avatar-group' : 'avatar-group-stacked'\">\n  @for (avatar of avatars; track avatar) {\n    <li>\n      <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAvatarGroupComponent, isStandalone: true, selector: "it-avatar-group", inputs: { linkList: ["linkList", "linkList", inputToBoolean] }, host: { properties: { "class.link-list-wrapper": "this.linkList" } }, queries: [{ propertyName: "avatars", predicate: ItAvatarGroupItemComponent }], ngImport: i0, template: "<ul [class]=\"linkList ? 'link-list avatar-group' : 'avatar-group-stacked'\">\n  @for (avatar of avatars; track avatar) {\n    <li>\n      <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-avatar-group', imports: [NgTemplateOutlet], template: "<ul [class]=\"linkList ? 'link-list avatar-group' : 'avatar-group-stacked'\">\n  @for (avatar of avatars; track avatar) {\n    <li>\n      <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n    </li>\n  }\n</ul>\n" }]
         }], propDecorators: { linkList: [{
@@ -459,10 +459,10 @@ class ItLinkComponent extends ItAbstractComponent {
             this._changeDetectorRef.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItLinkComponent, isStandalone: true, selector: "it-link", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!externalLink) {\n  <a [id]=\"id\" [class]=\"class\" [routerLink]=\"(disabled ? null : href)!\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n} @else {\n  <a [id]=\"id\" [class]=\"class\" [attr.href]=\"disabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItLinkComponent, isStandalone: true, selector: "it-link", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!externalLink) {\n  <a [id]=\"id\" [class]=\"class\" [routerLink]=\"(disabled ? null : href)!\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n} @else {\n  <a [id]=\"id\" [class]=\"class\" [attr.href]=\"disabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLinkComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, NgTemplateOutlet], template: "@if (!externalLink) {\n  <a [id]=\"id\" [class]=\"class\" [routerLink]=\"(disabled ? null : href)!\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n} @else {\n  <a [id]=\"id\" [class]=\"class\" [attr.href]=\"disabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { href: [{
@@ -510,10 +510,10 @@ class ItDropdownItemComponent extends ItLinkComponent {
             this._changeDetectorRef.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItLinkComponent], template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
         }], propDecorators: { divider: [{
@@ -630,10 +630,10 @@ class ItDropdownComponent extends ItAbstractComponent {
     dispose() {
         this.dropdown?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItDropdownComponent, isStandalone: true, selector: "it-dropdown", inputs: { mode: "mode", color: "color", direction: "direction", fullWidth: ["fullWidth", "fullWidth", inputToBoolean], megamenu: ["megamenu", "megamenu", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, queries: [{ propertyName: "items", predicate: ItDropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{ direction }}\" [class.nav-item]=\"mode === 'nav'\" [class.megamenu]=\"megamenu\">\n  @if (mode === 'button') {\n    <button\n      #dropdownButton\n      [id]=\"id\"\n      [class]=\"buttonClass\"\n      type=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n    </button>\n  } @else {\n    <a\n      #dropdownButton\n      [id]=\"id\"\n      [class.btn]=\"mode === 'link'\"\n      [class.btn-dropdown]=\"mode === 'link'\"\n      [class.nav-link]=\"mode === 'nav'\"\n      class=\"dropdown-toggle\"\n      role=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\"></it-icon>\n    </a>\n  }\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"fullWidth\" [class.dark]=\"dark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDropdownComponent, isStandalone: true, selector: "it-dropdown", inputs: { mode: "mode", color: "color", direction: "direction", fullWidth: ["fullWidth", "fullWidth", inputToBoolean], megamenu: ["megamenu", "megamenu", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent" }, queries: [{ propertyName: "items", predicate: ItDropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{ direction }}\" [class.nav-item]=\"mode === 'nav'\" [class.megamenu]=\"megamenu\">\n  @if (mode === 'button') {\n    <button\n      #dropdownButton\n      [id]=\"id\"\n      [class]=\"buttonClass\"\n      type=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n    </button>\n  } @else {\n    <a\n      #dropdownButton\n      [id]=\"id\"\n      [class.btn]=\"mode === 'link'\"\n      [class.btn-dropdown]=\"mode === 'link'\"\n      [class.nav-link]=\"mode === 'nav'\"\n      class=\"dropdown-toggle\"\n      role=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\"></it-icon>\n    </a>\n  }\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"fullWidth\" [class.dark]=\"dark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-dropdown', exportAs: 'itDropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "<div class=\"dropdown {{ direction }}\" [class.nav-item]=\"mode === 'nav'\" [class.megamenu]=\"megamenu\">\n  @if (mode === 'button') {\n    <button\n      #dropdownButton\n      [id]=\"id\"\n      [class]=\"buttonClass\"\n      type=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n    </button>\n  } @else {\n    <a\n      #dropdownButton\n      [id]=\"id\"\n      [class.btn]=\"mode === 'link'\"\n      [class.btn-dropdown]=\"mode === 'link'\"\n      [class.nav-link]=\"mode === 'nav'\"\n      class=\"dropdown-toggle\"\n      role=\"button\"\n      data-bs-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\">\n      <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n      <it-icon svgClass=\"icon-expand\" name=\"expand\" size=\"sm\"></it-icon>\n    </a>\n  }\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"fullWidth\" [class.dark]=\"dark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonContent>\n  <ng-content select=\"[button]\"></ng-content>\n</ng-template>\n", styles: [".link-list-heading:empty{display:none}\n"] }]
         }], propDecorators: { mode: [{
@@ -669,11 +669,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 const dropdownComponents = [ItDropdownComponent, ItDropdownItemComponent];
 class ItDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownComponent, ItDropdownItemComponent], exports: [ItDropdownComponent, ItDropdownItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownItemComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownComponent, ItDropdownItemComponent], exports: [ItDropdownComponent, ItDropdownItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, imports: [ItDropdownItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dropdownComponents,
@@ -682,10 +682,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         }] });
 
 class ItAvatarDropdownItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItAvatarDropdownItemComponent, isStandalone: true, selector: "it-avatar-dropdown-item", inputs: { link: "link", title: "title", accesskey: "accesskey", tabindex: "tabindex" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarDropdownItemComponent, isStandalone: true, selector: "it-avatar-dropdown-item", inputs: { link: "link", title: "title", accesskey: "accesskey", tabindex: "tabindex" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDropdownItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-avatar-dropdown-item', template: '<ng-template><ng-content></ng-content></ng-template>', imports: [NgTemplateOutlet], styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
         }], propDecorators: { _implicitContent: [{
@@ -704,10 +704,10 @@ class ItAvatarDropdownComponent {
     constructor() {
         this.componentClass = 'avatar avatar-dropdown';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItAvatarDropdownComponent, isStandalone: true, selector: "it-avatar-dropdown", host: { properties: { "class": "this.componentClass" } }, queries: [{ propertyName: "items", predicate: ItAvatarDropdownItemComponent }], ngImport: i0, template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAvatarDropdownComponent, isStandalone: true, selector: "it-avatar-dropdown", host: { properties: { "class": "this.componentClass" } }, queries: [{ propertyName: "items", predicate: ItAvatarDropdownItemComponent }], ngImport: i0, template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-avatar-dropdown', imports: [ItDropdownModule, NgTemplateOutlet, RouterLink], template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
         }], propDecorators: { componentClass: [{
@@ -794,10 +794,10 @@ class ItAvatarDirective {
         }
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: ItAvatarDirective, isStandalone: true, selector: "[itAvatar]", inputs: { color: "color", size: "size" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatar"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarDirective, isStandalone: true, selector: "[itAvatar]", inputs: { color: "color", size: "size" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatar"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -821,8 +821,8 @@ const avatarComponents = [
     ItAvatarDirective,
 ];
 class ItAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarGroupItemComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarGroupItemComponent,
             ItAvatarGroupComponent,
             ItAvatarDropdownComponent,
             ItAvatarDropdownItemComponent,
@@ -831,9 +831,9 @@ class ItAvatarModule {
             ItAvatarDropdownComponent,
             ItAvatarDropdownItemComponent,
             ItAvatarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarDropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarDropdownComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: avatarComponents,
@@ -856,10 +856,10 @@ class ItBadgeDirective {
         }
         return badgeClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItBadgeDirective, isStandalone: true, selector: "[itBadge]", inputs: { color: ["itBadge", "color"], rounded: ["rounded", "rounded", inputToBoolean] }, host: { properties: { "class": "this.badgeClass" } }, exportAs: ["itBadge"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItBadgeDirective, isStandalone: true, selector: "[itBadge]", inputs: { color: ["itBadge", "color"], rounded: ["rounded", "rounded", inputToBoolean] }, host: { properties: { "class": "this.badgeClass" } }, exportAs: ["itBadge"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -887,10 +887,10 @@ class ItProgressBarComponent {
         }
         return ` bg-${this.color}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItProgressBarComponent, isStandalone: true, selector: "it-progress-bar", inputs: { value: "value", showLabel: ["showLabel", "showLabel", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean], color: "color" }, ngImport: i0, template: "<div class=\"progress-bar-wrapper\">\n  @if (showLabel) {\n    <div class=\"progress-bar-label\">\n      <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n    </div>\n  }\n  <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n    @if (indeterminate) {\n      <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n    } @else {\n      <div\n        class=\"progress-bar{{ bgColor }}\"\n        role=\"progressbar\"\n        [style.width.%]=\"value\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"></div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItProgressBarComponent, isStandalone: true, selector: "it-progress-bar", inputs: { value: "value", showLabel: ["showLabel", "showLabel", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean], color: "color" }, ngImport: i0, template: "<div class=\"progress-bar-wrapper\">\n  @if (showLabel) {\n    <div class=\"progress-bar-label\">\n      <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n    </div>\n  }\n  <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n    @if (indeterminate) {\n      <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n    } @else {\n      <div\n        class=\"progress-bar{{ bgColor }}\"\n        role=\"progressbar\"\n        [style.width.%]=\"value\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"></div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressBarComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div class=\"progress-bar-wrapper\">\n  @if (showLabel) {\n    <div class=\"progress-bar-label\">\n      <span class=\"visually-hidden\">{{ 'it.core.progress' | translate }} </span>{{ value }}%\n    </div>\n  }\n  <div class=\"progress\" [class.progress-color]=\"!!color\" [class.progress-indeterminate]=\"indeterminate\">\n    @if (indeterminate) {\n      <div class=\"progress-bar{{ bgColor }}\" role=\"progressbar\"></div>\n    } @else {\n      <div\n        class=\"progress-bar{{ bgColor }}\"\n        role=\"progressbar\"\n        [style.width.%]=\"value\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"></div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { value: [{
@@ -916,10 +916,10 @@ class ItProgressButtonComponent {
     get isIndeterminate() {
         return typeof this.progress !== 'number' && !!this.progress;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItProgressButtonComponent, isStandalone: true, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (isProgress) {\n  <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n", dependencies: [{ kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItProgressButtonComponent, isStandalone: true, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (isProgress) {\n  <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n", dependencies: [{ kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItProgressButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItProgressButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'button[itButton][progress]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItProgressBarComponent], template: "<ng-content></ng-content>\n\n@if (isProgress) {\n  <it-progress-bar [value]=\"progressValue\" [indeterminate]=\"isIndeterminate\" [color]=\"progressColor\"></it-progress-bar>\n}\n" }]
         }], propDecorators: { progress: [{
@@ -935,6 +935,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 class ItButtonDirective {
     constructor(progressButtonComponent) {
         this.progressButtonComponent = progressButtonComponent;
+        /**
+         * The type attribute
+         * @default button
+         */
+        this.type = 'button';
         this.isFocus = false;
     }
     onFocus() {
@@ -968,10 +973,10 @@ class ItButtonDirective {
         }
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItButtonDirective, deps: [{ token: ItProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean] }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItButtonDirective, deps: [{ token: ItProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "type": "this.type", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -995,6 +1000,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }, {
                 type: HostBinding,
                 args: ['disabled']
+            }], type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['type']
             }], icons: [{
                 type: ContentChildren,
                 args: [ItIconComponent]
@@ -1049,10 +1059,10 @@ class ItCalloutComponent {
                 return 'info-circle';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItCalloutComponent, isStandalone: true, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon", labelWaria: "labelWaria" }, ngImport: i0, template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCalloutComponent, isStandalone: true, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon", labelWaria: "labelWaria" }, ngImport: i0, template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCalloutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-callout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItIconComponent], template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"] }]
         }], propDecorators: { label: [{
@@ -1087,10 +1097,10 @@ class ItCardComponent extends ItAbstractComponent {
          */
         this.bodyClass = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { teaser: ["teaser", "teaser", inputToBoolean], special: ["special", "special", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], background: ["background", "background", inputToBoolean], borderBottom: ["borderBottom", "borderBottom", inputToBoolean], big: ["big", "big", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { teaser: ["teaser", "teaser", inputToBoolean], special: ["special", "special", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], background: ["background", "background", inputToBoolean], borderBottom: ["borderBottom", "borderBottom", inputToBoolean], big: ["big", "big", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
         }], propDecorators: { teaser: [{
@@ -1128,10 +1138,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
  * @description element, image or text slide of carousel
  */
 class ItCarouselItemComponent extends ItAbstractComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCarouselItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItCarouselItemComponent, isStandalone: true, selector: "it-carousel-item", viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItCarouselItemComponent, isStandalone: true, selector: "it-carousel-item", viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCarouselItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-carousel-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { htmlContent: [{
@@ -1184,10 +1194,10 @@ class ItCarouselComponent {
     dispose() {
         this.carousel?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItCarouselComponent, isStandalone: true, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: ["fullCarousel", "fullCarousel", inputToBoolean], bigImg: ["bigImg", "bigImg", inputToBoolean], standardImage: ["standardImage", "standardImage", inputToBoolean], lined: ["lined", "lined", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItCarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\"\n  data-bs-carousel-splide>\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCarouselComponent, isStandalone: true, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: ["fullCarousel", "fullCarousel", inputToBoolean], bigImg: ["bigImg", "bigImg", inputToBoolean], standardImage: ["standardImage", "standardImage", inputToBoolean], lined: ["lined", "lined", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItCarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\"\n  data-bs-carousel-splide>\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-carousel', exportAs: 'itCarousel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\"\n  data-bs-carousel-splide>\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
@@ -1218,11 +1228,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 const carouselComponents = [ItCarouselComponent, ItCarouselItemComponent];
 class ItCarouselModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItCarouselModule, imports: [ItCarouselComponent, ItCarouselItemComponent], exports: [ItCarouselComponent, ItCarouselItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCarouselModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, imports: [ItCarouselComponent, ItCarouselItemComponent], exports: [ItCarouselComponent, ItCarouselItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: carouselComponents,
@@ -1334,12 +1344,12 @@ class ItChipComponent {
     clickToClose() {
         this.closeEvent.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItChipComponent, isStandalone: true, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div\n  class=\"chip\"\n  [ngClass]=\"[\n    !showCloseButton ? 'chip-simple' : 'alert',\n    size === 'lg' ? 'chip-lg' : '',\n    color ? 'chip-' + color : '',\n    disabled ? 'chip-disabled' : ''\n  ]\">\n  @if (icon) {\n    <svg class=\"icon icon-xs\">\n      <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n    </svg>\n  }\n  @if (avatar) {\n    <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n  }\n  <span class=\"chip-label\">{{ label }}</span>\n  @if (showCloseButton) {\n    <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n      <svg class=\"icon\">\n        <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n      </svg>\n      <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItChipComponent, isStandalone: true, selector: "it-chip", inputs: { label: "label", showCloseButton: "showCloseButton", size: "size", color: "color", disabled: "disabled", icon: "icon", avatar: "avatar", altAvatar: "altAvatar" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div\n  class=\"chip\"\n  [ngClass]=\"[\n    !showCloseButton ? 'chip-simple' : 'alert',\n    size === 'lg' ? 'chip-lg' : '',\n    color ? 'chip-' + color : '',\n    disabled ? 'chip-disabled' : '',\n  ]\">\n  @if (icon) {\n    <svg class=\"icon icon-xs\">\n      <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n    </svg>\n  }\n  @if (avatar) {\n    <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n  }\n  <span class=\"chip-label\">{{ label }}</span>\n  @if (showCloseButton) {\n    <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n      <svg class=\"icon\">\n        <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n      </svg>\n      <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItChipComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TranslateModule], template: "<div\n  class=\"chip\"\n  [ngClass]=\"[\n    !showCloseButton ? 'chip-simple' : 'alert',\n    size === 'lg' ? 'chip-lg' : '',\n    color ? 'chip-' + color : '',\n    disabled ? 'chip-disabled' : ''\n  ]\">\n  @if (icon) {\n    <svg class=\"icon icon-xs\">\n      <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n    </svg>\n  }\n  @if (avatar) {\n    <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n  }\n  <span class=\"chip-label\">{{ label }}</span>\n  @if (showCloseButton) {\n    <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n      <svg class=\"icon\">\n        <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n      </svg>\n      <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n  }\n</div>\n" }]
+            args: [{ standalone: true, selector: 'it-chip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TranslateModule], template: "<div\n  class=\"chip\"\n  [ngClass]=\"[\n    !showCloseButton ? 'chip-simple' : 'alert',\n    size === 'lg' ? 'chip-lg' : '',\n    color ? 'chip-' + color : '',\n    disabled ? 'chip-disabled' : '',\n  ]\">\n  @if (icon) {\n    <svg class=\"icon icon-xs\">\n      <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n    </svg>\n  }\n  @if (avatar) {\n    <div class=\"avatar size-xs\"><img [src]=\"avatar\" [alt]=\"altAvatar\" /></div>\n  }\n  <span class=\"chip-label\">{{ label }}</span>\n  @if (showCloseButton) {\n    <button (click)=\"clickToClose()\" [disabled]=\"disabled\">\n      <svg class=\"icon\">\n        <use [attr.href]=\"iconCloseHref\" [attr.xlink:href]=\"iconCloseHref\"></use>\n      </svg>\n      <span class=\"visually-hidden\">{{ 'it.core.remove' | translate }} {{ label }}</span>\n    </button>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], showCloseButton: [{
@@ -1389,15 +1399,15 @@ class ItDimmerComponent {
     ngOnInit() {
         this.elementRef?.nativeElement?.parentElement?.classList?.add('dimmable');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItDimmerComponent, isStandalone: true, selector: "it-dimmer", inputs: { active: "active", color: "color" }, ngImport: i0, template: "@if (active) {\n  <div class=\"dimmer\" @fade [ngClass]=\"[color]\">\n    <div class=\"dimmer-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItDimmerComponent, isStandalone: true, selector: "it-dimmer", inputs: { active: "active", color: "color" }, ngImport: i0, template: "@if (active) {\n  <div class=\"dimmer\" @fade [ngClass]=\"[color]\">\n    <div class=\"dimmer-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('fade', [
                 transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.92 }))]),
                 transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-dimmer', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('fade', [
@@ -1412,10 +1422,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class ItDimmerIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItDimmerIconComponent, isStandalone: true, selector: "it-dimmer-icon", ngImport: i0, template: "<div class=\"dimmer-icon\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItDimmerIconComponent, isStandalone: true, selector: "it-dimmer-icon", ngImport: i0, template: "<div class=\"dimmer-icon\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerIconComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-dimmer-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"dimmer-icon\">\n  <ng-content></ng-content>\n</div>\n" }]
         }] });
@@ -1434,10 +1444,10 @@ class ItDimmerButtonsComponent {
     get hasOneButton() {
         return this._hasOneButton;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItDimmerButtonsComponent, isStandalone: true, selector: "it-dimmer-buttons", inputs: { hasOneButton: "hasOneButton" }, ngImport: i0, template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItDimmerButtonsComponent, isStandalone: true, selector: "it-dimmer-buttons", inputs: { hasOneButton: "hasOneButton" }, ngImport: i0, template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerButtonsComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-dimmer-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"dimmer-buttons bg-dark\" [ngClass]=\"{ 'single-button': hasOneButton }\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { hasOneButton: [{
@@ -1446,11 +1456,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 const dimmerComponents = [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent];
 class ItDimmerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerModule, imports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent], exports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, imports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent], exports: [ItDimmerComponent, ItDimmerIconComponent, ItDimmerButtonsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDimmerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDimmerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dimmerComponents,
@@ -1491,10 +1501,10 @@ class ItForwardDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItForwardDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: ItForwardDirective, isStandalone: true, selector: "[itForward]", inputs: { itForward: "itForward" }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "forward" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItForwardDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItForwardDirective, isStandalone: true, selector: "[itForward]", inputs: { itForward: "itForward" }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "forward" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItForwardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItForwardDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1513,10 +1523,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class ItListComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItListComponent, isStandalone: true, selector: "it-list", inputs: { linkList: ["linkList", "linkList", inputToBoolean], linkSubList: ["linkSubList", "linkSubList", inputToBoolean], multiline: ["multiline", "multiline", inputToBoolean] }, ngImport: i0, template: "@if (!linkSubList) {\n  <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n    <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </ul>\n  </div>\n}\n@if (linkSubList) {\n  <ul class=\"link-sublist\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItListComponent, isStandalone: true, selector: "it-list", inputs: { linkList: ["linkList", "linkList", inputToBoolean], linkSubList: ["linkSubList", "linkSubList", inputToBoolean], multiline: ["multiline", "multiline", inputToBoolean] }, ngImport: i0, template: "@if (!linkSubList) {\n  <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n    <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </ul>\n  </div>\n}\n@if (linkSubList) {\n  <ul class=\"link-sublist\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (!linkSubList) {\n  <div [class.multiline]=\"multiline\" [class]=\"linkList ? 'link-list-wrapper' : 'it-list-wrapper'\">\n    <ul [class]=\"linkList ? 'link-list' : 'it-list'\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </ul>\n  </div>\n}\n@if (linkSubList) {\n  <ul class=\"link-sublist\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </ul>\n}\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n" }]
         }], propDecorators: { linkList: [{
@@ -1558,10 +1568,10 @@ class ItListItemComponent extends ItLinkComponent {
         }
         return itemClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItListItemComponent, isStandalone: true, selector: "it-list-item", inputs: { active: ["active", "active", inputToBoolean], size: "size", iconLeft: ["iconLeft", "iconLeft", inputToBoolean], iconRight: ["iconRight", "iconRight", inputToBoolean], avatar: "avatar", image: "image" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItListItemComponent, isStandalone: true, selector: "it-list-item", inputs: { active: ["active", "active", inputToBoolean], size: "size", iconLeft: ["iconLeft", "iconLeft", inputToBoolean], iconRight: ["iconRight", "iconRight", inputToBoolean], avatar: "avatar", image: "image" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItLinkComponent], template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
@@ -1583,11 +1593,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 const listComponents = [ItListComponent, ItListItemComponent];
 class ItListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItListModule, imports: [ItListComponent, ItListItemComponent], exports: [ItListComponent, ItListItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItListModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, imports: [ItListComponent, ItListItemComponent], exports: [ItListComponent, ItListItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: listComponents,
@@ -1602,10 +1612,10 @@ class ItMegamenuComponent {
          */
         this.mode = 'normal';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItMegamenuComponent, isStandalone: true, selector: "it-megamenu", inputs: { mode: "mode", header: ["header", "header", inputToBoolean], footer: ["footer", "footer", inputToBoolean] }, ngImport: i0, template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItMegamenuComponent, isStandalone: true, selector: "it-megamenu", inputs: { mode: "mode", header: ["header", "header", inputToBoolean], footer: ["footer", "footer", inputToBoolean] }, ngImport: i0, template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItMegamenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"] }]
         }], propDecorators: { mode: [{
@@ -1749,10 +1759,10 @@ class ItModalComponent extends ItAbstractComponent {
     dispose() {
         this.modal?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItModalComponent, isStandalone: true, selector: "it-modal", inputs: { closeButton: ["closeButton", "closeButton", inputToBoolean], alertModal: ["alertModal", "alertModal", inputToBoolean], dialogLinkList: ["dialogLinkList", "dialogLinkList", inputToBoolean], popconfirm: ["popconfirm", "popconfirm", inputToBoolean], scrollable: ["scrollable", "scrollable", inputToBoolean], fade: ["fade", "fade", inputToBoolean], alignment: "alignment", size: "size", backdrop: "backdrop", focus: ["focus", "focus", inputToBoolean], keyboard: ["keyboard", "keyboard", inputToBoolean], footerShadow: ["footerShadow", "footerShadow", inputToBoolean], options: "options" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", hidePreventedEvent: "hidePreventedEvent" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div\n  #modalElement\n  [id]=\"id\"\n  [class]=\"modalClass\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-hidden=\"true\"\n  [attr.aria-labelledby]=\"id + '-title'\"\n  [attr.aria-describedby]=\"id + '-description'\">\n  <div [class]=\"dialogClass\">\n    <div class=\"modal-content\" role=\"document\">\n      <div class=\"modal-header\">\n        <ng-content select=\"[beforeTitle]\"></ng-content>\n\n        <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n          <ng-content select=\"[modalTitle]\"></ng-content>\n        </h2>\n\n        @if (closeButton) {\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n        }\n      </div>\n\n      <div class=\"modal-body\">\n        <div id=\"{{ id }}-description\">\n          <ng-content select=\"[description]\"></ng-content>\n        </div>\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItModalComponent, isStandalone: true, selector: "it-modal", inputs: { closeButton: ["closeButton", "closeButton", inputToBoolean], alertModal: ["alertModal", "alertModal", inputToBoolean], dialogLinkList: ["dialogLinkList", "dialogLinkList", inputToBoolean], popconfirm: ["popconfirm", "popconfirm", inputToBoolean], scrollable: ["scrollable", "scrollable", inputToBoolean], fade: ["fade", "fade", inputToBoolean], alignment: "alignment", size: "size", backdrop: "backdrop", focus: ["focus", "focus", inputToBoolean], keyboard: ["keyboard", "keyboard", inputToBoolean], footerShadow: ["footerShadow", "footerShadow", inputToBoolean], options: "options" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", hidePreventedEvent: "hidePreventedEvent" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div\n  #modalElement\n  [id]=\"id\"\n  [class]=\"modalClass\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-hidden=\"true\"\n  [attr.aria-labelledby]=\"id + '-title'\"\n  [attr.aria-describedby]=\"id + '-description'\">\n  <div [class]=\"dialogClass\">\n    <div class=\"modal-content\" role=\"document\">\n      <div class=\"modal-header\">\n        <ng-content select=\"[beforeTitle]\"></ng-content>\n\n        <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n          <ng-content select=\"[modalTitle]\"></ng-content>\n        </h2>\n\n        @if (closeButton) {\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n        }\n      </div>\n\n      <div class=\"modal-body\">\n        <div id=\"{{ id }}-description\">\n          <ng-content select=\"[description]\"></ng-content>\n        </div>\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItModalComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-modal', exportAs: 'itModal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div\n  #modalElement\n  [id]=\"id\"\n  [class]=\"modalClass\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-hidden=\"true\"\n  [attr.aria-labelledby]=\"id + '-title'\"\n  [attr.aria-describedby]=\"id + '-description'\">\n  <div [class]=\"dialogClass\">\n    <div class=\"modal-content\" role=\"document\">\n      <div class=\"modal-header\">\n        <ng-content select=\"[beforeTitle]\"></ng-content>\n\n        <h2 class=\"modal-title h5\" id=\"{{ id }}-title\">\n          <ng-content select=\"[modalTitle]\"></ng-content>\n        </h2>\n\n        @if (closeButton) {\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal' | translate\"></button>\n        }\n      </div>\n\n      <div class=\"modal-body\">\n        <div id=\"{{ id }}-description\">\n          <ng-content select=\"[description]\"></ng-content>\n        </div>\n        <ng-content></ng-content>\n      </div>\n\n      <div class=\"modal-footer\" [class.modal-footer-shadow]=\"footerShadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"] }]
         }], propDecorators: { closeButton: [{
@@ -1929,10 +1939,10 @@ class ItNotificationService {
             position,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNotificationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2024,10 +2034,10 @@ class ItNotificationsComponent {
                 return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNotificationsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ItNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItNotificationsComponent, isStandalone: true, selector: "it-notifications", inputs: { duration: "duration", position: "position", dismissible: ["dismissible", "dismissible", inputToBoolean] }, ngImport: i0, template: "@for (notification of notifications; track notification.id) {\n  <div\n    [id]=\"notification.id\"\n    class=\"notification {{ notification.position }} {{ notification.type }}\"\n    [class.with-icon]=\"!!notification.icon\"\n    [class.dismissable]=\"notification.dismissible\"\n    role=\"alert\"\n    [attr.aria-labelledby]=\"notification.id + '-title'\">\n    <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n      @if (notification.icon) {\n        <it-icon [name]=\"notification.icon\"></it-icon>\n      }\n      <ng-container>{{ notification.title }}</ng-container>\n    </h2>\n    @if (notification.message) {\n      <p>{{ notification.message }}</p>\n    }\n    @if (notification.dismissible) {\n      <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n        <it-icon name=\"close\"></it-icon>\n        <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ItNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItNotificationsComponent, isStandalone: true, selector: "it-notifications", inputs: { duration: "duration", position: "position", dismissible: ["dismissible", "dismissible", inputToBoolean] }, ngImport: i0, template: "@for (notification of notifications; track notification.id) {\n  <div\n    [id]=\"notification.id\"\n    class=\"notification {{ notification.position }} {{ notification.type }}\"\n    [class.with-icon]=\"!!notification.icon\"\n    [class.dismissable]=\"notification.dismissible\"\n    role=\"alert\"\n    [attr.aria-labelledby]=\"notification.id + '-title'\">\n    <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n      @if (notification.icon) {\n        <it-icon [name]=\"notification.icon\"></it-icon>\n      }\n      <ng-container>{{ notification.title }}</ng-container>\n    </h2>\n    @if (notification.message) {\n      <p>{{ notification.message }}</p>\n    }\n    @if (notification.dismissible) {\n      <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n        <it-icon name=\"close\"></it-icon>\n        <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [".notification{z-index:10000}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNotificationsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNotificationsComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-notifications', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule], template: "@for (notification of notifications; track notification.id) {\n  <div\n    [id]=\"notification.id\"\n    class=\"notification {{ notification.position }} {{ notification.type }}\"\n    [class.with-icon]=\"!!notification.icon\"\n    [class.dismissable]=\"notification.dismissible\"\n    role=\"alert\"\n    [attr.aria-labelledby]=\"notification.id + '-title'\">\n    <h2 [id]=\"notification.id + '-title'\" class=\"h5\">\n      @if (notification.icon) {\n        <it-icon [name]=\"notification.icon\"></it-icon>\n      }\n      <ng-container>{{ notification.title }}</ng-container>\n    </h2>\n    @if (notification.message) {\n      <p>{{ notification.message }}</p>\n    }\n    @if (notification.dismissible) {\n      <button type=\"button\" class=\"btn notification-close\" (click)=\"hideNotification(notification.id)\">\n        <it-icon name=\"close\"></it-icon>\n        <span class=\"visually-hidden\">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [".notification{z-index:10000}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ItNotificationService }], propDecorators: { duration: [{
@@ -2199,10 +2209,10 @@ class ItAbstractFormComponent extends ItAbstractComponent {
         }
         return this.control.getError(errorCode, path);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAbstractFormComponent, deps: [{ token: i1.TranslateService }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItAbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: ["disabled", "disabled", inputToBoolean] }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, deps: [{ token: i1.TranslateService }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItAbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: ["disabled", "disabled", inputToBoolean] }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAbstractFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i1$1.NgControl, decorators: [{
@@ -2243,6 +2253,10 @@ const VAT_NUMBER_REGEX = /^[0-9]{11}$/;
  * Italian CAP Regex
  */
 const CAP_REGEX = /^[0-9]{5}$/;
+/**
+ * Italian Plate Regex
+ */
+const PLATE_REGEX = /^[A-Za-z]{2}\d{3}[A-Za-z]{2}$/i;
 /**
  * IBAN Regex
  * https://blog.marketto.it/en/2018/06/validate-any-country-iban/
@@ -2379,6 +2393,12 @@ class ItValidators {
     static get iban() {
         return ItValidators.customPattern(IBAN_REGEX, { invalidIban: true });
     }
+    /**
+     * Italian plate validator
+     */
+    static get plate() {
+        return ItValidators.customPattern(PLATE_REGEX, { invalidPlate: true });
+    }
     /**
      * Check if value is a valid RegExp
      */
@@ -2479,6 +2499,9 @@ class ItInputComponent extends ItAbstractFormComponent {
         if (this.hasError('invalidIban')) {
             return this._translateService.get('it.errors.iban-invalid');
         }
+        if (this.hasError('invalidPlate')) {
+            return this._translateService.get('it.errors.plate-invalid');
+        }
         if (this.hasError('invalidRegex')) {
             return this._translateService.get('it.errors.regex-invalid');
         }
@@ -2535,10 +2558,10 @@ class ItInputComponent extends ItAbstractFormComponent {
         }
         this.control.setValue(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input: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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input: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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItInputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TranslateModule, AsyncPipe], template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input: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: [{
@@ -2655,10 +2678,10 @@ class ItPaginationComponent {
         event.preventDefault();
         this.changerEvent.emit(value); // emit new changer value
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPaginationComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, LowerCasePipe, ItDropdownModule, ItInputComponent, ReactiveFormsModule], template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n" }]
         }], ctorParameters: () => [], propDecorators: { currentPage: [{
@@ -2721,7 +2744,7 @@ class ItPopoverDirective {
      */
     set popoverContainer(container) {
         if (container) {
-            this.element.setAttribute('data-container', container);
+            this.element.setAttribute('data-bs-container', container);
         }
     }
     /**
@@ -2826,10 +2849,10 @@ class ItPopoverDirective {
     update() {
         this.popover?.disable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItPopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItPopoverDirective, isStandalone: true, selector: "[itPopover]", inputs: { content: ["itPopover", "content"], popoverTitle: "popoverTitle", popoverPlacement: "popoverPlacement", popoverContainer: "popoverContainer", popoverHtml: ["popoverHtml", "popoverHtml", inputToBoolean], popoverTrigger: "popoverTrigger" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itPopover"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPopoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItPopoverDirective, isStandalone: true, selector: "[itPopover]", inputs: { content: ["itPopover", "content"], popoverTitle: "popoverTitle", popoverPlacement: "popoverPlacement", popoverContainer: "popoverContainer", popoverHtml: ["popoverHtml", "popoverHtml", inputToBoolean], popoverTrigger: "popoverTrigger" }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itPopover"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2870,10 +2893,10 @@ class ItSpinnerComponent {
          */
         this.active = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItSpinnerComponent, isStandalone: true, selector: "it-spinner", inputs: { active: ["active", "active", inputToBoolean], small: ["small", "small", inputToBoolean], double: ["double", "double", inputToBoolean] }, ngImport: i0, template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n  @if (double) {\n    <div class=\"progress-spinner-inner\"></div>\n    <div class=\"progress-spinner-inner\"></div>\n  }\n  <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSpinnerComponent, isStandalone: true, selector: "it-spinner", inputs: { active: ["active", "active", inputToBoolean], small: ["small", "small", inputToBoolean], double: ["double", "double", inputToBoolean] }, ngImport: i0, template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n  @if (double) {\n    <div class=\"progress-spinner-inner\"></div>\n    <div class=\"progress-spinner-inner\"></div>\n  }\n  <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSpinnerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-spinner', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div class=\"progress-spinner\" [class.progress-spinner-double]=\"double\" [class.progress-spinner-active]=\"active\" [class.size-sm]=\"small\">\n  @if (double) {\n    <div class=\"progress-spinner-inner\"></div>\n    <div class=\"progress-spinner-inner\"></div>\n  }\n  <span class=\"visually-hidden\">{{ 'it.core.loading' | translate }}...</span>\n</div>\n" }]
         }], propDecorators: { active: [{
@@ -2888,10 +2911,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class ItSteppersItemComponent extends ItAbstractComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItSteppersItemComponent, isStandalone: true, selector: "it-steppers-item", inputs: { label: "label", icon: "icon" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItSteppersItemComponent, isStandalone: true, selector: "it-steppers-item", inputs: { label: "label", icon: "icon" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-steppers-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { label: [{
@@ -2943,10 +2966,10 @@ class ItSteppersContainerComponent {
     ngOnDestroy() {
         this.stepsSubscriptions?.forEach(step => step.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersContainerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-steppers-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet, TranslateModule, ItButtonDirective, ItProgressBarComponent, ItProgressButtonComponent], template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { activeStep: [{
@@ -3010,11 +3033,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 const steppersComponents = [ItSteppersContainerComponent, ItSteppersItemComponent];
 class ItSteppersModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent, ItSteppersItemComponent], exports: [ItSteppersContainerComponent, ItSteppersItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent, ItSteppersItemComponent], exports: [ItSteppersContainerComponent, ItSteppersItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, imports: [ItSteppersContainerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSteppersModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: steppersComponents,
@@ -3034,10 +3057,10 @@ class ItTabItemComponent extends ItAbstractComponent {
         super.ngAfterViewInit();
         this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItTabItemComponent, isStandalone: true, selector: "it-tab-item", inputs: { label: "label", icon: "icon", active: ["active", "active", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItTabItemComponent, isStandalone: true, selector: "it-tab-item", inputs: { label: "label", icon: "icon", active: ["active", "active", inputToBoolean], disabled: ["disabled", "disabled", inputToBoolean], class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-tab-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { label: [{
@@ -3058,6 +3081,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class ItTabContainerComponent extends ItAbstractComponent {
+    constructor() {
+        super();
+        this.tabSelected = new EventEmitter();
+    }
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this.tabs?.changes
@@ -3088,13 +3115,16 @@ class ItTabContainerComponent extends ItAbstractComponent {
     ngOnDestroy() {
         this.tabSubscriptions?.forEach(sub => sub.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItTabContainerComponent, isStandalone: true, selector: "it-tab-container", inputs: { auto: ["auto", "auto", inputToBoolean], iconText: ["iconText", "iconText", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "tabs", predicate: ItTabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (tabs) {\n  <ul class=\"nav nav-tabs\" [class.auto]=\"auto\" [class.nav-tabs-icon-text]=\"iconText\" [class.nav-dark]=\"dark\" role=\"tablist\">\n    @for (tab of tabs; track tab.id) {\n      <li class=\"nav-item\">\n        <a\n          #tabNavLinks\n          [id]=\"tab.id + '-tab-link'\"\n          role=\"tab\"\n          class=\"nav-link\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [attr.href]=\"'#' + tab.id + '-tab'\"\n          [attr.aria-controls]=\"tab.id + '-tab'\">\n          @if (tab.icon) {\n            <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n          }\n          {{ tab.label }}\n        </a>\n      </li>\n    }\n  </ul>\n}\n\n@if (tabs) {\n  <div class=\"tab-content\">\n    @for (tab of tabs; track tab.id) {\n      <div\n        [id]=\"tab.id + '-tab'\"\n        class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n        [class.active]=\"tab.active\"\n        [class.show]=\"tab.active\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n        <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onTab(tab) {
+        this.tabSelected.emit(tab);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTabContainerComponent, isStandalone: true, selector: "it-tab-container", inputs: { auto: ["auto", "auto", inputToBoolean], iconText: ["iconText", "iconText", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, outputs: { tabSelected: "tabSelected" }, queries: [{ propertyName: "tabs", predicate: ItTabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (tabs) {\n  <ul class=\"nav nav-tabs\" [class.auto]=\"auto\" [class.nav-tabs-icon-text]=\"iconText\" [class.nav-dark]=\"dark\" role=\"tablist\">\n    @for (tab of tabs; track tab.id) {\n      <li class=\"nav-item\">\n        <a\n          #tabNavLinks\n          [id]=\"tab.id + '-tab-link'\"\n          role=\"tab\"\n          class=\"nav-link\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [attr.href]=\"'#' + tab.id + '-tab'\"\n          [attr.aria-controls]=\"tab.id + '-tab'\"\n          (click)=\"onTab(tab)\">\n          @if (tab.icon) {\n            <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n          }\n          {{ tab.label }}\n        </a>\n      </li>\n    }\n  </ul>\n}\n\n@if (tabs) {\n  <div class=\"tab-content\">\n    @for (tab of tabs; track tab.id) {\n      <div\n        [id]=\"tab.id + '-tab'\"\n        class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n        [class.active]=\"tab.active\"\n        [class.show]=\"tab.active\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n        <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabContainerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "@if (tabs) {\n  <ul class=\"nav nav-tabs\" [class.auto]=\"auto\" [class.nav-tabs-icon-text]=\"iconText\" [class.nav-dark]=\"dark\" role=\"tablist\">\n    @for (tab of tabs; track tab.id) {\n      <li class=\"nav-item\">\n        <a\n          #tabNavLinks\n          [id]=\"tab.id + '-tab-link'\"\n          role=\"tab\"\n          class=\"nav-link\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [attr.href]=\"'#' + tab.id + '-tab'\"\n          [attr.aria-controls]=\"tab.id + '-tab'\">\n          @if (tab.icon) {\n            <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n          }\n          {{ tab.label }}\n        </a>\n      </li>\n    }\n  </ul>\n}\n\n@if (tabs) {\n  <div class=\"tab-content\">\n    @for (tab of tabs; track tab.id) {\n      <div\n        [id]=\"tab.id + '-tab'\"\n        class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n        [class.active]=\"tab.active\"\n        [class.show]=\"tab.active\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n        <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n      </div>\n    }\n  </div>\n}\n" }]
-        }], propDecorators: { auto: [{
+            args: [{ standalone: true, selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "@if (tabs) {\n  <ul class=\"nav nav-tabs\" [class.auto]=\"auto\" [class.nav-tabs-icon-text]=\"iconText\" [class.nav-dark]=\"dark\" role=\"tablist\">\n    @for (tab of tabs; track tab.id) {\n      <li class=\"nav-item\">\n        <a\n          #tabNavLinks\n          [id]=\"tab.id + '-tab-link'\"\n          role=\"tab\"\n          class=\"nav-link\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [attr.href]=\"'#' + tab.id + '-tab'\"\n          [attr.aria-controls]=\"tab.id + '-tab'\"\n          (click)=\"onTab(tab)\">\n          @if (tab.icon) {\n            <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n          }\n          {{ tab.label }}\n        </a>\n      </li>\n    }\n  </ul>\n}\n\n@if (tabs) {\n  <div class=\"tab-content\">\n    @for (tab of tabs; track tab.id) {\n      <div\n        [id]=\"tab.id + '-tab'\"\n        class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n        [class.active]=\"tab.active\"\n        [class.show]=\"tab.active\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n        <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { auto: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
             }], iconText: [{
@@ -3109,15 +3139,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }], tabNavLinks: [{
                 type: ViewChildren,
                 args: ['tabNavLinks']
+            }], tabSelected: [{
+                type: Output
             }] } });
 
 const tabComponents = [ItTabContainerComponent, ItTabItemComponent];
 class ItTabModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItTabModule, imports: [ItTabContainerComponent, ItTabItemComponent], exports: [ItTabContainerComponent, ItTabItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, imports: [ItTabContainerComponent, ItTabItemComponent], exports: [ItTabContainerComponent, ItTabItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTabModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: tabComponents,
@@ -3133,10 +3165,10 @@ class ItTableComponent {
          */
         this.responsive = 'responsive';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItTableComponent, isStandalone: true, selector: "it-table", inputs: { color: "color", headColor: "headColor", alignment: "alignment", striped: ["striped", "striped", inputToBoolean], hover: ["hover", "hover", inputToBoolean], bordered: ["bordered", "bordered", inputToBoolean], borderless: ["borderless", "borderless", inputToBoolean], compact: ["compact", "compact", inputToBoolean], captionTop: ["captionTop", "captionTop", inputToBoolean], responsive: "responsive" }, ngImport: i0, template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n  <table\n    class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n    [class.table-striped]=\"striped\"\n    [class.table-hover]=\"hover\"\n    [class.table-bordered]=\"bordered\"\n    [class.table-borderless]=\"borderless\"\n    [class.table-sm]=\"compact\"\n    [class.caption-top]=\"captionTop\">\n    <caption>\n      <ng-content select=\"[caption]\"></ng-content>\n    </caption>\n    <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n      <ng-content select=\"[thead]\"></ng-content>\n    </thead>\n    <tbody>\n      <ng-content select=\"[tbody]\"></ng-content>\n    </tbody>\n    <tfoot>\n      <ng-content select=\"[tfoot]\"></ng-content>\n    </tfoot>\n  </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItTableComponent, isStandalone: true, selector: "it-table", inputs: { color: "color", headColor: "headColor", alignment: "alignment", striped: ["striped", "striped", inputToBoolean], hover: ["hover", "hover", inputToBoolean], bordered: ["bordered", "bordered", inputToBoolean], borderless: ["borderless", "borderless", inputToBoolean], compact: ["compact", "compact", inputToBoolean], captionTop: ["captionTop", "captionTop", inputToBoolean], responsive: "responsive" }, ngImport: i0, template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n  <table\n    class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n    [class.table-striped]=\"striped\"\n    [class.table-hover]=\"hover\"\n    [class.table-bordered]=\"bordered\"\n    [class.table-borderless]=\"borderless\"\n    [class.table-sm]=\"compact\"\n    [class.caption-top]=\"captionTop\">\n    <caption>\n      <ng-content select=\"[caption]\"></ng-content>\n    </caption>\n    <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n      <ng-content select=\"[thead]\"></ng-content>\n    </thead>\n    <tbody>\n      <ng-content select=\"[tbody]\"></ng-content>\n    </tbody>\n    <tfoot>\n      <ng-content select=\"[tfoot]\"></ng-content>\n    </tfoot>\n  </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div [class]=\"responsive ? 'table-' + responsive : undefined\">\n  <table\n    class=\"table{{ color ? ' table-' + color : '' }}{{ alignment ? ' ' + alignment : '' }}\"\n    [class.table-striped]=\"striped\"\n    [class.table-hover]=\"hover\"\n    [class.table-bordered]=\"bordered\"\n    [class.table-borderless]=\"borderless\"\n    [class.table-sm]=\"compact\"\n    [class.caption-top]=\"captionTop\">\n    <caption>\n      <ng-content select=\"[caption]\"></ng-content>\n    </caption>\n    <thead [class]=\"headColor ? 'table-' + headColor : undefined\">\n      <ng-content select=\"[thead]\"></ng-content>\n    </thead>\n    <tbody>\n      <ng-content select=\"[tbody]\"></ng-content>\n    </tbody>\n    <tfoot>\n      <ng-content select=\"[tfoot]\"></ng-content>\n    </tfoot>\n  </table>\n</div>\n", styles: ["caption:empty{display:none}caption:empty~thead{border-top:none!important}\n"] }]
         }], propDecorators: { color: [{
@@ -3243,10 +3275,10 @@ class ItSortDirective {
     ngOnDestroy() {
         this._stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSortDirective, deps: [{ token: IT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItSortDirective, isStandalone: true, selector: "[itSort]", inputs: { active: ["itSortActive", "active"], start: ["itSortStart", "start"], direction: ["itSortDirection", "direction"], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute] }, outputs: { sortChange: "sortChange" }, host: { properties: { "class": "this.sortDirectiveClass" } }, exportAs: ["itSort"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortDirective, deps: [{ token: IT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItSortDirective, isStandalone: true, selector: "[itSort]", inputs: { active: ["itSortActive", "active"], start: ["itSortStart", "start"], direction: ["itSortDirection", "direction"], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute] }, outputs: { sortChange: "sortChange" }, host: { properties: { "class": "this.sortDirectiveClass" } }, exportAs: ["itSort"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3379,10 +3411,10 @@ class ItSortHeaderComponent {
             this._changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSortHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ItSortDirective, optional: true }, { token: IT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItSortHeaderComponent, isStandalone: true, selector: "[it-sort-header]", inputs: { id: ["it-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute] }, host: { listeners: { "click": "_handleClick()" }, properties: { "class": "this.sortHeaderClass", "class.it-sort-header-disabled": "this.isDisabled", "attr.aria-sort": "this.ariaSortAttribute" } }, exportAs: ["itSortHeader"], ngImport: i0, template: "<!--\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\n  will be read out as the user is navigating the table's cell (see #13012).\n\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n  class=\"it-sort-header-container it-focus-indicator\"\n  [class.it-sort-header-sorted]=\"isSorted\"\n  [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"isDisabled ? null : 0\"\n  [attr.role]=\"isDisabled ? null : 'button'\">\n  <!--\n    We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n    Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\n  -->\n  <div class=\"it-sort-header-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ItSortDirective, optional: true }, { token: IT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItSortHeaderComponent, isStandalone: true, selector: "[it-sort-header]", inputs: { id: ["it-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], disableSortClear: ["disableSortClear", "disableSortClear", booleanAttribute] }, host: { listeners: { "click": "_handleClick()" }, properties: { "class": "this.sortHeaderClass", "class.it-sort-header-disabled": "this.isDisabled", "attr.aria-sort": "this.ariaSortAttribute" } }, exportAs: ["itSortHeader"], ngImport: i0, template: "<!--\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\n  will be read out as the user is navigating the table's cell (see #13012).\n\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n  class=\"it-sort-header-container it-focus-indicator\"\n  [class.it-sort-header-sorted]=\"isSorted\"\n  [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"isDisabled ? null : 0\"\n  [attr.role]=\"isDisabled ? null : 'button'\">\n  <!--\n    We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n    Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\n  -->\n  <div class=\"it-sort-header-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSortHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSortHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: '[it-sort-header]', exportAs: 'itSortHeader', standalone: true, imports: [ItIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\n  will be read out as the user is navigating the table's cell (see #13012).\n\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div\n  class=\"it-sort-header-container it-focus-indicator\"\n  [class.it-sort-header-sorted]=\"isSorted\"\n  [class.it-sort-header-position-before]=\"arrowPosition === 'before'\"\n  [attr.tabindex]=\"isDisabled ? null : 0\"\n  [attr.role]=\"isDisabled ? null : 'button'\">\n  <!--\n    We have to keep it due to a large number of screenshot diff failures. It should be removed eventually.\n    Note that the difference isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\n  -->\n  <div class=\"it-sort-header-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <it-icon class=\"it-sort-arrow\" size=\"sm\" [name]=\"arrowIconClass\" />\n</div>\n", styles: [".it-sort-header-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;letter-spacing:normal;outline:0}.it-sort-header-disabled .it-sort-header-container{cursor:default}.it-sort-header-disabled .it-sort-header-container .it-sort-arrow{opacity:0!important;fill-opacity:0!important}.it-sort-header-container:before{margin:-5px}.it-sort-header-container.it-sort-header-position-before{flex-direction:row-reverse;justify-content:left;gap:.5rem}.it-sort-header-container .it-sort-arrow{opacity:0;fill-opacity:0;transition:fill-opacity .3s ease-out,opacity .3s ease-out;-moz-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-webkit-transition:fill-opacity .3s ease-out,opacity .3s ease-out;-o-transition:fill-opacity .3s ease-out,opacity .3s ease-out}.it-sort-header-container:hover .it-sort-arrow{opacity:.5;fill-opacity:.5}.it-sort-header-container.it-sort-header-sorted .it-sort-arrow{opacity:1!important;fill-opacity:1!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ItSortDirective, decorators: [{
@@ -3421,11 +3453,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 const tableComponents = [ItTableComponent, ItSortDirective, ItSortHeaderComponent];
 class ItTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItTableModule, imports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent], exports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTableModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, imports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent], exports: [ItTableComponent, ItSortDirective, ItSortHeaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: tableComponents,
@@ -3542,10 +3574,10 @@ class ItTooltipDirective {
     update() {
         this.tooltip?.disable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItTooltipDirective, isStandalone: true, selector: "[itTooltip]", inputs: { title: ["itTooltip", "title"], tooltipPlacement: "tooltipPlacement", tooltipHtml: ["tooltipHtml", "tooltipHtml", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itTooltip"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItTooltipDirective, isStandalone: true, selector: "[itTooltip]", inputs: { title: ["itTooltip", "title"], tooltipPlacement: "tooltipPlacement", tooltipHtml: ["tooltipHtml", "tooltipHtml", inputToBoolean] }, outputs: { showEvent: "showEvent", shownEvent: "shownEvent", hideEvent: "hideEvent", hiddenEvent: "hiddenEvent", insertedEvent: "insertedEvent" }, exportAs: ["itTooltip"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3590,10 +3622,10 @@ class ItCheckboxComponent extends ItAbstractFormComponent {
         this.writeValue(value);
         return this.onChange(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCheckboxComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n" }]
         }], propDecorators: { toggle: [{
@@ -3714,10 +3746,10 @@ class ItPasswordInputComponent extends ItAbstractFormComponent {
         }
         return this._translateService.get(keys, { minLength: this.minLength }).pipe(map(labels => Object.values(labels).join(', ')));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItPasswordInputComponent, isStandalone: true, selector: "it-password-input", inputs: { required: "required", minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: ["showStrengthMeter", "showStrengthMeter", inputToBoolean], confirmPasswordField: ["confirmPasswordField", "confirmPasswordField", inputToBoolean], autocomplete: "autocomplete" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <input\n    #input\n    [id]=\"id\"\n    type=\"password\"\n    class=\"form-control input-password\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-describedby]=\"id + '-description'\"\n    [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n  <span class=\"password-icon\" aria-hidden=\"true\">\n    <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n    <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n  </span>\n\n  @if (isInvalid) {\n    <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n\n  @if (description !== undefined && !isStrengthMeter) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">\n      {{ description !== true ? description : (strengthMeterDescription | async) }}\n    </small>\n  }\n\n  <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n    {{ 'it.form.caps-inserted' | translate }}\n  </small>\n\n  @if (isStrengthMeter) {\n    <div class=\"password-strength-meter\">\n      <small\n        [id]=\"id + '-description'\"\n        class=\"form-text text-muted\"\n        [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n        [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n        [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n        [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n      </small>\n      <div class=\"password-meter progress rounded-0 position-absolute\">\n        <div class=\"row position-absolute w-100 m-0\">\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n        </div>\n        <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItPasswordInputComponent, isStandalone: true, selector: "it-password-input", inputs: { required: "required", minLength: "minLength", useNumber: "useNumber", useCapitalCase: "useCapitalCase", useSmallCase: "useSmallCase", useSpecialCharacters: "useSpecialCharacters", placeholder: "placeholder", description: "description", showStrengthMeter: ["showStrengthMeter", "showStrengthMeter", inputToBoolean], confirmPasswordField: ["confirmPasswordField", "confirmPasswordField", inputToBoolean], autocomplete: "autocomplete" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <input\n    #input\n    [id]=\"id\"\n    type=\"password\"\n    class=\"form-control input-password\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-describedby]=\"id + '-description'\"\n    [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n  <span class=\"password-icon\" aria-hidden=\"true\">\n    <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n    <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n  </span>\n\n  @if (isInvalid) {\n    <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n\n  @if (description !== undefined && !isStrengthMeter) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">\n      {{ description !== true ? description : (strengthMeterDescription | async) }}\n    </small>\n  }\n\n  <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n    {{ 'it.form.caps-inserted' | translate }}\n  </small>\n\n  @if (isStrengthMeter) {\n    <div class=\"password-strength-meter\">\n      <small\n        [id]=\"id + '-description'\"\n        class=\"form-text text-muted\"\n        [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n        [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n        [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n        [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n      </small>\n      <div class=\"password-meter progress rounded-0 position-absolute\">\n        <div class=\"row position-absolute w-100 m-0\">\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n        </div>\n        <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItPasswordInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItPasswordInputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-password-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, ItIconComponent, AsyncPipe, TranslateModule], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <input\n    #input\n    [id]=\"id\"\n    type=\"password\"\n    class=\"form-control input-password\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-describedby]=\"id + '-description'\"\n    [autocomplete]=\"confirmPasswordField ? 'off' : autocomplete\" />\n\n  <span class=\"password-icon\" aria-hidden=\"true\">\n    <it-icon name=\"password-visible\" size=\"sm\" class=\"password-icon-visible\"></it-icon>\n    <it-icon name=\"password-invisible\" size=\"sm\" class=\"password-icon-invisible d-none\"></it-icon>\n  </span>\n\n  @if (isInvalid) {\n    <div [id]=\"id + '-error'\" class=\"form-feedback just-validate-error-label\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n\n  @if (description !== undefined && !isStrengthMeter) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">\n      {{ description !== true ? description : (strengthMeterDescription | async) }}\n    </small>\n  }\n\n  <small class=\"password-caps form-text text-warning position-absolute bg-white w-100\">\n    {{ 'it.form.caps-inserted' | translate }}\n  </small>\n\n  @if (isStrengthMeter) {\n    <div class=\"password-strength-meter\">\n      <small\n        [id]=\"id + '-description'\"\n        class=\"form-text text-muted\"\n        [attr.data-bs-short-pass]=\"'it.form.password-strength-meter.password-short' | translate\"\n        [attr.data-bs-bad-pas]=\"'it.form.password-strength-meter.password-bad' | translate\"\n        [attr.data-bs-good-pass]=\"'it.form.password-strength-meter.password-good' | translate\"\n        [attr.data-bs-strong-pass]=\"'it.form.password-strength-meter.password-strong' | translate\">\n        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}\n      </small>\n      <div class=\"password-meter progress rounded-0 position-absolute\">\n        <div class=\"row position-absolute w-100 m-0\">\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n          <div class=\"col-3 border-start border-end border-white\"></div>\n        </div>\n        <div class=\"progress-bar bg-muted\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
         }], propDecorators: { required: [{
@@ -3780,10 +3812,10 @@ class ItRadioButtonComponent extends ItAbstractFormComponent {
         this.writeValue(this.value);
         return this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItRadioButtonComponent, isStandalone: true, selector: "it-radio-button", inputs: { value: "value", inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], forceRadioName: "forceRadioName" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      class=\"form-check-input\"\n      [name]=\"name\"\n      [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\"\n      [formControl]=\"control\"\n      [attr.aria-describedby]=\"id + '-help'\" />\n\n    <label class=\"form-check-label\" [for]=\"id\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      @if (!customLabel.hasChildNodes()) {\n        {{ label }}\n      }\n    </label>\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <div #customError>\n          <ng-content select=\"[error]\"></ng-content>\n        </div>\n        @if (!customError.hasChildNodes()) {\n          {{ invalidMessage | async }}\n        }\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRadioButtonComponent, isStandalone: true, selector: "it-radio-button", inputs: { value: "value", inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], forceRadioName: "forceRadioName" }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      class=\"form-check-input\"\n      [name]=\"name\"\n      [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\"\n      [formControl]=\"control\"\n      [attr.aria-describedby]=\"id + '-help'\" />\n\n    <label class=\"form-check-label\" [for]=\"id\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      @if (!customLabel.hasChildNodes()) {\n        {{ label }}\n      }\n    </label>\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <div #customError>\n          <ng-content select=\"[error]\"></ng-content>\n        </div>\n        @if (!customError.hasChildNodes()) {\n          {{ invalidMessage | async }}\n        }\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItRadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRadioButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    <input\n      [id]=\"id\"\n      type=\"radio\"\n      [value]=\"value\"\n      class=\"form-check-input\"\n      [name]=\"name\"\n      [class.is-invalid]=\"isInvalid\"\n      [class.is-valid]=\"isValid\"\n      [formControl]=\"control\"\n      [attr.aria-describedby]=\"id + '-help'\" />\n\n    <label class=\"form-check-label\" [for]=\"id\">\n      <div #customLabel>\n        <ng-content select=\"[label]\"></ng-content>\n      </div>\n      @if (!customLabel.hasChildNodes()) {\n        {{ label }}\n      }\n    </label>\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <div #customError>\n          <ng-content select=\"[error]\"></ng-content>\n        </div>\n        @if (!customError.hasChildNodes()) {\n          {{ invalidMessage | async }}\n        }\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</ng-container>\n" }]
         }], propDecorators: { value: [{
@@ -3839,10 +3871,10 @@ class ItRangeComponent extends ItAbstractFormComponent {
         const val = (((this.control.value ?? diff / 2) - min) * 100) / diff;
         this.slider.nativeElement.style.setProperty('--range-percentage', `${val}%`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItRangeComponent, isStandalone: true, selector: "it-range", inputs: { max: "max", min: "min", step: "step", leftColor: "leftColor", rightColor: "rightColor" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center\">\n  @if (label) {\n    <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n  }\n  <ng-content></ng-content>\n</div>\n\n<input\n  #slider\n  [id]=\"id\"\n  type=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  class=\"form-range\"\n  [class.double-color]=\"!!leftColor && !!rightColor\"\n  [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRangeComponent, isStandalone: true, selector: "it-range", inputs: { max: "max", min: "min", step: "step", leftColor: "leftColor", rightColor: "rightColor" }, viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center\">\n  @if (label) {\n    <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n  }\n  <ng-content></ng-content>\n</div>\n\n<input\n  #slider\n  [id]=\"id\"\n  type=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  class=\"form-range\"\n  [class.double-color]=\"!!leftColor && !!rightColor\"\n  [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-range', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex justify-content-between align-items-center\">\n  @if (label) {\n    <label [for]=\"id\" class=\"form-label\">{{ label }}</label>\n  }\n  <ng-content></ng-content>\n</div>\n\n<input\n  #slider\n  [id]=\"id\"\n  type=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  class=\"form-range\"\n  [class.double-color]=\"!!leftColor && !!rightColor\"\n  [formControl]=\"control\" />\n", styles: [".form-range.double-color::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}.form-range.double-color::-moz-range-track{background:linear-gradient(to right,var(--range-left-color) var(--range-percentage),var(--range-right-color) var(--range-percentage))}\n"] }]
         }], propDecorators: { max: [{
@@ -3890,10 +3922,10 @@ class ItRatingComponent extends ItAbstractFormComponent {
     generateStars() {
         return Array.from({ length: this.starCount }, (_, i) => i + 1).reverse();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItRatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItRatingComponent, isStandalone: true, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRatingComponent, isStandalone: true, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItRatingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-rating', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ReactiveFormsModule, ItIconComponent], template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n" }]
         }], propDecorators: { value: [{
@@ -3950,10 +3982,10 @@ class ItSelectComponent extends ItAbstractFormComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-select', imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
         }], propDecorators: { options: [{
@@ -3999,10 +4031,10 @@ class ItTextareaComponent extends ItAbstractFormComponent {
     get isReadonly() {
         return this.readonly === 'plaintext' || !!this.readonly;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItTextareaComponent, isStandalone: true, selector: "it-textarea", inputs: { rows: "rows", placeholder: "placeholder", description: "description", readonly: "readonly" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTextareaComponent, isStandalone: true, selector: "it-textarea", inputs: { rows: "rows", placeholder: "placeholder", description: "description", readonly: "readonly" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTextareaComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"] }]
         }], propDecorators: { rows: [{
@@ -4195,10 +4227,10 @@ class ItUploadDragDropComponent extends ItAbstractComponent {
         this.donut?.set(0);
         this._changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItUploadDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItUploadDragDropComponent, isStandalone: true, selector: "it-upload-drag-drop", inputs: { accept: "accept" }, outputs: { fileStartUpload: "fileStartUpload" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "donutElement", first: true, predicate: ["donutElement"], descendants: true }], exportAs: ["itUploadDragDrop"], usesInheritance: true, ngImport: i0, template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItUploadDragDropComponent, isStandalone: true, selector: "it-upload-drag-drop", inputs: { accept: "accept" }, outputs: { fileStartUpload: "fileStartUpload" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "donutElement", first: true, predicate: ["donutElement"], descendants: true }], exportAs: ["itUploadDragDrop"], usesInheritance: true, ngImport: i0, template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItUploadDragDropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadDragDropComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-upload-drag-drop', exportAs: 'itUploadDragDrop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, NgOptimizedImage], template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { accept: [{
@@ -4289,10 +4321,10 @@ class ItUploadFileListComponent extends ItAbstractComponent {
     getFileSize(file) {
         return ItFileUtils.getFileSizeString(file);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-upload-file-list', imports: [ItIconComponent, TranslateModule, ItTooltipDirective, ItProgressBarComponent], template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n" }]
         }], propDecorators: { fileList: [{
@@ -4349,10 +4381,10 @@ class ItMarkMatchingTextPipe {
         }
         return allString;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItMarkMatchingTextPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItMarkMatchingTextPipe, isStandalone: true, name: "itMarkMatchingText" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, isStandalone: true, name: "itMarkMatchingText" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItMarkMatchingTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMarkMatchingTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -4437,10 +4469,10 @@ class ItAutocompleteComponent extends ItAbstractFormComponent {
         const value = this.control.value;
         return this.forceShowLabel && (!!value || !!this.placeholder);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { autocompleteData: "autocompleteData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { autocompleteSelectedEvent: "autocompleteSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (autocompleteResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track autocompleteItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { autocompleteData: "autocompleteData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { autocompleteSelectedEvent: "autocompleteSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (autocompleteResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track autocompleteItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-autocomplete', imports: [AsyncPipe, ItIconComponent, ItMarkMatchingTextPipe, NgTemplateOutlet, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (autocompleteResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track autocompleteItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { autocompleteData: [{
@@ -4476,8 +4508,8 @@ const formComponents = [
     ItUploadFileListComponent,
 ];
 class ItFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItFormModule, imports: [ItAutocompleteComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [ItAutocompleteComponent,
             ItCheckboxComponent,
             ItInputComponent,
             ItPasswordInputComponent,
@@ -4498,9 +4530,9 @@ class ItFormModule {
             ItTextareaComponent,
             ItUploadDragDropComponent,
             ItUploadFileListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItFormModule, imports: [formComponents] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [formComponents] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: formComponents,
@@ -4546,10 +4578,10 @@ class ItBackButtonComponent {
         }
         this._location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackButtonComponent, deps: [{ token: i1$3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItBackButtonComponent, isStandalone: true, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: ["showIcon", "showIcon", inputToBoolean], showText: ["showText", "showText", inputToBoolean], backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackButtonComponent, deps: [{ token: i1$3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBackButtonComponent, isStandalone: true, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: ["showIcon", "showIcon", inputToBoolean], showText: ["showText", "showText", inputToBoolean], backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-back-button', exportAs: 'itBackButton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItButtonDirective, ItIconComponent, TranslateModule], template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$3.Location }], propDecorators: { buttonStyle: [{
@@ -4598,10 +4630,10 @@ class ItBackToTopComponent extends ItAbstractComponent {
     dispose() {
         this.backToTop?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItBackToTopComponent, isStandalone: true, selector: "it-back-to-top", inputs: { small: ["small", "small", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  aria-hidden=\"true\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItBackToTopComponent, isStandalone: true, selector: "it-back-to-top", inputs: { small: ["small", "small", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  aria-hidden=\"true\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackToTopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackToTopComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-back-to-top', exportAs: 'itBackToTop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent], template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  aria-hidden=\"true\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n" }]
         }], propDecorators: { small: [{
@@ -4619,10 +4651,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class ItBreadcrumbItemComponent extends ItLinkComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItBreadcrumbItemComponent, isStandalone: true, selector: "it-breadcrumb-item", inputs: { active: ["active", "active", inputToBoolean], iconName: "iconName" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItBreadcrumbItemComponent, isStandalone: true, selector: "it-breadcrumb-item", inputs: { active: ["active", "active", inputToBoolean], iconName: "iconName" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { active: [{
@@ -4660,10 +4692,10 @@ class ItBreadcrumbComponent {
     ngOnDestroy() {
         this.itemSubscriptions?.forEach(item => item.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItBreadcrumbComponent, isStandalone: true, selector: "it-breadcrumb", inputs: { separator: "separator", dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItBreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBreadcrumbComponent, isStandalone: true, selector: "it-breadcrumb", inputs: { separator: "separator", dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItBreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItLinkComponent, NgTemplateOutlet], template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { separator: [{
@@ -4678,11 +4710,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 const breadcrumb = [ItBreadcrumbComponent, ItBreadcrumbItemComponent];
 class ItBreadcrumbsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent], exports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent], exports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: breadcrumb,
@@ -4702,10 +4734,10 @@ class ItNavBarComponent {
     toggleCollapse() {
         this.navbar?.toggle(this.collapseButton?.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItNavBarComponent, isStandalone: true, selector: "it-navbar", inputs: { megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, viewQueries: [{ propertyName: "collapseButton", first: true, predicate: ["collapseButton"], descendants: true }, { propertyName: "collapseView", first: true, predicate: ["collapseView"], descendants: true }], ngImport: i0, template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItNavBarComponent, isStandalone: true, selector: "it-navbar", inputs: { megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, viewQueries: [{ propertyName: "collapseButton", first: true, predicate: ["collapseButton"], descendants: true }, { propertyName: "collapseView", first: true, predicate: ["collapseView"], descendants: true }], ngImport: i0, template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective], template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n" }]
         }], propDecorators: { megamenu: [{
@@ -4723,21 +4755,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class ItNavBarItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItNavBarItemComponent, isStandalone: true, selector: "it-navbar-item", ngImport: i0, template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItNavBarItemComponent, isStandalone: true, selector: "it-navbar-item", ngImport: i0, template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-navbar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n" }]
         }] });
 
 const navbarComponents = [ItNavBarComponent, ItNavBarItemComponent];
 class ItNavBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent, ItNavBarItemComponent], exports: [ItNavBarComponent, ItNavBarItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent, ItNavBarItemComponent], exports: [ItNavBarComponent, ItNavBarItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: navbarComponents,
@@ -4783,12 +4815,15 @@ class ItHeaderComponent {
         event.preventDefault();
         this.searchClick.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItHeaderComponent, isStandalone: true, selector: "it-header", inputs: { light: ["light", "light", inputToBoolean], sticky: ["sticky", "sticky", inputToBoolean], showSlim: ["showSlim", "showSlim", inputToBoolean], smallHeader: ["smallHeader", "smallHeader", inputToBoolean], showSearch: ["showSearch", "showSearch", inputToBoolean], slimTitle: "slimTitle", slimTitleLink: "slimTitleLink", loginStyle: "loginStyle", megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "ngmodule", type: ItNavBarModule }, { kind: "component", type: ItNavBarComponent, selector: "it-navbar", inputs: ["megamenu", "expand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    toggleCollapse() {
+        this.itNavBarComponent?.toggleCollapse();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItHeaderComponent, isStandalone: true, selector: "it-header", inputs: { light: ["light", "light", inputToBoolean], sticky: ["sticky", "sticky", inputToBoolean], showSlim: ["showSlim", "showSlim", inputToBoolean], smallHeader: ["smallHeader", "smallHeader", inputToBoolean], showSearch: ["showSearch", "showSearch", inputToBoolean], slimTitle: "slimTitle", slimTitleLink: "slimTitleLink", loginStyle: "loginStyle", megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "itNavBarComponent", first: true, predicate: ItNavBarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "ngmodule", type: ItNavBarModule }, { kind: "component", type: ItNavBarComponent, selector: "it-navbar", inputs: ["megamenu", "expand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItHeaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule], template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
+            args: [{ standalone: true, selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule], template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { light: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -4817,6 +4852,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }], headerWrapper: [{
                 type: ViewChild,
                 args: ['headerWrapper']
+            }], itNavBarComponent: [{
+                type: ViewChild,
+                args: [ItNavBarComponent]
             }], megamenu: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -4841,10 +4879,10 @@ class ItSidebarComponent {
         this.dark = false;
         this.componentClass = 'd-block sidebar-wrapper';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItSidebarComponent, isStandalone: true, selector: "it-sidebar", inputs: { withRightLine: ["withRightLine", "withRightLine", inputToBoolean], withLeftLine: ["withLeftLine", "withLeftLine", inputToBoolean], dark: ["dark", "dark", inputToBoolean], header: "header" }, host: { properties: { "class.it-line-right-side": "this.withRightLine", "class.it-line-left-side": "this.withLeftLine", "class.theme-dark": "this.dark", "class": "this.componentClass" } }, ngImport: i0, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSidebarComponent, isStandalone: true, selector: "it-sidebar", inputs: { withRightLine: ["withRightLine", "withRightLine", inputToBoolean], withLeftLine: ["withLeftLine", "withLeftLine", inputToBoolean], dark: ["dark", "dark", inputToBoolean], header: "header" }, host: { properties: { "class.it-line-right-side": "this.withRightLine", "class.it-line-left-side": "this.withLeftLine", "class.theme-dark": "this.dark", "class": "this.componentClass" } }, ngImport: i0, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-sidebar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n" }]
         }], propDecorators: { withRightLine: [{
@@ -4914,10 +4952,10 @@ class ItErrorPageComponent {
     get isDefaultErrorCode() {
         return this.errorCode === 404 || this.errorCode === 403 || this.errorCode === 500;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItErrorPageComponent, deps: [{ token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItErrorPageComponent, deps: [{ token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItErrorPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItErrorPageComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-error-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RouterLink, ItBackButtonComponent, ItButtonDirective], template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$4.ActivatedRoute }], propDecorators: { errorCode: [{
@@ -4966,10 +5004,10 @@ class ItLanguageSwitcherComponent {
     changeLanguage(lang) {
         this.translateService.use(lang);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateModule, ItDropdownModule], template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { availableLanguages: [{
@@ -5019,10 +5057,10 @@ class ItDateAgoPipe extends TranslatePipe {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDateAgoPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItDateAgoPipe, isStandalone: true, name: "itDateAgo", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, isStandalone: true, name: "itDateAgo", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDateAgoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDateAgoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'itDateAgo',
@@ -5132,10 +5170,10 @@ class ItDurationPipe extends TranslatePipe {
                 return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItDurationPipe, isStandalone: true, name: "itDuration" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, isStandalone: true, name: "itDuration" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItDurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItDurationPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'itDuration',
@@ -5143,6 +5181,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 }]
         }] });
 
+/**
+ * Timeline Item
+ * @description Represents a single event for Timeline component.
+ */
+class ItTimelineItemComponent extends ItAbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Timeline element reference date format
+         * @default dd/MM/yyyy
+         */
+        this.dateFormat = 'dd/MM/yyyy';
+        /**
+         * Timeline element PIN type
+         * @default none
+         */
+        this.pinType = 'default';
+        /**
+         * Timeline element PIN icon
+         * @default code-circle
+         */
+        this.pinIcon = 'code-circle';
+        /**
+         * Timeline element show detail link
+         * @default false
+         */
+        this.showReadMore = false;
+        /** Timeline element detail link
+         * @default #
+         */
+        this.readMoreLink = '#';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTimelineItemComponent, isStandalone: true, selector: "it-timeline-item", inputs: { title: "title", text: "text", signature: "signature", eventDate: "eventDate", dateFormat: "dateFormat", pinText: "pinText", pinType: "pinType", pinIcon: "pinIcon", categoryTitle: "categoryTitle", categoryLink: "categoryLink", showReadMore: ["showReadMore", "showReadMore", inputToBoolean], readMoreLink: "readMoreLink" }, usesInheritance: true, ngImport: i0, template: "<div class=\"timeline-element\">\n  @if (pinType === 'now') {\n    <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n  }\n  <div class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n    <div class=\"pin-icon\">\n      @if (pinIcon) {\n        <it-icon [name]=\"pinIcon\"></it-icon>\n      } @else {\n        <it-icon name=\"code-circle\"></it-icon>\n      }\n    </div>\n    <div class=\"pin-text\">\n      <span>{{ pinText }}</span>\n    </div>\n  </div>\n  <div class=\"card-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if ((categoryTitle && categoryLink) || eventDate) {\n          <div class=\"category-top\">\n            @if (categoryTitle) {\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h5 class=\"card-title\">{{ title }}</h5>\n        <p class=\"card-text\">{{ text }}</p>\n        @if (signature) {\n          <span class=\"card-signature\">{{ signature }}</span>\n        }\n        @if (showReadMore) {\n          <a class=\"read-more\" [href]=\"readMoreLink\">\n            <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n            <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n            <it-icon name=\"arrow-right\"></it-icon>\n          </a>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-timeline-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, DatePipe, TranslateModule, NgClass], template: "<div class=\"timeline-element\">\n  @if (pinType === 'now') {\n    <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n  }\n  <div class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n    <div class=\"pin-icon\">\n      @if (pinIcon) {\n        <it-icon [name]=\"pinIcon\"></it-icon>\n      } @else {\n        <it-icon name=\"code-circle\"></it-icon>\n      }\n    </div>\n    <div class=\"pin-text\">\n      <span>{{ pinText }}</span>\n    </div>\n  </div>\n  <div class=\"card-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if ((categoryTitle && categoryLink) || eventDate) {\n          <div class=\"category-top\">\n            @if (categoryTitle) {\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h5 class=\"card-title\">{{ title }}</h5>\n        <p class=\"card-text\">{{ text }}</p>\n        @if (signature) {\n          <span class=\"card-signature\">{{ signature }}</span>\n        }\n        @if (showReadMore) {\n          <a class=\"read-more\" [href]=\"readMoreLink\">\n            <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n            <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n            <it-icon name=\"arrow-right\"></it-icon>\n          </a>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], signature: [{
+                type: Input
+            }], eventDate: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], pinText: [{
+                type: Input,
+                args: [{ required: true }]
+            }], pinType: [{
+                type: Input
+            }], pinIcon: [{
+                type: Input
+            }], categoryTitle: [{
+                type: Input
+            }], categoryLink: [{
+                type: Input
+            }], showReadMore: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }], readMoreLink: [{
+                type: Input
+            }] } });
+
+/**
+ * Timeline
+ * @description Build timeline for chronological representation of events.
+ */
+class ItTimelineComponent extends ItAbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Timeline elements array
+         * @default []
+         */
+        this.timelineElements = [];
+        /**
+         * Default date format for timeline element reference date
+         * @default dd/MM/yyyy
+         */
+        this.dateFormat = 'dd/MM/yyyy';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTimelineComponent, isStandalone: true, selector: "it-timeline", inputs: { timelineElements: "timelineElements", dateFormat: "dateFormat" }, usesInheritance: true, ngImport: i0, template: "<div class=\"it-timeline-wrapper\">\n  <div class=\"row\">\n    @for (element of timelineElements; track $index) {\n      <div class=\"col-12\">\n        <it-timeline-item\n          [title]=\"element.title\"\n          [text]=\"element.text\"\n          [signature]=\"element.signature\"\n          [pinType]=\"element.pin?.type\"\n          [pinIcon]=\"element.pin?.icon\"\n          [pinText]=\"element.pin?.text\"\n          [eventDate]=\"element.eventDate\"\n          [dateFormat]=\"dateFormat\"\n          [categoryTitle]=\"element.category?.title\"\n          [categoryLink]=\"element.category?.link\"\n          [showReadMore]=\"!!element.link?.length\"\n          [readMoreLink]=\"element.link\" />\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItTimelineItemComponent, selector: "it-timeline-item", inputs: ["title", "text", "signature", "eventDate", "dateFormat", "pinText", "pinType", "pinIcon", "categoryTitle", "categoryLink", "showReadMore", "readMoreLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent], template: "<div class=\"it-timeline-wrapper\">\n  <div class=\"row\">\n    @for (element of timelineElements; track $index) {\n      <div class=\"col-12\">\n        <it-timeline-item\n          [title]=\"element.title\"\n          [text]=\"element.text\"\n          [signature]=\"element.signature\"\n          [pinType]=\"element.pin?.type\"\n          [pinIcon]=\"element.pin?.icon\"\n          [pinText]=\"element.pin?.text\"\n          [eventDate]=\"element.eventDate\"\n          [dateFormat]=\"dateFormat\"\n          [categoryTitle]=\"element.category?.title\"\n          [categoryLink]=\"element.category?.link\"\n          [showReadMore]=\"!!element.link?.length\"\n          [readMoreLink]=\"element.link\" />\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { timelineElements: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }] } });
+
+const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent];
+class ItTimelineModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, imports: [ItTimelineComponent, ItTimelineItemComponent], exports: [ItTimelineComponent, ItTimelineItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, imports: [timelineComponents] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTimelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: timelineComponents,
+                    exports: timelineComponents,
+                }]
+        }] });
+
 /**
  * Core components
  */
@@ -5173,6 +5323,7 @@ const core = [
     ItTabModule,
     ItTableModule,
     ItTooltipDirective,
+    ItTimelineModule,
 ];
 /**
  * Navigation Components
@@ -5213,8 +5364,8 @@ class DesignAngularKitModule {
             ngModule: DesignAngularKitModule,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DesignAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: DesignAngularKitModule, imports: [ItAccordionComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, imports: [ItAccordionComponent,
             ItAlertComponent,
             ItAvatarModule,
             ItBadgeDirective,
@@ -5239,7 +5390,8 @@ class DesignAngularKitModule {
             ItSteppersModule,
             ItTabModule,
             ItTableModule,
-            ItTooltipDirective, // Core components
+            ItTooltipDirective,
+            ItTimelineModule, // Core components
             ItFormModule, ItBackButtonComponent,
             ItBackToTopComponent,
             ItBreadcrumbsModule,
@@ -5271,7 +5423,8 @@ class DesignAngularKitModule {
             ItSteppersModule,
             ItTabModule,
             ItTableModule,
-            ItTooltipDirective, // Core components
+            ItTooltipDirective,
+            ItTimelineModule, // Core components
             ItFormModule, ItBackButtonComponent,
             ItBackToTopComponent,
             ItBreadcrumbsModule,
@@ -5279,7 +5432,7 @@ class DesignAngularKitModule {
             ItNavBarModule,
             ItSidebarComponent,
             ItMegamenuComponent, ItErrorPageComponent, ItIconComponent, ItLanguageSwitcherComponent, ItDateAgoPipe, ItDurationPipe, ItMarkMatchingTextPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DesignAngularKitModule, imports: [ItAlertComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, imports: [ItAlertComponent,
             ItAvatarModule,
             ItCarouselModule,
             ItChipComponent,
@@ -5294,7 +5447,8 @@ class DesignAngularKitModule {
             ItSpinnerComponent,
             ItSteppersModule,
             ItTabModule,
-            ItTableModule, // Core components
+            ItTableModule,
+            ItTimelineModule, // Core components
             ItFormModule, ItBackButtonComponent,
             ItBreadcrumbsModule,
             ItHeaderComponent,
@@ -5305,11 +5459,12 @@ class DesignAngularKitModule {
             ItListModule,
             ItSteppersModule,
             ItTabModule,
-            ItTableModule, // Core components
+            ItTableModule,
+            ItTimelineModule, // Core components
             ItFormModule, ItBreadcrumbsModule,
             ItNavBarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DesignAngularKitModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DesignAngularKitModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: components,
@@ -5347,6 +5502,7 @@ const IconNameArray = [
     'close',
     'close-big',
     'close-circle',
+    'code-circle',
     'comment',
     'copy',
     'delete',
@@ -5652,5 +5808,5 @@ class ItDateUtils {
  * Generated bundle index. Do not edit.
  */
 
-export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSidebarComponent, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTooltipDirective, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
+export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSidebarComponent, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTimelineComponent, ItTimelineItemComponent, ItTimelineModule, ItTooltipDirective, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, PLATE_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
 //# sourceMappingURL=design-angular-kit.mjs.map