design-angular-kit 20.0.0 → 20.2.0

package/README.md

@@ -66,8 +66,8 @@ Scegli la versione corrispondente alla tua versione Angular:
 | Angular | Design Angular kit | Branch | Documentazione                                                                     |
 | ------- | ------------------ | ------ | ---------------------------------------------------------------------------------- |
 | 20+     | v20.0.0 +          | main   | [link](https://italia.github.io/design-angular-kit/design-angular-kit#)            |
-| 19+     | v19.0.0 +          | v19    | [link](https://design-angular-kit-git-v18-dip-trasformazione-digitale.vercel.app/) |
-| 18+     | v18.0.0 +          | v18    | [link](https://design-angular-kit-git-v19-dip-trasformazione-digitale.vercel.app/) |
+| 19+     | v19.0.0 +          | v19    | [link](https://design-angular-kit-git-v19-dip-trasformazione-digitale.vercel.app/) |
+| 18+     | v18.0.0 +          | v18    | [link](https://design-angular-kit-git-v18-dip-trasformazione-digitale.vercel.app/) |
 
 ⚠️ Le versioni precendenti non sono più manutenute.
 

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
             }, {
@@ -1684,6 +1692,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
 class ItCardComponent extends ItAbstractComponent {
     constructor() {
         super(...arguments);
+        /**
+         * To add border
+         * @default true
+         */
+        this.border = true;
         /**
          * Custom card class
          * @default ''
@@ -1694,41 +1707,54 @@ class ItCardComponent extends ItAbstractComponent {
          * @default ''
          */
         this.bodyClass = '';
+        /**
+         * Shadow type
+         * @default 'sm'
+         */
+        this.shadow = 'sm';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { inline: ["inline", "inline", inputToBoolean], mini: ["mini", "mini", inputToBoolean], border: ["border", "border", inputToBoolean], banner: ["banner", "banner", inputToBoolean], profile: ["profile", "profile", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], reverse: ["reverse", "reverse", inputToBoolean], fullHeight: ["fullHeight", "fullHeight", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], borderTop: ["borderTop", "borderTop", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass", shadow: "shadow" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n  <ng-content></ng-content>\n</ng-template>\n\n<article\n  class=\"it-card rounded {{ cardClass }}\"\n  [class.border]=\"border\"\n  [class.rounded]=\"rounded\"\n  [class.shadow-sm]=\"shadow === 'sm'\"\n  [class.shadow-lg]=\"shadow === 'lg'\"\n  [class.shadow]=\"shadow === 'normal'\"\n  [class.it-card-image]=\"hasImage\"\n  [class.it-card-height-full]=\"fullHeight\"\n  [class.it-card-inline]=\"inline\"\n  [class.it-card-inline-reverse]=\"reverse\"\n  [class.it-card-inline-mini]=\"mini\"\n  [class.it-card-banner]=\"banner\"\n  [class.it-card-profile]=\"profile\"\n  [class.it-card-border-top]=\"borderTop\"\n  [class.it-card-border-top-secondary]=\"borderTop\">\n  <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n</article>\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: "20.0.3", ngImport: i0, type: ItCardComponent, decorators: [{
             type: Component,
-            args: [{ 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: [{
+            args: [{ selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n  <ng-content></ng-content>\n</ng-template>\n\n<article\n  class=\"it-card rounded {{ cardClass }}\"\n  [class.border]=\"border\"\n  [class.rounded]=\"rounded\"\n  [class.shadow-sm]=\"shadow === 'sm'\"\n  [class.shadow-lg]=\"shadow === 'lg'\"\n  [class.shadow]=\"shadow === 'normal'\"\n  [class.it-card-image]=\"hasImage\"\n  [class.it-card-height-full]=\"fullHeight\"\n  [class.it-card-inline]=\"inline\"\n  [class.it-card-inline-reverse]=\"reverse\"\n  [class.it-card-inline-mini]=\"mini\"\n  [class.it-card-banner]=\"banner\"\n  [class.it-card-profile]=\"profile\"\n  [class.it-card-border-top]=\"borderTop\"\n  [class.it-card-border-top-secondary]=\"borderTop\">\n  <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n</article>\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: { inline: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
-            }], special: [{
+            }], mini: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
-            }], hasImage: [{
+            }], border: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }], banner: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }], profile: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
             }], rounded: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
-            }], shadow: [{
+            }], reverse: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
-            }], background: [{
+            }], fullHeight: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
-            }], borderBottom: [{
+            }], hasImage: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
-            }], big: [{
+            }], borderTop: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
             }], cardClass: [{
                 type: Input
             }], bodyClass: [{
                 type: Input
+            }], shadow: [{
+                type: Input
             }] } });
 
 /**
@@ -2140,6 +2166,7 @@ class ItListItemComponent extends ItLinkComponent {
     constructor() {
         super(...arguments);
         this.elRef = inject(ElementRef);
+        this.isHostElement = false;
     }
     /**
      * The avatar url
@@ -2175,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 }]
@@ -3278,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,
@@ -3531,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
@@ -3568,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: [{
@@ -4362,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 }]
@@ -5061,16 +5101,19 @@ class ItUploadFileListComponent extends ItAbstractComponent {
         return ItFileUtils.getFileSizeString(file);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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", "title", "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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", label: "label", 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    @if (label) {\n      <it-icon name=\"upload\" size=\"sm\"></it-icon>\n      <span>{{ label }}</span>\n    } @else {\n      <it-icon name=\"upload\" size=\"sm\"></it-icon>\n      <span>{{ 'it.form.upload' | translate }}</span>\n    }\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", "title", "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: "20.0.3", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
             type: Component,
-            args: [{ 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" }]
+            args: [{ 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    @if (label) {\n      <it-icon name=\"upload\" size=\"sm\"></it-icon>\n      <span>{{ label }}</span>\n    } @else {\n      <it-icon name=\"upload\" size=\"sm\"></it-icon>\n      <span>{{ 'it.form.upload' | translate }}</span>\n    }\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: [{
                 type: Input,
                 args: [{ required: true }]
             }], accept: [{
                 type: Input
+            }], label: [{
+                type: Input,
+                args: [{ required: false }]
             }], multiple: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -5204,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 }]
@@ -6817,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,