design-angular-kit 1.0.3 → 1.1.0

package/esm2022/lib/components/form/rating/rating.component.mjs

@@ -36,10 +36,10 @@ export class ItRatingComponent extends ItAbstractFormComponent {
     generateStars() {
         return Array.from({ length: this.starCount }, (_, i) => i + 1).reverse();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItRatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItRatingComponent, isStandalone: true, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRatingComponent, isStandalone: true, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItRatingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-rating', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ReactiveFormsModule, ItIconComponent], template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n  <legend>\n    <span>{{ label }}</span>\n    <span class=\"visually-hidden\">\n      {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n    </span>\n  </legend>\n\n  @for (starValue of stars; track starValue) {\n    <input\n      [id]=\"id + '-' + starValue\"\n      type=\"radio\"\n      [name]=\"id\"\n      [value]=\"starValue\"\n      [attr.aria-hidden]=\"control.disabled\"\n      [formControl]=\"control\" />\n    <label class=\"full\" [for]=\"id + '-' + starValue\">\n      <it-icon name=\"star-full\" size=\"sm\"></it-icon>\n      <span class=\"visually-hidden\">\n        {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n      </span>\n    </label>\n  }\n</fieldset>\n" }]
         }], propDecorators: { value: [{

package/esm2022/lib/components/form/select/select.component.mjs

@@ -52,10 +52,10 @@ export class ItSelectComponent extends ItAbstractFormComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSelectComponent, isStandalone: true, selector: "it-select", inputs: { options: "options", groups: "groups", description: "description", defaultOption: "defaultOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-select', imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"select-wrapper\">\n  @if (label) {\n    <label [for]=\"id\">{{ label }}</label>\n  }\n  <select\n    [id]=\"id\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    [attr.aria-describedby]=\"id + '-description'\">\n    @if (defaultOption) {\n      <option [ngValue]=\"null\" disabled selected>\n        {{ defaultOption }}\n      </option>\n    }\n\n    <ng-content></ng-content>\n\n    @if (options) {\n      @for (option of options; track option.value) {\n        <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n          {{ option.text ?? option.value }}\n        </option>\n      }\n    }\n\n    @if (groups) {\n      @for (group of groups; track group) {\n        <optgroup [label]=\"group.label\">\n          @for (option of group.options; track option.value) {\n            <option [disabled]=\"optionIsDisabled(option)\" [ngValue]=\"option.value\">\n              {{ option.text ?? option.value }}\n            </option>\n          }\n        </optgroup>\n      }\n    }\n  </select>\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".select-wrapper{margin-bottom:1.7rem}\n"] }]
         }], propDecorators: { options: [{

package/esm2022/lib/components/form/textarea/textarea.component.mjs

@@ -37,10 +37,10 @@ export class ItTextareaComponent extends ItAbstractFormComponent {
     get isReadonly() {
         return this.readonly === 'plaintext' || !!this.readonly;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItTextareaComponent, isStandalone: true, selector: "it-textarea", inputs: { rows: "rows", placeholder: "placeholder", description: "description", readonly: "readonly" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItTextareaComponent, isStandalone: true, selector: "it-textarea", inputs: { rows: "rows", placeholder: "placeholder", description: "description", readonly: "readonly" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItTextareaComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value || !!placeholder\">{{ label }}</label>\n  }\n  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [class.form-control]=\"readonly !== 'plaintext'\"\n    [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [readonly]=\"isReadonly\"\n    (blur)=\"markAsTouched()\"></textarea>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: ["textarea.is-invalid{border-color:#cc334d}\n"] }]
         }], propDecorators: { rows: [{

package/esm2022/lib/components/form/upload-drag-drop/upload-drag-drop.component.mjs

@@ -116,10 +116,10 @@ export class ItUploadDragDropComponent extends ItAbstractComponent {
         this.donut?.set(0);
         this._changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItUploadDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItUploadDragDropComponent, isStandalone: true, selector: "it-upload-drag-drop", inputs: { accept: "accept" }, outputs: { fileStartUpload: "fileStartUpload" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "donutElement", first: true, predicate: ["donutElement"], descendants: true }], exportAs: ["itUploadDragDrop"], usesInheritance: true, ngImport: i0, template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItUploadDragDropComponent, isStandalone: true, selector: "it-upload-drag-drop", inputs: { accept: "accept" }, outputs: { fileStartUpload: "fileStartUpload" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "donutElement", first: true, predicate: ["donutElement"], descendants: true }], exportAs: ["itUploadDragDrop"], usesInheritance: true, ngImport: i0, template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItUploadDragDropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadDragDropComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-upload-drag-drop', exportAs: 'itUploadDragDrop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, NgOptimizedImage], template: "<div class=\"upload-dragdrop\" [class.dragover]=\"isDragover\" [class.loading]=\"isLoading\" [class.success]=\"isSuccess\">\n  <div class=\"upload-dragdrop-image\">\n    <img\n      [ngSrc]=\"assetBasePath + '/dist/assets/upload-drag-drop-icon.svg'\"\n      alt=\"drag-drop-icon\"\n      aria-hidden=\"true\"\n      [width]=\"180\"\n      [height]=\"180\" />\n    <div class=\"upload-dragdrop-loading\">\n      <div class=\"progress-donut\" #donutElement></div>\n    </div>\n    <div class=\"upload-dragdrop-success\">\n      <it-icon name=\"check\"></it-icon>\n    </div>\n  </div>\n  <div class=\"upload-dragdrop-text\">\n    <p class=\"upload-dragdrop-weight\">\n      <it-icon name=\"file\" size=\"xs\"></it-icon>\n      {{ extension }} ({{ fileSize }})\n    </p>\n    <h5>{{ filename || ('it.form.upload-drag-file' | translate) }}</h5>\n    @if (isLoading) {\n      <p>{{ 'it.form.upload-loading' | translate }}</p>\n    }\n    @if (isSuccess) {\n      <p>{{ 'it.form.upload-complete' | translate }}</p>\n    }\n    @if (!isLoading && !isSuccess) {\n      <p>\n        {{ 'it.form.upload-or' | translate }}\n        <input type=\"file\" [id]=\"id\" class=\"upload-dragdrop-input\" [accept]=\"accept\" (change)=\"onLoadFile($event)\" />\n        <label [for]=\"id\">{{ 'it.form.upload-select-device' | translate }}</label>\n      </p>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { accept: [{

package/esm2022/lib/components/form/upload-file-list/upload-file-list.component.mjs

@@ -79,10 +79,10 @@ export class ItUploadFileListComponent extends ItAbstractComponent {
     getFileSize(file) {
         return ItFileUtils.getFileSizeString(file);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-upload-file-list', imports: [ItIconComponent, TranslateModule, ItTooltipDirective, ItProgressBarComponent], template: "@if (!hideLoadButton) {\n  <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n  <label [for]=\"id\">\n    <it-icon name=\"upload\" size=\"sm\"></it-icon>\n    <span>{{ 'it.form.upload' | translate }}</span>\n  </label>\n}\n\n@if (fileList.length) {\n  <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n    @for (item of fileList; track item.id) {\n      <li\n        class=\"upload-file\"\n        [class.error]=\"item.error\"\n        [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n        [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n        @if (images) {\n          <div class=\"upload-image\">\n            <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n          </div>\n        } @else {\n          <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n        }\n        <p [itTooltip]=\"item.tooltip\">\n          <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n          {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n        </p>\n        @if (item.removable && (!item.progress || item.progress < 100)) {\n          <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n            <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n            <it-icon name=\"close\"></it-icon>\n          </button>\n        }\n        @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n          <button type=\"button\" disabled>\n            <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n            <it-icon name=\"check\"></it-icon>\n          </button>\n        }\n        @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n          <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n        }\n      </li>\n    }\n  </ul>\n}\n" }]
         }], propDecorators: { fileList: [{

package/esm2022/lib/components/navigation/back-button/back-button.component.mjs

@@ -45,10 +45,10 @@ export class ItBackButtonComponent {
         }
         this._location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackButtonComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItBackButtonComponent, isStandalone: true, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: ["showIcon", "showIcon", inputToBoolean], showText: ["showText", "showText", inputToBoolean], backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackButtonComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBackButtonComponent, isStandalone: true, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: ["showIcon", "showIcon", inputToBoolean], showText: ["showText", "showText", inputToBoolean], backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-back-button', exportAs: 'itBackButton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItButtonDirective, ItIconComponent, TranslateModule], template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.Location }], propDecorators: { buttonStyle: [{

package/esm2022/lib/components/navigation/back-to-top/back-to-top.component.mjs

@@ -36,10 +36,10 @@ export class ItBackToTopComponent extends ItAbstractComponent {
     dispose() {
         this.backToTop?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItBackToTopComponent, isStandalone: true, selector: "it-back-to-top", inputs: { small: ["small", "small", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  aria-hidden=\"true\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItBackToTopComponent, isStandalone: true, selector: "it-back-to-top", inputs: { small: ["small", "small", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  aria-hidden=\"true\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackToTopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBackToTopComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-back-to-top', exportAs: 'itBackToTop', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent], template: "<a\n  #backToTop\n  [id]=\"id\"\n  href=\"#\"\n  aria-hidden=\"true\"\n  class=\"back-to-top\"\n  [class.back-to-top-small]=\"small\"\n  [class.shadow]=\"shadow\"\n  [class.dark]=\"dark\">\n  <it-icon name=\"arrow-up\" [color]=\"dark ? 'secondary' : 'light'\"></it-icon>\n</a>\n" }]
         }], propDecorators: { small: [{

package/esm2022/lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component.mjs

@@ -33,10 +33,10 @@ export class ItBreadcrumbComponent {
     ngOnDestroy() {
         this.itemSubscriptions?.forEach(item => item.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItBreadcrumbComponent, isStandalone: true, selector: "it-breadcrumb", inputs: { separator: "separator", dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItBreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBreadcrumbComponent, isStandalone: true, selector: "it-breadcrumb", inputs: { separator: "separator", dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItBreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItLinkComponent, NgTemplateOutlet], template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n  @if (items) {\n    <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n      @for (item of items; track item; let isLast = $last) {\n        <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n          @if (item.iconName) {\n            <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n          }\n          @if (!item.active && !isLast) {\n            <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </it-link>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n          }\n          @if (!isLast) {\n            <span class=\"separator\">{{ separator }}</span>\n          }\n        </li>\n      }\n    </ol>\n  }\n</nav>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { separator: [{

package/esm2022/lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component.mjs

@@ -3,10 +3,10 @@ import { ItLinkComponent } from '../../../core/link/link.component';
 import { inputToBoolean } from '../../../../utils/coercion';
 import * as i0 from "@angular/core";
 export class ItBreadcrumbItemComponent extends ItLinkComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItBreadcrumbItemComponent, isStandalone: true, selector: "it-breadcrumb-item", inputs: { active: ["active", "active", inputToBoolean], iconName: "iconName" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItBreadcrumbItemComponent, isStandalone: true, selector: "it-breadcrumb-item", inputs: { active: ["active", "active", inputToBoolean], iconName: "iconName" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { active: [{

package/esm2022/lib/components/navigation/breadcrumbs/breadcrumbs.module.mjs

@@ -4,11 +4,11 @@ import { ItBreadcrumbItemComponent } from './breadcrumb-item/breadcrumb-item.com
 import * as i0 from "@angular/core";
 const breadcrumb = [ItBreadcrumbComponent, ItBreadcrumbItemComponent];
 export class ItBreadcrumbsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent], exports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent], exports: [ItBreadcrumbComponent, ItBreadcrumbItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, imports: [ItBreadcrumbComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBreadcrumbsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: breadcrumb,

package/esm2022/lib/components/navigation/header/header.component.mjs

@@ -50,10 +50,10 @@ export class ItHeaderComponent {
     toggleCollapse() {
         this.itNavBarComponent?.toggleCollapse();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItHeaderComponent, isStandalone: true, selector: "it-header", inputs: { light: ["light", "light", inputToBoolean], sticky: ["sticky", "sticky", inputToBoolean], showSlim: ["showSlim", "showSlim", inputToBoolean], smallHeader: ["smallHeader", "smallHeader", inputToBoolean], showSearch: ["showSearch", "showSearch", inputToBoolean], slimTitle: "slimTitle", slimTitleLink: "slimTitleLink", loginStyle: "loginStyle", megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "itNavBarComponent", first: true, predicate: ItNavBarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "ngmodule", type: ItNavBarModule }, { kind: "component", type: i2.ItNavBarComponent, selector: "it-navbar", inputs: ["megamenu", "expand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItHeaderComponent, isStandalone: true, selector: "it-header", inputs: { light: ["light", "light", inputToBoolean], sticky: ["sticky", "sticky", inputToBoolean], showSlim: ["showSlim", "showSlim", inputToBoolean], smallHeader: ["smallHeader", "smallHeader", inputToBoolean], showSearch: ["showSearch", "showSearch", inputToBoolean], slimTitle: "slimTitle", slimTitleLink: "slimTitleLink", loginStyle: "loginStyle", megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "itNavBarComponent", first: true, predicate: ItNavBarComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "ngmodule", type: ItNavBarModule }, { kind: "component", type: i2.ItNavBarComponent, selector: "it-navbar", inputs: ["megamenu", "expand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItHeaderComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule], template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { light: [{

package/esm2022/lib/components/navigation/megamenu/megamenu.component.mjs

@@ -9,10 +9,10 @@ export class ItMegamenuComponent {
          */
         this.mode = 'normal';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItMegamenuComponent, isStandalone: true, selector: "it-megamenu", inputs: { mode: "mode", header: ["header", "header", inputToBoolean], footer: ["footer", "footer", inputToBoolean] }, ngImport: i0, template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItMegamenuComponent, isStandalone: true, selector: "it-megamenu", inputs: { mode: "mode", header: ["header", "header", inputToBoolean], footer: ["footer", "footer", inputToBoolean] }, ngImport: i0, template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItMegamenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItMegamenuComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div class=\"megamenu pb-5 pt-3 py-lg-0\">\n  <div class=\"row\">\n    @if (mode === 'left-section') {\n      <div class=\"col-xs-12 col-lg-4 px-0\">\n        <div class=\"row\">\n          <div class=\"col-12 it-vertical it-description pb-lg-3\">\n            <div class=\"description-content ps-4 ps-sm-5 ms-3\">\n              <ng-content select=\"[megamenuLeftZone]\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div class=\"col-12\" [class.col-lg-8]=\"mode !== 'normal'\">\n      @if (header) {\n        <div class=\"it-heading-link-wrapper\">\n          <ng-content select=\"[megamenuHeadingLink]\"></ng-content>\n        </div>\n      }\n      <div class=\"row\">\n        <ng-content select=\"[megamenuLinkList]\"></ng-content>\n      </div>\n    </div>\n    @if (footer || mode === 'right-section') {\n      <div [class.col-xs-12]=\"mode === 'right-section'\" [class.col-lg-4]=\"mode === 'right-section'\" [class.px-0]=\"mode === 'right-section'\">\n        <div [class.it-footer-link-wrapper]=\"footer\" [class.it-footer-link-wrapper-vertical]=\"mode === 'right-section'\">\n          <div class=\"d-flex flex-column justify-content-around\" [class.flex-lg-row]=\"mode !== 'right-section'\">\n            <ng-content select=\"[megamenuFooter]\"></ng-content>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["::ng-deep .theme-light-desk .nav-link:before{background-color:#06c}\n"] }]
         }], propDecorators: { mode: [{

package/esm2022/lib/components/navigation/navbar/navbar/navbar.component.mjs

@@ -18,10 +18,10 @@ export class ItNavBarComponent {
     toggleCollapse() {
         this.navbar?.toggle(this.collapseButton?.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItNavBarComponent, isStandalone: true, selector: "it-navbar", inputs: { megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, viewQueries: [{ propertyName: "collapseButton", first: true, predicate: ["collapseButton"], descendants: true }, { propertyName: "collapseView", first: true, predicate: ["collapseView"], descendants: true }], ngImport: i0, template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItNavBarComponent, isStandalone: true, selector: "it-navbar", inputs: { megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, viewQueries: [{ propertyName: "collapseButton", first: true, predicate: ["collapseButton"], descendants: true }, { propertyName: "collapseView", first: true, predicate: ["collapseView"], descendants: true }], ngImport: i0, template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective], template: "<nav\n  class=\"navbar\"\n  [class.navbar-expand-lg]=\"expand\"\n  [class.has-megamenu]=\"megamenu\"\n  [attr.aria-label]=\"'it.navbar.aria-label-main' | translate\">\n  <button\n    (click)=\"toggleCollapse()\"\n    #collapseButton\n    class=\"custom-navbar-toggler\"\n    type=\"button\"\n    [attr.aria-label]=\"'it.navbar.aria-label-toggle' | translate\">\n    <it-icon name=\"burger\"></it-icon>\n  </button>\n  <div #collapseView class=\"navbar-collapsable\" style=\"display: none\">\n    <div class=\"overlay\" style=\"display: none\"></div>\n    <div class=\"close-div\">\n      <button class=\"btn close-menu\" type=\"button\">\n        <span class=\"visually-hidden\">{{ 'it.navbar.hide' | translate }}</span>\n        <it-icon name=\"close-big\"></it-icon>\n      </button>\n    </div>\n    <div class=\"menu-wrapper\">\n      <ul class=\"navbar-nav\">\n        <ng-content select=\"[navItems]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</nav>\n" }]
         }], propDecorators: { megamenu: [{

package/esm2022/lib/components/navigation/navbar/navbar-item/navbar-item.component.mjs

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class ItNavBarItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItNavBarItemComponent, isStandalone: true, selector: "it-navbar-item", ngImport: i0, template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItNavBarItemComponent, isStandalone: true, selector: "it-navbar-item", ngImport: i0, template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-navbar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<li class=\"nav-item\">\n  <ng-content></ng-content>\n</li>\n" }]
         }] });

package/esm2022/lib/components/navigation/navbar/navbar.module.mjs

@@ -4,11 +4,11 @@ import { ItNavBarItemComponent } from './navbar-item/navbar-item.component';
 import * as i0 from "@angular/core";
 const navbarComponents = [ItNavBarComponent, ItNavBarItemComponent];
 export class ItNavBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent, ItNavBarItemComponent], exports: [ItNavBarComponent, ItNavBarItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent, ItNavBarItemComponent], exports: [ItNavBarComponent, ItNavBarItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, imports: [ItNavBarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItNavBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItNavBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: navbarComponents,

package/esm2022/lib/components/navigation/sidebar/sidebar.component.mjs

@@ -17,10 +17,10 @@ export class ItSidebarComponent {
         this.dark = false;
         this.componentClass = 'd-block sidebar-wrapper';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItSidebarComponent, isStandalone: true, selector: "it-sidebar", inputs: { withRightLine: ["withRightLine", "withRightLine", inputToBoolean], withLeftLine: ["withLeftLine", "withLeftLine", inputToBoolean], dark: ["dark", "dark", inputToBoolean], header: "header" }, host: { properties: { "class.it-line-right-side": "this.withRightLine", "class.it-line-left-side": "this.withLeftLine", "class.theme-dark": "this.dark", "class": "this.componentClass" } }, ngImport: i0, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSidebarComponent, isStandalone: true, selector: "it-sidebar", inputs: { withRightLine: ["withRightLine", "withRightLine", inputToBoolean], withLeftLine: ["withLeftLine", "withLeftLine", inputToBoolean], dark: ["dark", "dark", inputToBoolean], header: "header" }, host: { properties: { "class.it-line-right-side": "this.withRightLine", "class.it-line-left-side": "this.withLeftLine", "class.theme-dark": "this.dark", "class": "this.componentClass" } }, ngImport: i0, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-sidebar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (header) {\n  <h3>{{ header }}</h3>\n}\n<div class=\"sidebar-linklist-wrapper\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content></ng-content>\n</div>\n<div class=\"sidebar-linklist-wrapper linklist-secondary\">\n  <!--TODO: wrap ng-content with it-list -> inside content use a list of it-list-item directives-->\n  <ng-content select=\"[secondary]\"></ng-content>\n</div>\n" }]
         }], propDecorators: { withRightLine: [{

package/esm2022/lib/components/utils/error-page/error-page.component.mjs

@@ -49,10 +49,10 @@ export class ItErrorPageComponent {
     get isDefaultErrorCode() {
         return this.errorCode === 404 || this.errorCode === 403 || this.errorCode === 500;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItErrorPageComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItErrorPageComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItErrorPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItErrorPageComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-error-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RouterLink, ItBackButtonComponent, ItButtonDirective], template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }], propDecorators: { errorCode: [{

package/esm2022/lib/components/utils/icon/icon.component.mjs

@@ -34,10 +34,10 @@ export class ItIconComponent {
     constructor() {
         this.assetBasePath = inject(IT_ASSET_BASE_PATH);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", labelWaria: "labelWaria" }, ngImport: i0, template: "<svg [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"labelWaria\" [class]=\"iconClass\">\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItIconComponent, isStandalone: true, selector: "it-icon", inputs: { name: "name", size: "size", color: "color", padded: ["padded", "padded", inputToBoolean], svgClass: "svgClass", labelWaria: "labelWaria" }, ngImport: i0, template: "<svg [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"labelWaria\" [class]=\"iconClass\">\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItIconComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<svg [attr.aria-hidden]=\"isAriaHidden\" [attr.aria-label]=\"labelWaria\" [class]=\"iconClass\">\n  <use [attr.href]=\"iconHref\" [attr.xlink:href]=\"iconHref\"></use>\n</svg>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{

package/esm2022/lib/components/utils/language-switcher/language-switcher.component.mjs

@@ -36,10 +36,10 @@ export class ItLanguageSwitcherComponent {
     changeLanguage(lang) {
         this.translateService.use(lang);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: i2.ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: i3.ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItLanguageSwitcherComponent, isStandalone: true, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages", mode: "mode" }, ngImport: i0, template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: i2.ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "component", type: i3.ItDropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItLanguageSwitcherComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateModule, ItDropdownModule], template: "<it-dropdown [mode]=\"mode\">\n  <ng-container button>\n    <span class=\"visually-hidden\">{{ 'it.utils.selected' | translate: { lang: (currentLang$ | async)?.label } }}</span>\n    <span>{{ (currentLang$ | async)?.label || ('it.utils.select-language' | translate) }}</span>\n  </ng-container>\n\n  @if (availableLanguages) {\n    <ng-container list>\n      @for (lang of availableLanguages; track lang.code) {\n        <it-dropdown-item (click)=\"changeLanguage(lang.code)\" [active]=\"lang.code === (currentLang$ | async)?.code\">\n          {{ lang.label }}\n          @if (lang.code === (currentLang$ | async)?.code) {\n            <span class=\"visually-hidden\">\n              {{ 'it.utils.selected' | translate }}\n            </span>\n          }\n        </it-dropdown-item>\n      }\n    </ng-container>\n  }\n</it-dropdown>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { availableLanguages: [{