design-angular-kit 1.0.1 → 1.0.3

package/fesm2022/design-angular-kit.mjs

@@ -7,7 +7,7 @@ import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import * as i1$3 from '@angular/common';
-import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, LowerCasePipe, NgOptimizedImage } from '@angular/common';
+import { NgTemplateOutlet, NgClass, DOCUMENT, AsyncPipe, LowerCasePipe, NgOptimizedImage, DatePipe } from '@angular/common';
 import * as i1$4 from '@angular/router';
 import { RouterLink } from '@angular/router';
 import { startWith, Subject, filter, debounceTime, distinctUntilChanged, tap, switchMap, of, merge, map, Observable, take, forkJoin, timer, takeWhile, shareReplay } from 'rxjs';
@@ -935,6 +935,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 class ItButtonDirective {
     constructor(progressButtonComponent) {
         this.progressButtonComponent = progressButtonComponent;
+        /**
+         * The type attribute
+         * @default button
+         */
+        this.type = 'button';
         this.isFocus = false;
     }
     onFocus() {
@@ -969,7 +974,7 @@ class ItButtonDirective {
         return cssClass;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItButtonDirective, deps: [{ token: ItProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean] }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "type": "this.type", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItButtonDirective, decorators: [{
             type: Directive,
@@ -995,6 +1000,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }, {
                 type: HostBinding,
                 args: ['disabled']
+            }], type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['type']
             }], icons: [{
                 type: ContentChildren,
                 args: [ItIconComponent]
@@ -2243,6 +2253,10 @@ const VAT_NUMBER_REGEX = /^[0-9]{11}$/;
  * Italian CAP Regex
  */
 const CAP_REGEX = /^[0-9]{5}$/;
+/**
+ * Italian Plate Regex
+ */
+const PLATE_REGEX = /^[A-Za-z]{2}\d{3}[A-Za-z]{2}$/i;
 /**
  * IBAN Regex
  * https://blog.marketto.it/en/2018/06/validate-any-country-iban/
@@ -2379,6 +2393,12 @@ class ItValidators {
     static get iban() {
         return ItValidators.customPattern(IBAN_REGEX, { invalidIban: true });
     }
+    /**
+     * Italian plate validator
+     */
+    static get plate() {
+        return ItValidators.customPattern(PLATE_REGEX, { invalidPlate: true });
+    }
     /**
      * Check if value is a valid RegExp
      */
@@ -2479,6 +2499,9 @@ class ItInputComponent extends ItAbstractFormComponent {
         if (this.hasError('invalidIban')) {
             return this._translateService.get('it.errors.iban-invalid');
         }
+        if (this.hasError('invalidPlate')) {
+            return this._translateService.get('it.errors.plate-invalid');
+        }
         if (this.hasError('invalidRegex')) {
             return this._translateService.get('it.errors.regex-invalid');
         }
@@ -2721,7 +2744,7 @@ class ItPopoverDirective {
      */
     set popoverContainer(container) {
         if (container) {
-            this.element.setAttribute('data-container', container);
+            this.element.setAttribute('data-bs-container', container);
         }
     }
     /**
@@ -2944,7 +2967,7 @@ class ItSteppersContainerComponent {
         this.stepsSubscriptions?.forEach(step => step.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItSteppersContainerComponent, isStandalone: true, selector: "it-steppers-container", inputs: { activeStep: "activeStep", showHeader: ["showHeader", "showHeader", inputToBoolean], dark: ["dark", "dark", inputToBoolean], steppersNumber: ["steppersNumber", "steppersNumber", inputToBoolean], progressStyle: "progressStyle", progressColor: "progressColor", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], disableBackButton: ["disableBackButton", "disableBackButton", inputToBoolean], showForwardButton: ["showForwardButton", "showForwardButton", inputToBoolean], disableForwardButton: ["disableForwardButton", "disableForwardButton", inputToBoolean], showConfirmButton: ["showConfirmButton", "showConfirmButton", inputToBoolean], disableConfirmButton: ["disableConfirmButton", "disableConfirmButton", inputToBoolean], confirmLoading: ["confirmLoading", "confirmLoading", inputToBoolean], showSaveButton: ["showSaveButton", "showSaveButton", inputToBoolean], disableSaveButton: ["disableSaveButton", "disableSaveButton", inputToBoolean], saveLoading: ["saveLoading", "saveLoading", inputToBoolean] }, outputs: { backClick: "backClick", forwardClick: "forwardClick", confirmClick: "confirmClick", saveClick: "saveClick" }, queries: [{ propertyName: "steps", predicate: ItSteppersItemComponent }], ngImport: i0, template: "<div class=\"steppers\" [class.bg-dark]=\"dark\">\n  @if (showHeader) {\n    <div class=\"steppers-header\">\n      @if (steps) {\n        <ul>\n          @for (step of steps; track step.id; let i = $index) {\n            <li [class.confirmed]=\"i < activeStep\" [class.active]=\"i === activeStep\" [class.no-line]=\"i === activeStep && steppersNumber\">\n              @if (step.icon && !steppersNumber) {\n                <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" [name]=\"step.icon\"></it-icon>\n              }\n              @if (steppersNumber) {\n                <span class=\"steppers-number\">\n                  @if (i < activeStep) {\n                    <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n                  } @else {\n                    <span class=\"visually-hidden\">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}\n                  }\n                </span>\n              }\n              {{ step.label }}\n              @if (i < activeStep && !steppersNumber) {\n                <ng-container *ngTemplateOutlet=\"checkIcon\"></ng-container>\n              }\n              @if (i === activeStep) {\n                <span class=\"visually-hidden\">{{ 'it.core.active' | translate }}</span>\n              }\n            </li>\n          }\n        </ul>\n      }\n      @if (steps) {\n        <span class=\"steppers-index\" aria-hidden=\"true\">\n          @if (!steppersNumber) {\n            {{ activeStep + 1 + '/' + steps.length }}\n          } @else {\n            @for (step of steps; track step.id; let i = $index) {\n              <span [class.active]=\"i === activeStep\">{{ i + 1 }}</span>\n            }\n          }\n        </span>\n      }\n    </div>\n  }\n\n  @if (steps?.get(activeStep); as step) {\n    <div class=\"steppers-content\" aria-live=\"polite\">\n      <ng-container *ngTemplateOutlet=\"step.htmlContent\"></ng-container>\n    </div>\n  }\n\n  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {\n    <nav class=\"steppers-nav\">\n      @if (showBackButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-prev\"\n          [disabled]=\"disableBackButton\"\n          (click)=\"backClick.emit(activeStep)\">\n          <it-icon [labelWaria]=\"'it.core.back' | translate\" name=\"chevron-left\" color=\"primary\"></it-icon>\n          {{ 'it.core.back' | translate }}\n        </button>\n      }\n      @if (!!progressStyle && steps) {\n        @if (progressStyle === 'dots') {\n          <ul class=\"steppers-dots\">\n            @for (step of steps; track step; let i = $index) {\n              <li [class.done]=\"i < activeStep\">\n                <span class=\"visually-hidden\">\n                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}\n                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}\n                </span>\n              </li>\n            }\n          </ul>\n        } @else {\n          <div class=\"steppers-progress\">\n            <it-progress-bar [color]=\"progressColor\" [value]=\"(activeStep / (steps?.length || 1)) * 100\"></it-progress-bar>\n          </div>\n        }\n      }\n      @if (showSaveButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-save\"\n          [progress]=\"saveLoading\"\n          [disabled]=\"saveLoading || disableSaveButton\"\n          (click)=\"saveClick.emit(activeStep)\">\n          {{ 'it.general.save' | translate }}\n        </button>\n      }\n      @if (showForwardButton) {\n        <button\n          type=\"button\"\n          itButton=\"outline-primary\"\n          size=\"sm\"\n          class=\"steppers-btn-next\"\n          [disabled]=\"disableForwardButton\"\n          (click)=\"forwardClick.emit(activeStep)\">\n          {{ 'it.core.forward' | translate }}\n          <it-icon [labelWaria]=\"'it.core.forward' | translate\" name=\"chevron-right\" color=\"primary\"></it-icon>\n        </button>\n      }\n      @if (showConfirmButton) {\n        <button\n          type=\"button\"\n          itButton=\"primary\"\n          size=\"sm\"\n          class=\"steppers-btn-confirm d-lg-block\"\n          [progress]=\"confirmLoading\"\n          [disabled]=\"confirmLoading || disableConfirmButton\"\n          (click)=\"confirmClick.emit(activeStep)\">\n          {{ 'it.core.confirm' | translate }}\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-template #checkIcon>\n  <it-icon [labelWaria]=\"'it.core.confirmed' | translate\" name=\"check\" class=\"steppers-success\"></it-icon>\n  <span class=\"visually-hidden\">{{ 'it.core.confirmed' | translate }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }, { kind: "component", type: ItProgressButtonComponent, selector: "button[itButton][progress]", inputs: ["progress", "progressColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItSteppersContainerComponent, decorators: [{
             type: Component,
@@ -3058,6 +3081,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class ItTabContainerComponent extends ItAbstractComponent {
+    constructor() {
+        super();
+        this.tabSelected = new EventEmitter();
+    }
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this.tabs?.changes
@@ -3088,13 +3115,16 @@ class ItTabContainerComponent extends ItAbstractComponent {
     ngOnDestroy() {
         this.tabSubscriptions?.forEach(sub => sub.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItTabContainerComponent, isStandalone: true, selector: "it-tab-container", inputs: { auto: ["auto", "auto", inputToBoolean], iconText: ["iconText", "iconText", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "tabs", predicate: ItTabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (tabs) {\n  <ul class=\"nav nav-tabs\" [class.auto]=\"auto\" [class.nav-tabs-icon-text]=\"iconText\" [class.nav-dark]=\"dark\" role=\"tablist\">\n    @for (tab of tabs; track tab.id) {\n      <li class=\"nav-item\">\n        <a\n          #tabNavLinks\n          [id]=\"tab.id + '-tab-link'\"\n          role=\"tab\"\n          class=\"nav-link\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [attr.href]=\"'#' + tab.id + '-tab'\"\n          [attr.aria-controls]=\"tab.id + '-tab'\">\n          @if (tab.icon) {\n            <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n          }\n          {{ tab.label }}\n        </a>\n      </li>\n    }\n  </ul>\n}\n\n@if (tabs) {\n  <div class=\"tab-content\">\n    @for (tab of tabs; track tab.id) {\n      <div\n        [id]=\"tab.id + '-tab'\"\n        class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n        [class.active]=\"tab.active\"\n        [class.show]=\"tab.active\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n        <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onTab(tab) {
+        this.tabSelected.emit(tab);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItTabContainerComponent, isStandalone: true, selector: "it-tab-container", inputs: { auto: ["auto", "auto", inputToBoolean], iconText: ["iconText", "iconText", inputToBoolean], dark: ["dark", "dark", inputToBoolean] }, outputs: { tabSelected: "tabSelected" }, queries: [{ propertyName: "tabs", predicate: ItTabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (tabs) {\n  <ul class=\"nav nav-tabs\" [class.auto]=\"auto\" [class.nav-tabs-icon-text]=\"iconText\" [class.nav-dark]=\"dark\" role=\"tablist\">\n    @for (tab of tabs; track tab.id) {\n      <li class=\"nav-item\">\n        <a\n          #tabNavLinks\n          [id]=\"tab.id + '-tab-link'\"\n          role=\"tab\"\n          class=\"nav-link\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [attr.href]=\"'#' + tab.id + '-tab'\"\n          [attr.aria-controls]=\"tab.id + '-tab'\"\n          (click)=\"onTab(tab)\">\n          @if (tab.icon) {\n            <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n          }\n          {{ tab.label }}\n        </a>\n      </li>\n    }\n  </ul>\n}\n\n@if (tabs) {\n  <div class=\"tab-content\">\n    @for (tab of tabs; track tab.id) {\n      <div\n        [id]=\"tab.id + '-tab'\"\n        class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n        [class.active]=\"tab.active\"\n        [class.show]=\"tab.active\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n        <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTabContainerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "@if (tabs) {\n  <ul class=\"nav nav-tabs\" [class.auto]=\"auto\" [class.nav-tabs-icon-text]=\"iconText\" [class.nav-dark]=\"dark\" role=\"tablist\">\n    @for (tab of tabs; track tab.id) {\n      <li class=\"nav-item\">\n        <a\n          #tabNavLinks\n          [id]=\"tab.id + '-tab-link'\"\n          role=\"tab\"\n          class=\"nav-link\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [attr.href]=\"'#' + tab.id + '-tab'\"\n          [attr.aria-controls]=\"tab.id + '-tab'\">\n          @if (tab.icon) {\n            <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n          }\n          {{ tab.label }}\n        </a>\n      </li>\n    }\n  </ul>\n}\n\n@if (tabs) {\n  <div class=\"tab-content\">\n    @for (tab of tabs; track tab.id) {\n      <div\n        [id]=\"tab.id + '-tab'\"\n        class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n        [class.active]=\"tab.active\"\n        [class.show]=\"tab.active\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n        <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n      </div>\n    }\n  </div>\n}\n" }]
-        }], propDecorators: { auto: [{
+            args: [{ standalone: true, selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], template: "@if (tabs) {\n  <ul class=\"nav nav-tabs\" [class.auto]=\"auto\" [class.nav-tabs-icon-text]=\"iconText\" [class.nav-dark]=\"dark\" role=\"tablist\">\n    @for (tab of tabs; track tab.id) {\n      <li class=\"nav-item\">\n        <a\n          #tabNavLinks\n          [id]=\"tab.id + '-tab-link'\"\n          role=\"tab\"\n          class=\"nav-link\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [attr.href]=\"'#' + tab.id + '-tab'\"\n          [attr.aria-controls]=\"tab.id + '-tab'\"\n          (click)=\"onTab(tab)\">\n          @if (tab.icon) {\n            <it-icon [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n          }\n          {{ tab.label }}\n        </a>\n      </li>\n    }\n  </ul>\n}\n\n@if (tabs) {\n  <div class=\"tab-content\">\n    @for (tab of tabs; track tab.id) {\n      <div\n        [id]=\"tab.id + '-tab'\"\n        class=\"tab-pane p-4 fade {{ tab.class ?? '' }}\"\n        [class.active]=\"tab.active\"\n        [class.show]=\"tab.active\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"tab.id + '-tab-link'\">\n        <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { auto: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
             }], iconText: [{
@@ -3109,6 +3139,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }], tabNavLinks: [{
                 type: ViewChildren,
                 args: ['tabNavLinks']
+            }], tabSelected: [{
+                type: Output
             }] } });
 
 const tabComponents = [ItTabContainerComponent, ItTabItemComponent];
@@ -4547,7 +4579,7 @@ class ItBackButtonComponent {
         this._location.back();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackButtonComponent, deps: [{ token: i1$3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItBackButtonComponent, isStandalone: true, selector: "it-back-button", inputs: { buttonStyle: "buttonStyle", direction: "direction", showIcon: ["showIcon", "showIcon", inputToBoolean], showText: ["showText", "showText", inputToBoolean], backFn: "backFn" }, exportAs: ["itBackButton"], ngImport: i0, template: "@if (buttonStyle === 'link') {\n  <a href=\"#\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n}\n\n@if (buttonStyle === 'button') {\n  <button itButton=\"primary\" class=\"go-back\" (click)=\"goBack($event)\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </button>\n}\n\n<ng-template #content>\n  @if (showIcon) {\n    <it-icon\n      size=\"sm\"\n      [name]=\"direction === 'left' ? 'arrow-left' : 'arrow-up'\"\n      [color]=\"buttonStyle === 'link' ? 'primary' : 'white'\"\n      [class.me-2]=\"showText\"></it-icon>\n  }\n\n  <span [class.visually-hidden]=\"!showText\">\n    {{ (direction === 'left' ? 'it.navigation.go-back' : 'it.navigation.upper-level') | translate }}\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵ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: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBackButtonComponent, decorators: [{
             type: Component,
@@ -4750,6 +4782,7 @@ class ItHeaderComponent {
         this.showSlim = true;
         this.smallHeader = true;
         this.showSearch = true;
+        this.slimTitleLink = '#';
         this.loginStyle = 'none';
         this.expand = true;
         this.loginClick = new EventEmitter();
@@ -4782,12 +4815,15 @@ class ItHeaderComponent {
         event.preventDefault();
         this.searchClick.emit(event);
     }
+    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", loginStyle: "loginStyle", megamenu: ["megamenu", "megamenu", inputToBoolean], expand: ["expand", "expand", inputToBoolean] }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" href=\"#\">{{ slimTitle }}</a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "ngmodule", type: ItNavBarModule }, { kind: "component", type: ItNavBarComponent, selector: "it-navbar", inputs: ["megamenu", "expand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: 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: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule], template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" href=\"#\">{{ slimTitle }}</a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
+            args: [{ standalone: true, selector: 'it-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItButtonDirective, ItNavBarModule], template: "<header\n  #headerWrapper\n  class=\"it-header-wrapper\"\n  [class.it-header-sticky]=\"sticky\"\n  data-bs-position-type=\"fixed\"\n  data-bs-sticky-class-name=\"is-sticky\"\n  data-bs-target=\"#header-nav-wrapper\">\n  @if (showSlim) {\n    <div class=\"it-header-slim-wrapper\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-slim-wrapper-content\">\n              <a class=\"d-none d-lg-block navbar-brand\" [href]=\"slimTitleLink\" [target]=\"slimTitleLink !== '#' ? '_blank' : '_self'\">\n                {{ slimTitle }}\n              </a>\n              <div class=\"nav-mobile\">\n                <nav [attr.aria-label]=\"'it.navigation.secondary-navigation' | translate\">\n                  <a\n                    class=\"it-opener d-lg-none\"\n                    data-bs-toggle=\"collapse\"\n                    href=\"#menuC1\"\n                    role=\"button\"\n                    aria-expanded=\"false\"\n                    aria-controls=\"menuC1\">\n                    <span>{{ slimTitle }}</span>\n                    <it-icon name=\"expand\"></it-icon>\n                  </a>\n                  <div class=\"link-list-wrapper collapse\" id=\"menuC1\">\n                    <ng-content select=\"[slimLinkList]\"></ng-content>\n                  </div>\n                </nav>\n              </div>\n              <div class=\"it-header-slim-right-zone\">\n                <ng-content select=\"[slimRightZone]\"></ng-content>\n                @if (loginStyle === 'default') {\n                  <div class=\"it-access-top-wrapper\">\n                    <a class=\"btn btn-primary btn-sm\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                      {{ 'it.navigation.login' | translate }}\n                    </a>\n                  </div>\n                }\n                @if (loginStyle === 'full') {\n                  <a itButton=\"primary\" class=\"btn-full btn-icon\" (click)=\"emitLoginClick($event)\" href=\"#\">\n                    <span class=\"rounded-icon\">\n                      <it-icon name=\"user\" color=\"primary\"></it-icon>\n                    </span>\n                    <span class=\"d-none d-lg-block\">{{ 'it.navigation.full-login' | translate }}</span>\n                  </a>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"smallHeader\" [class.theme-light]=\"light\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"it-header-center-content-wrapper\">\n              <div class=\"it-brand-wrapper\">\n                <ng-content select=\"[brand]\"></ng-content>\n              </div>\n              <div class=\"it-right-zone\">\n                <ng-content select=\"[rightZone]\"></ng-content>\n\n                @if (showSearch) {\n                  <div class=\"it-search-wrapper\">\n                    <span class=\"d-none d-md-block\">{{ 'it.navigation.search' | translate }}</span>\n                    <a\n                      href=\"#\"\n                      class=\"search-link rounded-icon\"\n                      [attr.aria-label]=\"'it.navigation.website-search' | translate\"\n                      (click)=\"emitSearchClick($event)\">\n                      <it-icon name=\"search\"></it-icon>\n                    </a>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"it-header-navbar-wrapper\" [class.theme-light-desk]=\"light\" id=\"header-nav-wrapper\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <it-navbar [megamenu]=\"megamenu\" [expand]=\"expand\">\n              <ng-container navItems>\n                <ng-content select=\"[navItems]\"></ng-content>\n              </ng-container>\n            </it-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { light: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -4805,6 +4841,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 args: [{ transform: inputToBoolean }]
             }], slimTitle: [{
                 type: Input
+            }], slimTitleLink: [{
+                type: Input
             }], loginStyle: [{
                 type: Input
             }], loginClick: [{
@@ -4814,6 +4852,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }], headerWrapper: [{
                 type: ViewChild,
                 args: ['headerWrapper']
+            }], itNavBarComponent: [{
+                type: ViewChild,
+                args: [ItNavBarComponent]
             }], megamenu: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
@@ -4912,7 +4953,7 @@ class ItErrorPageComponent {
         return this.errorCode === 404 || this.errorCode === 403 || this.errorCode === 500;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItErrorPageComponent, deps: [{ token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItErrorPageComponent, isStandalone: true, selector: "it-error-page", inputs: { errorCode: "errorCode", showErrorCode: ["showErrorCode", "showErrorCode", inputToBoolean], errorTitle: "errorTitle", errorDescription: "errorDescription", showBackButton: ["showBackButton", "showBackButton", inputToBoolean], showHomeButton: ["showHomeButton", "showHomeButton", inputToBoolean] }, ngImport: i0, template: "<div class=\"container text-center mt-5\">\n  @if (errorCode && showErrorCode) {\n    <h1>{{ errorCode }}</h1>\n  }\n  <h2>\n    @if (!errorTitle && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}\n    } @else {\n      {{ errorTitle || 'it.errors.generic' | translate }}\n    }\n  </h2>\n\n  <p class=\"mt-3 w-75 mx-auto\">\n    @if (!errorDescription && isDefaultErrorCode) {\n      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}\n    } @else {\n      {{ errorDescription || 'it.errors.generic-support-message' | translate }}\n    }\n  </p>\n\n  @if (showBackButton || showHomeButton) {\n    <div class=\"mt-5\">\n      @if (showBackButton) {\n        <it-back-button></it-back-button>\n      }\n      @if (showHomeButton) {\n        <a itButton=\"outline-primary\" class=\"ms-3\" routerLink=\"/\" title=\"{{ 'it.utils.error-page.go-to-homepage' | translate }}\">\n          {{ 'it.utils.error-page.go-to-homepage' | translate }}\n        </a>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ItBackButtonComponent, selector: "it-back-button", inputs: ["buttonStyle", "direction", "showIcon", "showText", "backFn"], exportAs: ["itBackButton"] }, { kind: "directive", type: ItButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled", "type"], exportAs: ["itButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItErrorPageComponent, decorators: [{
             type: Component,
@@ -5140,6 +5181,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 }]
         }] });
 
+/**
+ * Timeline Item
+ * @description Represents a single event for Timeline component.
+ */
+class ItTimelineItemComponent extends ItAbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Timeline element reference date format
+         * @default dd/MM/yyyy
+         */
+        this.dateFormat = 'dd/MM/yyyy';
+        /**
+         * Timeline element PIN type
+         * @default none
+         */
+        this.pinType = 'default';
+        /**
+         * Timeline element PIN icon
+         * @default code-circle
+         */
+        this.pinIcon = 'code-circle';
+        /**
+         * Timeline element show detail link
+         * @default false
+         */
+        this.showReadMore = false;
+        /** Timeline element detail link
+         * @default #
+         */
+        this.readMoreLink = '#';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItTimelineItemComponent, isStandalone: true, selector: "it-timeline-item", inputs: { title: "title", text: "text", signature: "signature", eventDate: "eventDate", dateFormat: "dateFormat", pinText: "pinText", pinType: "pinType", pinIcon: "pinIcon", categoryTitle: "categoryTitle", categoryLink: "categoryLink", showReadMore: ["showReadMore", "showReadMore", inputToBoolean], readMoreLink: "readMoreLink" }, usesInheritance: true, ngImport: i0, template: "<div class=\"timeline-element\">\n  @if (pinType === 'now') {\n    <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n  }\n  <div class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n    <div class=\"pin-icon\">\n      @if (pinIcon) {\n        <it-icon [name]=\"pinIcon\"></it-icon>\n      } @else {\n        <it-icon name=\"code-circle\"></it-icon>\n      }\n    </div>\n    <div class=\"pin-text\">\n      <span>{{ pinText }}</span>\n    </div>\n  </div>\n  <div class=\"card-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if ((categoryTitle && categoryLink) || eventDate) {\n          <div class=\"category-top\">\n            @if (categoryTitle) {\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h5 class=\"card-title\">{{ title }}</h5>\n        <p class=\"card-text\">{{ text }}</p>\n        @if (signature) {\n          <span class=\"card-signature\">{{ signature }}</span>\n        }\n        @if (showReadMore) {\n          <a class=\"read-more\" [href]=\"readMoreLink\">\n            <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n            <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n            <it-icon name=\"arrow-right\"></it-icon>\n          </a>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTimelineItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-timeline-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, DatePipe, TranslateModule, NgClass], template: "<div class=\"timeline-element\">\n  @if (pinType === 'now') {\n    <span class=\"it-now-label d-none d-lg-flex\">{{ 'it.timeline.today' | translate }}</span>\n  }\n  <div class=\"it-pin-wrapper\" [ngClass]=\"{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }\">\n    <div class=\"pin-icon\">\n      @if (pinIcon) {\n        <it-icon [name]=\"pinIcon\"></it-icon>\n      } @else {\n        <it-icon name=\"code-circle\"></it-icon>\n      }\n    </div>\n    <div class=\"pin-text\">\n      <span>{{ pinText }}</span>\n    </div>\n  </div>\n  <div class=\"card-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if ((categoryTitle && categoryLink) || eventDate) {\n          <div class=\"category-top\">\n            @if (categoryTitle) {\n              <a class=\"category\" [href]=\"categoryLink\">{{ categoryTitle }}</a>\n            }\n            @if (eventDate) {\n              <span class=\"data\">{{ eventDate | date: dateFormat }}</span>\n            }\n          </div>\n        }\n        <h5 class=\"card-title\">{{ title }}</h5>\n        <p class=\"card-text\">{{ text }}</p>\n        @if (signature) {\n          <span class=\"card-signature\">{{ signature }}</span>\n        }\n        @if (showReadMore) {\n          <a class=\"read-more\" [href]=\"readMoreLink\">\n            <span class=\"text\">{{ 'it.timeline.read-more' | translate }}</span>\n            <span class=\"visually-hidden\">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>\n            <it-icon name=\"arrow-right\"></it-icon>\n          </a>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], signature: [{
+                type: Input
+            }], eventDate: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], pinText: [{
+                type: Input,
+                args: [{ required: true }]
+            }], pinType: [{
+                type: Input
+            }], pinIcon: [{
+                type: Input
+            }], categoryTitle: [{
+                type: Input
+            }], categoryLink: [{
+                type: Input
+            }], showReadMore: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }], readMoreLink: [{
+                type: Input
+            }] } });
+
+/**
+ * Timeline
+ * @description Build timeline for chronological representation of events.
+ */
+class ItTimelineComponent extends ItAbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Timeline elements array
+         * @default []
+         */
+        this.timelineElements = [];
+        /**
+         * Default date format for timeline element reference date
+         * @default dd/MM/yyyy
+         */
+        this.dateFormat = 'dd/MM/yyyy';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItTimelineComponent, isStandalone: true, selector: "it-timeline", inputs: { timelineElements: "timelineElements", dateFormat: "dateFormat" }, usesInheritance: true, ngImport: i0, template: "<div class=\"it-timeline-wrapper\">\n  <div class=\"row\">\n    @for (element of timelineElements; track $index) {\n      <div class=\"col-12\">\n        <it-timeline-item\n          [title]=\"element.title\"\n          [text]=\"element.text\"\n          [signature]=\"element.signature\"\n          [pinType]=\"element.pin?.type\"\n          [pinIcon]=\"element.pin?.icon\"\n          [pinText]=\"element.pin?.text\"\n          [eventDate]=\"element.eventDate\"\n          [dateFormat]=\"dateFormat\"\n          [categoryTitle]=\"element.category?.title\"\n          [categoryLink]=\"element.category?.link\"\n          [showReadMore]=\"!!element.link?.length\"\n          [readMoreLink]=\"element.link\" />\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItTimelineItemComponent, selector: "it-timeline-item", inputs: ["title", "text", "signature", "eventDate", "dateFormat", "pinText", "pinType", "pinIcon", "categoryTitle", "categoryLink", "showReadMore", "readMoreLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent], template: "<div class=\"it-timeline-wrapper\">\n  <div class=\"row\">\n    @for (element of timelineElements; track $index) {\n      <div class=\"col-12\">\n        <it-timeline-item\n          [title]=\"element.title\"\n          [text]=\"element.text\"\n          [signature]=\"element.signature\"\n          [pinType]=\"element.pin?.type\"\n          [pinIcon]=\"element.pin?.icon\"\n          [pinText]=\"element.pin?.text\"\n          [eventDate]=\"element.eventDate\"\n          [dateFormat]=\"dateFormat\"\n          [categoryTitle]=\"element.category?.title\"\n          [categoryLink]=\"element.category?.link\"\n          [showReadMore]=\"!!element.link?.length\"\n          [readMoreLink]=\"element.link\" />\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { timelineElements: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }] } });
+
+const timelineComponents = [ItTimelineComponent, ItTimelineItemComponent];
+class ItTimelineModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItTimelineModule, imports: [ItTimelineComponent, ItTimelineItemComponent], exports: [ItTimelineComponent, ItTimelineItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTimelineModule, imports: [timelineComponents] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItTimelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: timelineComponents,
+                    exports: timelineComponents,
+                }]
+        }] });
+
 /**
  * Core components
  */
@@ -5170,6 +5323,7 @@ const core = [
     ItTabModule,
     ItTableModule,
     ItTooltipDirective,
+    ItTimelineModule,
 ];
 /**
  * Navigation Components
@@ -5236,7 +5390,8 @@ class DesignAngularKitModule {
             ItSteppersModule,
             ItTabModule,
             ItTableModule,
-            ItTooltipDirective, // Core components
+            ItTooltipDirective,
+            ItTimelineModule, // Core components
             ItFormModule, ItBackButtonComponent,
             ItBackToTopComponent,
             ItBreadcrumbsModule,
@@ -5268,7 +5423,8 @@ class DesignAngularKitModule {
             ItSteppersModule,
             ItTabModule,
             ItTableModule,
-            ItTooltipDirective, // Core components
+            ItTooltipDirective,
+            ItTimelineModule, // Core components
             ItFormModule, ItBackButtonComponent,
             ItBackToTopComponent,
             ItBreadcrumbsModule,
@@ -5291,7 +5447,8 @@ class DesignAngularKitModule {
             ItSpinnerComponent,
             ItSteppersModule,
             ItTabModule,
-            ItTableModule, // Core components
+            ItTableModule,
+            ItTimelineModule, // Core components
             ItFormModule, ItBackButtonComponent,
             ItBreadcrumbsModule,
             ItHeaderComponent,
@@ -5302,7 +5459,8 @@ class DesignAngularKitModule {
             ItListModule,
             ItSteppersModule,
             ItTabModule,
-            ItTableModule, // Core components
+            ItTableModule,
+            ItTimelineModule, // Core components
             ItFormModule, ItBreadcrumbsModule,
             ItNavBarModule] }); }
 }
@@ -5344,6 +5502,7 @@ const IconNameArray = [
     'close',
     'close-big',
     'close-circle',
+    'code-circle',
     'comment',
     'copy',
     'delete',
@@ -5649,5 +5808,5 @@ class ItDateUtils {
  * Generated bundle index. Do not edit.
  */
 
-export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSidebarComponent, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTooltipDirective, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
+export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSidebarComponent, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTimelineComponent, ItTimelineItemComponent, ItTimelineModule, ItTooltipDirective, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, PLATE_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
 //# sourceMappingURL=design-angular-kit.mjs.map