design-angular-kit 20.1.0 → 20.2.0

package/fesm2022/design-angular-kit.mjs

@@ -885,6 +885,8 @@ class ItDropdownItemComponent extends ItLinkComponent {
          * @default false
          */
         this.isDark = false;
+        this.elRef = inject(ElementRef);
+        this.isHostElement = false;
     }
     get linkClass() {
         let linkClass = `list-item ${this.active ? 'active' : 'dropdown-item'}`;
@@ -902,6 +904,12 @@ class ItDropdownItemComponent extends ItLinkComponent {
         }
         return linkClass;
     }
+    ngOnInit() {
+        this.isHostElement = this.elRef.nativeElement.tagName.toLowerCase() === 'li';
+        if (!this.isHostElement) {
+            console.warn(`L'utilizzo del componente attraverso il selettore it-dropdown-item verrà deprecato in quanto non accessibile. Usa il selettore itDropdownItem invece. Consulta la documentazione del component Dropdown.`);
+        }
+    }
     setDark(dark) {
         if (this.isDark !== dark) {
             this.isDark = dark;
@@ -909,11 +917,11 @@ class ItDropdownItemComponent extends ItLinkComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition", mode: "mode" }, usesInheritance: true, ngImport: i0, template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItDropdownItemComponent, isStandalone: true, selector: "it-dropdown-item, li[itDropdownItem]", inputs: { divider: ["divider", "divider", inputToBoolean], active: ["active", "active", inputToBoolean], large: ["large", "large", inputToBoolean], iconName: "iconName", iconPosition: "iconPosition", mode: "mode" }, usesInheritance: true, ngImport: i0, template: "@if (isHostElement) {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <li>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </li>\n}\n\n<ng-template #content>\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</ng-template>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItDropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItLinkComponent], template: "<li>\n  @if (divider) {\n    <span class=\"divider\"></span>\n  } @else {\n    <it-link [class]=\"linkClass\" [id]=\"id\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      @if (iconName && iconPosition === 'left') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      <span><ng-content></ng-content></span>\n      @if (iconName && iconPosition === 'right') {\n        <it-icon size=\"sm\" [name]=\"iconName\" [color]=\"isDark ? 'light' : 'primary'\" [svgClass]=\"iconPosition\"></it-icon>\n      }\n      @if (active) {\n        <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n      }\n    </it-link>\n  }\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
+            args: [{ selector: 'it-dropdown-item, li[itDropdownItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItLinkComponent, NgTemplateOutlet], template: "@if (isHostElement) {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <li>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </li>\n}\n\n<ng-template #content>\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</ng-template>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
         }], propDecorators: { divider: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -1582,7 +1590,7 @@ class ItButtonDirective {
         return cssClass;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.3", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { properties: { "disabled": "this.disabled", "type": "this.type", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.3", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { properties: { "attr.aria-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: "20.0.3", ngImport: i0, type: ItButtonDirective, decorators: [{
             type: Directive,
@@ -1603,7 +1611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                 args: [{ transform: inputToBoolean }]
             }, {
                 type: HostBinding,
-                args: ['disabled']
+                args: ['attr.aria-disabled']
             }], type: [{
                 type: Input
             }, {
@@ -2158,6 +2166,7 @@ class ItListItemComponent extends ItLinkComponent {
     constructor() {
         super(...arguments);
         this.elRef = inject(ElementRef);
+        this.isHostElement = false;
     }
     /**
      * The avatar url
@@ -2193,12 +2202,18 @@ class ItListItemComponent extends ItLinkComponent {
         }
         return itemClass;
     }
+    ngOnInit() {
+        this.isHostElement = this.elRef.nativeElement.tagName.toLowerCase() === 'li';
+        if (!this.isHostElement) {
+            console.warn(`L'utilizzo del componente attraverso il selettore it-list-item verrà deprecato in quanto non accessibile. Usa il selettore itListItem invece. Consulta la documentazione del component Lista.`);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItListItemComponent, isStandalone: true, selector: "it-list-item", inputs: { active: ["active", "active", inputToBoolean], size: "size", iconLeft: ["iconLeft", "iconLeft", inputToBoolean], iconRight: ["iconRight", "iconRight", inputToBoolean], avatar: "avatar", image: "image" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItListItemComponent, isStandalone: true, selector: "it-list-item, li[itListItem]", inputs: { active: ["active", "active", inputToBoolean], size: "size", iconLeft: ["iconLeft", "iconLeft", inputToBoolean], iconRight: ["iconRight", "iconRight", inputToBoolean], avatar: "avatar", image: "image" }, usesInheritance: true, ngImport: i0, template: "@if (isHostElement) {\n  <ng-container *ngTemplateOutlet=\"structure\"></ng-container>\n} @else {\n  <li>\n    <ng-container *ngTemplateOutlet=\"structure\"></ng-container>\n  </li>\n}\n\n<ng-template #structure>\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</ng-template>\n\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", 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: "20.0.3", ngImport: i0, type: ItListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItLinkComponent], template: "<li>\n  <ng-template #content>\n    <div class=\"it-rounded-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </div>\n\n    @if (avatar) {\n      <div class=\"avatar size-lg\">\n        <img [attr.src]=\"avatar\" alt=\"avatar\" />\n      </div>\n    }\n\n    @if (image) {\n      <div class=\"it-thumb\">\n        <img [attr.src]=\"image\" alt=\"thumb\" />\n      </div>\n    }\n\n    <div class=\"it-right-zone\">\n      <ng-content></ng-content>\n      <ng-content select=\"[action]\"></ng-content>\n\n      <span class=\"it-multiple\">\n        <span class=\"metadata\">\n          <ng-content select=\"[metadata]\"></ng-content>\n        </span>\n\n        <ng-content select=\"[multiple]\"></ng-content>\n      </span>\n    </div>\n  </ng-template>\n\n  @if (!href) {\n    <div [class]=\"itemClass\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  } @else {\n    <it-link [class]=\"itemClass\" [href]=\"href\" [externalLink]=\"!!externalLink\" [disabled]=\"!!disabled\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </it-link>\n  }\n</li>\n", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"] }]
+            args: [{ selector: 'it-list-item, li[itListItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItLinkComponent], template: "@if (isHostElement) {\n  <ng-container *ngTemplateOutlet=\"structure\"></ng-container>\n} @else {\n  <li>\n    <ng-container *ngTemplateOutlet=\"structure\"></ng-container>\n  </li>\n}\n\n<ng-template #structure>\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</ng-template>\n\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", styles: [".metadata:empty,.it-rounded-icon:empty{display:none}:host ::ng-deep it-icon+.it-multiple{display:none!important}:host ::ng-deep .list-item-title-icon-wrapper+.it-multiple{display:none!important}:host ::ng-deep p+.it-multiple{display:none!important}\n"] }]
         }], propDecorators: { active: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -3296,7 +3311,7 @@ class ItPaginationComponent {
         this.changerEvent.emit(value); // emit new changer value
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItPaginationComponent, isStandalone: true, selector: "it-pagination", inputs: { currentPage: "currentPage", pageNumbers: "pageNumbers", visiblePages: "visiblePages", alignment: "alignment", simpleMode: ["simpleMode", "simpleMode", inputToBoolean], textLinks: ["textLinks", "textLinks", inputToBoolean], currentChanger: "currentChanger", changerValues: "changerValues", showJumpToPage: ["showJumpToPage", "showJumpToPage", inputToBoolean] }, outputs: { pageEvent: "pageEvent", changerEvent: "changerEvent" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  class=\"pagination-wrapper\"\n  [class.justify-content-center]=\"alignment === 'center'\"\n  [class.justify-content-end]=\"alignment === 'end'\"\n  [class.pagination-total]=\"totalNumberText.hasChildNodes()\">\n  @if (pages.length) {\n    <ul class=\"pagination\">\n      <li class=\"page-item\" [class.disabled]=\"currentPage < 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage)\">\n          @if (!textLinks) {\n            <it-icon name=\"chevron-left\" color=\"primary\"></it-icon>\n          }\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.previous' | translate }}\n          }\n        </a>\n      </li>\n      @if (simpleMode) {\n        <li class=\"page-item\">\n          <span class=\"page-link\" aria-current=\"page\">{{ currentPage + 1 }}</span>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link\">/</span></li>\n        <li class=\"page-item\">\n          <span class=\"page-link\">{{ pageNumbers }}</span>\n        </li>\n        <li class=\"page-item visually-hidden\">\n          <a class=\"page-link\" href=\"#\" aria-current=\"page\">\n            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}\n          </a>\n        </li>\n      } @else {\n        @if (pageNumbers > visiblePages && pages[0] >= 2) {\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, 1)\">1</a>\n          </li>\n          @if (pages[0] >= 3) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n        }\n        @for (page of pages; track page) {\n          <li class=\"page-item\">\n            @if (page === currentPage + 1) {\n              <a class=\"page-link\" aria-current=\"page\">\n                <span class=\"d-inline-block d-sm-none\">{{ 'it.core.page' | translate }}</span> {{ page }}\n              </a>\n            } @else {\n              <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, page)\">{{ page }}</a>\n            }\n          </li>\n        }\n        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {\n          @if (pages[pages.length - 1] < pageNumbers - 1) {\n            <li class=\"page-item\">\n              <span class=\"page-link\">...</span>\n            </li>\n          }\n          <li class=\"page-item\">\n            <a class=\"page-link\" href=\"#\" (click)=\"pageChange($event, pageNumbers)\">{{ pageNumbers }}</a>\n          </li>\n        }\n      }\n      <li class=\"page-item\" [class.disabled]=\"currentPage >= pageNumbers - 1\">\n        <a class=\"page-link\" [class.text]=\"textLinks\" href=\"#\" (click)=\"pageChange($event, currentPage + 2)\">\n          <span class=\"visually-hidden\">\n            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}\n          </span>\n          @if (textLinks) {\n            {{ 'it.core.next' | translate }}\n          } @else {\n            <it-icon name=\"chevron-right\" color=\"primary\"></it-icon>\n          }\n        </a>\n      </li>\n    </ul>\n  }\n\n  @if (currentChanger !== undefined) {\n    <it-dropdown>\n      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>\n      <ng-container list>\n        @for (value of changerValues; track value) {\n          <it-dropdown-item href=\"#\" externalLink=\"true\" (click)=\"changerChange($event, value)\">\n            {{ value }} / {{ 'it.core.page' | translate | lowercase }}\n          </it-dropdown-item>\n        }\n      </ng-container>\n    </it-dropdown>\n  }\n\n  @if (showJumpToPage) {\n    <it-input\n      type=\"number\"\n      [min]=\"1\"\n      [max]=\"pageNumbers\"\n      [label]=\"('it.core.go-to' | translate) + '...'\"\n      [formControl]=\"jumpToPage\"></it-input>\n  }\n\n  <p [class.d-none]=\"!totalNumberText.hasChildNodes()\" #totalNumberText>\n    <ng-content></ng-content>\n  </p>\n</nav>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item, li[itDropdownItem]", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }, { kind: "component", type: ItInputComponent, selector: "it-input", inputs: ["type", "placeholder", "description", "readonly", "maxDate", "minDate", "max", "min", "step", "currency", "percentage", "symbol", "adaptive", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItPaginationComponent, decorators: [{
             type: Component,
@@ -3549,6 +3564,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
 class ItSteppersContainerComponent {
     constructor() {
         this._changeDetectorRef = inject(ChangeDetectorRef);
+        /**
+         * The confirmed label if different from default
+         * @default null
+         */
+        this.confirmedLabel = null;
         /**
          * Show the stepper header
          * @default true
@@ -3586,12 +3606,14 @@ class ItSteppersContainerComponent {
         this.stepsSubscriptions?.forEach(step => step.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { confirmedLabel: "confirmedLabel", activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + (confirmedLabel ? confirmedLabel : ('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          {{ confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate) }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon\n    [labelWaria]=\"confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate)\"\n    name=\"check\"\n    class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate) }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSteppersContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-steppers-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet, TranslateModule, ItButtonDirective, ItProgressBarComponent, ItProgressButtonComponent], template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { activeStep: [{
+            args: [{ selector: 'it-steppers-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet, TranslateModule, ItButtonDirective, ItProgressBarComponent, ItProgressButtonComponent], template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [title]=\"step.iconTitle\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + (confirmedLabel ? confirmedLabel : ('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          {{ confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate) }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon\n    [labelWaria]=\"confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate)\"\n    name=\"check\"\n    class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ confirmedLabel ? confirmedLabel : ('it.core.confirmed' | translate) }}</span>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { confirmedLabel: [{
+                type: Input
+            }], activeStep: [{
                 type: Input,
                 args: [{ required: true }]
             }], showHeader: [{
@@ -4380,11 +4402,11 @@ class ItCheckboxComponent extends ItAbstractFormComponent {
         return this.onChange(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"group ? id + '-help' : undefined\"\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: "20.0.3", ngImport: i0, type: ItCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n" }]
+            args: [{ selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"group ? id + '-help' : undefined\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n" }]
         }], propDecorators: { toggle: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -5225,16 +5247,12 @@ class ItSearchComponent extends ItAbstractFormComponent {
     onKeyDown() {
         this.showAutocompletion = true;
     }
-    get isActiveLabel() {
-        const value = this.control.value;
-        return this.forceShowLabel && (!!value || !!this.placeholder);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSearchComponent, isStandalone: true, selector: "it-search", inputs: { searchData: "searchData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { searchSelectedEvent: "searchSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItSearchComponent, isStandalone: true, selector: "it-search", inputs: { searchData: "searchData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { searchSelectedEvent: "searchSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"true\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItSearchComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-search', imports: [AsyncPipe, ItIconComponent, ItMarkMatchingTextPipe, NgTemplateOutlet, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ standalone: true, selector: 'it-search', imports: [AsyncPipe, ItIconComponent, ItMarkMatchingTextPipe, NgTemplateOutlet, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"true\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { searchData: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6838,7 +6856,7 @@ class ItLanguageSwitcherComponent {
         this.translateService.use(lang);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: ItDropdownItemComponent, selector: "it-dropdown-item, li[itDropdownItem]", inputs: ["divider", "active", "large", "iconName", "iconPosition", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
             type: Component,