design-angular-kit 1.0.0-7 → 1.0.0-8

package/fesm2015/design-angular-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Self, Optional, Directive, HostBinding, ChangeDetectionStrategy, ContentChildren, HostListener, TemplateRef, ViewChild, EventEmitter, Output, Injectable, Pipe, Inject, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Self, Optional, ChangeDetectionStrategy, ViewChild, Directive, HostBinding, Host, ContentChildren, HostListener, TemplateRef, Injectable, ViewChildren, Pipe, Inject, NgModule } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
@@ -10,27 +10,34 @@ import * as i2 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/router';
 import { RouterLink } from '@angular/router';
-import { CarouselBI, Collapse, Modal, Notification, Popover, Tooltip, InputPassword, ProgressDonut } from 'bootstrap-italia';
-import { Subject, filter, Observable, of, debounceTime, distinctUntilChanged, switchMap, map, take } from 'rxjs';
+import { Collapse, Alert, CarouselBI, Dropdown, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, BackToTop } from 'bootstrap-italia';
+import { Subject, filter, startWith, tap, switchMap, of, Observable, debounceTime, distinctUntilChanged, map, take, forkJoin } from 'rxjs';
 import * as i1$2 from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
 
 class AbstractComponent {
-    constructor(_renderer, _elementRef) {
+    constructor(_renderer, _elementRef, _changeDetectorRef) {
         this._renderer = _renderer;
         this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
+        this.valueChanges = new EventEmitter();
     }
     ngAfterViewInit() {
         this._renderer.removeAttribute(this._elementRef.nativeElement, 'id');
     }
+    ngOnChanges(changes) {
+        this.valueChanges.next(); // The inputs were changed
+    }
 }
-AbstractComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AbstractComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AbstractComponent, selector: "ng-component", inputs: { id: "id" }, ngImport: i0, template: '', isInline: true });
+AbstractComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AbstractComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AbstractComponent, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
+            }], valueChanges: [{
+                type: Output
             }] } });
 
 /**
@@ -49,12 +56,13 @@ function isFalseBooleanInput(booleanInput) {
 }
 
 class AbstractFormComponent extends AbstractComponent {
-    constructor(_ngControl, _translateService, _renderer, _elementRef) {
-        super(_renderer, _elementRef);
+    constructor(_ngControl, _translateService, _renderer, _elementRef, _changeDetectorRef) {
+        super(_renderer, _elementRef, _changeDetectorRef);
         this._ngControl = _ngControl;
         this._translateService = _translateService;
         this._renderer = _renderer;
         this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
         /**
          * Validation color display mode (validation triggered if field is touched or not pristine)
          * - <b>true</b>: Always show the validation color
@@ -193,7 +201,7 @@ class AbstractFormComponent extends AbstractComponent {
         return this.control.getError(errorCode, path);
     }
 }
-AbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractFormComponent, deps: [{ token: i2.NgControl, optional: true, self: true }, { token: i1.TranslateService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AbstractFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractFormComponent, deps: [{ token: i2.NgControl, optional: true, self: true }, { token: i1.TranslateService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AbstractFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractFormComponent, decorators: [{
             type: Component,
@@ -203,28 +211,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         type: Self
                     }, {
                         type: Optional
-                    }] }, { type: i1.TranslateService }, { type: i0.Renderer2 }, { type: i0.ElementRef }];
+                    }] }, { type: i1.TranslateService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
     }, propDecorators: { label: [{
                 type: Input
             }], validationMode: [{
                 type: Input
             }] } });
 
-class AccordionComponent extends AbstractComponent {
+class CollapseComponent extends AbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Custom class
+         */
+        this.class = '';
+        /**
+         * This event fires immediately when the show method is called.
+         */
+        this.onShow = new EventEmitter();
+        /**
+         * This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
+         */
+        this.onShown = new EventEmitter();
+        /**
+         * This event fires immediately when the hide method is called.
+         */
+        this.onHide = new EventEmitter();
+        /**
+         * This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
+         */
+        this.onHidden = new EventEmitter();
+    }
+    get isMulti() {
+        return isTrueBooleanInput(this.multi);
+    }
+    get isOpenedOnStart() {
+        return isTrueBooleanInput(this.opened);
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
+        if (this.collapseDiv) {
+            const element = this.collapseDiv.nativeElement;
+            this.collapse = Collapse.getOrCreateInstance(element, {
+                toggle: this.isOpenedOnStart
+            });
+            element.addEventListener('show.bs.collapse', event => this.onShow.emit(event));
+            element.addEventListener('shown.bs.collapse', event => this.onShown.emit(event));
+            element.addEventListener('hide.bs.collapse', event => this.onHide.emit(event));
+            element.addEventListener('hidden.bs.collapse', event => this.onHidden.emit(event));
+        }
+    }
+    /**
+     * Shows a resealable item
+     * NOTE: Returns to the caller before the collapsable element has actually been shown (onShown event).
+     */
+    show() {
+        var _a;
+        (_a = this.collapse) === null || _a === void 0 ? void 0 : _a.show();
+    }
+    /**
+     * Hides a resealable item
+     * NOTE: Returns to the caller before the collapsable element has actually been hidden (onHidden Event)
+     */
+    hide() {
+        var _a;
+        (_a = this.collapse) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    /**
+     * Toggle a collapsible item to show or hide it.
+     * NOTE: Returns to the caller before the collapsable element has actually been shown or hidden (onShown and onHidden events)
+     */
+    toggle() {
+        var _a;
+        (_a = this.collapse) === null || _a === void 0 ? void 0 : _a.toggle();
+    }
+    /**
+     * Eliminates the possibility of an item being resealable
+     */
+    dispose() {
+        var _a;
+        (_a = this.collapse) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+}
+CollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CollapseComponent, selector: "it-collapse[id]", inputs: { multi: "multi", opened: "opened", class: "class" }, outputs: { onShow: "onShow", onShown: "onShown", onHide: "onHide", onHidden: "onHidden" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itCollapse"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"collapse {{class}}\" [class.multi-collapse]=\"isMulti\" #collapse>\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'it-collapse[id]', exportAs: 'itCollapse', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [id]=\"id\" class=\"collapse {{class}}\" [class.multi-collapse]=\"isMulti\" #collapse>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { multi: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], onShow: [{
+                type: Output
+            }], onShown: [{
+                type: Output
+            }], onHide: [{
+                type: Output
+            }], onHidden: [{
+                type: Output
+            }], collapseDiv: [{
+                type: ViewChild,
+                args: ['collapse']
+            }] } });
+
+class AccordionComponent extends CollapseComponent {
+    constructor() {
+        super(...arguments);
+        this.isCollapsed = true;
+    }
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
+        this.isCollapsed = !this.isOpenedOnStart;
+        this.onHide.subscribe(() => {
+            this.isCollapsed = true;
+            this._changeDetectorRef.detectChanges();
+        });
+        this.onShow.subscribe(() => {
+            this.isCollapsed = false;
+            this._changeDetectorRef.detectChanges();
+        });
     }
 }
 AccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AccordionComponent, selector: "it-accordion[id][title]", inputs: { title: "title", opened: "opened" }, usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n\n    <h2 class=\"accordion-header\" id=\"collapse-{{id}}-heading\">\n      <button\n        class=\"accordion-button px-0\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"!opened\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{title}}\n      </button>\n    </h2>\n\n    <div id=\"collapse-{{id}}\"\n         class=\"accordion-collapse collapse\"\n         role=\"region\"\n         [class.show]=\"opened\"\n         [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n\n      <div class=\"accordion-body p-0\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [""] });
+AccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AccordionComponent, selector: "it-accordion[id][title]", inputs: { title: "title" }, exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n\n    <h2 class=\"accordion-header\" id=\"collapse-{{id}}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"isOpenedOnStart ? 'true' : 'false'\">\n        {{title}}\n      </button>\n    </h2>\n\n    <div #collapse id=\"collapse-{{id}}\" role=\"region\"\n         class=\"accordion-collapse collapse {{class}}\"\n         [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-accordion[id][title]', template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n\n    <h2 class=\"accordion-header\" id=\"collapse-{{id}}-heading\">\n      <button\n        class=\"accordion-button px-0\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"!opened\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{title}}\n      </button>\n    </h2>\n\n    <div id=\"collapse-{{id}}\"\n         class=\"accordion-collapse collapse\"\n         role=\"region\"\n         [class.show]=\"opened\"\n         [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n\n      <div class=\"accordion-body p-0\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n\n" }]
+            args: [{ selector: 'it-accordion[id][title]', exportAs: 'itAccordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n\n    <h2 class=\"accordion-header\" id=\"collapse-{{id}}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"isOpenedOnStart ? 'true' : 'false'\">\n        {{title}}\n      </button>\n    </h2>\n\n    <div #collapse id=\"collapse-{{id}}\" role=\"region\"\n         class=\"accordion-collapse collapse {{class}}\"\n         [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n\n" }]
         }], propDecorators: { title: [{
                 type: Input
-            }], opened: [{
-                type: Input
             }] } });
 
 class IconComponent {
@@ -279,27 +398,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
-class AlertComponent {
+class AlertComponent extends AbstractComponent {
     constructor() {
+        super(...arguments);
         /**
          * The alert color
          * @default info
          */
         this.color = 'info';
+        /**
+         * This event fires immediately when the instance's close method is called.
+         */
+        this.onClose = new EventEmitter();
+        /**
+         * This event fires when the alert has been closed (it will wait for CSS transitions to complete).
+         */
+        this.onClosed = new EventEmitter();
     }
     get isDismissible() {
         return isTrueBooleanInput(this.dismissible);
     }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.alertElement) {
+            const element = this.alertElement.nativeElement;
+            this.alert = Alert.getOrCreateInstance(element);
+            element.addEventListener('close.bs.alert', event => this.onClose.emit(event));
+            element.addEventListener('closed.bs.alert', event => this.onClosed.emit(event));
+        }
+    }
+    /**
+     * Close an alert by removing it from the DOM.
+     * If the `.fade` and `.show` classes are present in the element, the alert will be closed with a disappearing effect.
+     */
+    close() {
+        var _a;
+        (_a = this.alert) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    /**
+     * The alert is removed
+     */
+    dispose() {
+        var _a;
+        (_a = this.alert) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
 }
-AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AlertComponent, selector: "it-alert", inputs: { color: "color", dismissible: "dismissible" }, ngImport: i0, template: "<div class=\"alert alert-{{color}}\"\n     [class.alert-dismissible]=\"isDismissible\"\n     [class.fade]=\"isDismissible\"\n     [class.show]=\"isDismissible\"\n     role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  <button *ngIf=\"isDismissible\"\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"alert\"\n          [attr.aria-label]=\"'it.core.close-alert'|translate\">\n    <it-icon name=\"close\"></it-icon>\n  </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AlertComponent, selector: "it-alert", inputs: { color: "color", dismissible: "dismissible" }, outputs: { onClose: "onClose", onClosed: "onClosed" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div class=\"alert alert-{{color}}\" #alertElement\n     [class.alert-dismissible]=\"isDismissible\"\n     [class.fade]=\"isDismissible\"\n     [class.show]=\"isDismissible\"\n     role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  <button *ngIf=\"isDismissible\"\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"alert\"\n          [attr.aria-label]=\"'it.core.close-alert'|translate\">\n    <it-icon name=\"close\"></it-icon>\n  </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-alert', template: "<div class=\"alert alert-{{color}}\"\n     [class.alert-dismissible]=\"isDismissible\"\n     [class.fade]=\"isDismissible\"\n     [class.show]=\"isDismissible\"\n     role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  <button *ngIf=\"isDismissible\"\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"alert\"\n          [attr.aria-label]=\"'it.core.close-alert'|translate\">\n    <it-icon name=\"close\"></it-icon>\n  </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
+            args: [{ selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"alert alert-{{color}}\" #alertElement\n     [class.alert-dismissible]=\"isDismissible\"\n     [class.fade]=\"isDismissible\"\n     [class.show]=\"isDismissible\"\n     role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  <button *ngIf=\"isDismissible\"\n          type=\"button\"\n          class=\"btn-close\"\n          data-bs-dismiss=\"alert\"\n          [attr.aria-label]=\"'it.core.close-alert'|translate\">\n    <it-icon name=\"close\"></it-icon>\n  </button>\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], dismissible: [{
                 type: Input
+            }], onClose: [{
+                type: Output
+            }], onClosed: [{
+                type: Output
+            }], alertElement: [{
+                type: ViewChild,
+                args: ['alertElement']
             }] } });
 
 class BadgeDirective {
@@ -362,8 +521,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
+class ProgressButtonComponent {
+    get isProgress() {
+        return typeof this.progress === 'number' || isTrueBooleanInput(this.progress);
+    }
+    get progressValue() {
+        return typeof this.progress === 'number' ? this.progress : 0;
+    }
+    get isIndeterminate() {
+        return typeof this.progress !== 'number' && isTrueBooleanInput(this.progress);
+    }
+}
+ProgressButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressButtonComponent, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n                 [value]=\"progressValue\"\n                 [indeterminate]=\"isIndeterminate\"\n                 [color]=\"progressColor\"></it-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[itButton][progress]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n                 [value]=\"progressValue\"\n                 [indeterminate]=\"isIndeterminate\"\n                 [color]=\"progressColor\"></it-progress-bar>\n" }]
+        }], propDecorators: { progress: [{
+                type: Input
+            }], progressColor: [{
+                type: Input
+            }] } });
+
 class ButtonDirective {
-    constructor() {
+    constructor(progressButtonComponent) {
+        this.progressButtonComponent = progressButtonComponent;
         this.isFocus = false;
     }
     onFocus() {
@@ -390,24 +572,30 @@ class ButtonDirective {
         if (this.isFocus) {
             cssClass += ' focus--mouse';
         }
-        if (((_a = this.icons) === null || _a === void 0 ? void 0 : _a.length) && !this.progressBar) {
+        if (((_a = this.icons) === null || _a === void 0 ? void 0 : _a.length) && !this.progressButtonComponent) {
             cssClass += ' btn-icon';
         }
-        if (this.progressBar) {
+        if (!!this.progressButtonComponent) {
             cssClass += ' btn-progress';
         }
         return cssClass;
     }
 }
-ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ButtonDirective, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: "disabled" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: IconComponent }, { propertyName: "progressBar", predicate: ProgressBarComponent }], exportAs: ["itButton"], ngImport: i0 });
+ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonDirective, deps: [{ token: ProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ButtonDirective, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: "disabled" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: IconComponent }], exportAs: ["itButton"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[itButton]',
                     exportAs: 'itButton'
                 }]
-        }], propDecorators: { color: [{
+        }], ctorParameters: function () {
+        return [{ type: ProgressButtonComponent, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Host
+                    }] }];
+    }, propDecorators: { color: [{
                 type: Input,
                 args: ['itButton']
             }], size: [{
@@ -422,9 +610,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], icons: [{
                 type: ContentChildren,
                 args: [IconComponent]
-            }], progressBar: [{
-                type: ContentChildren,
-                args: [ProgressBarComponent]
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus']
@@ -619,10 +804,10 @@ class CarouselComponent {
     }
 }
 CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselComponent, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: "fullCarousel", bigImg: "bigImg", lined: "lined" }, queries: [{ propertyName: "items", predicate: CarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div class=\"it-carousel-wrapper splide {{typeClass}}\"\n     [class.it-full-carousel]=\"isFullCarousel\"\n     [class.it-big-img]=\"isBigImg\"\n     data-bs-carousel-splide #carousel>\n\n  <div class=\"it-header-block\" *ngIf=\"title\">\n    <div class=\"it-header-block-title\">\n      <h2>{{title}}</h2>\n    </div>\n  </div>\n\n  <div class=\"splide__track {{trackClass}}\">\n    <ul class=\"splide__list\">\n      <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n        <div class=\"it-single-slide-wrapper\">\n          <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselComponent, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: "fullCarousel", bigImg: "bigImg", lined: "lined" }, queries: [{ propertyName: "items", predicate: CarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div #carousel class=\"it-carousel-wrapper splide {{typeClass}}\"\n     [class.it-full-carousel]=\"isFullCarousel\"\n     [class.it-big-img]=\"isBigImg\"\n     data-bs-carousel-splide>\n\n  <div class=\"it-header-block\" *ngIf=\"title\">\n    <div class=\"it-header-block-title\">\n      <h2>{{title}}</h2>\n    </div>\n  </div>\n\n  <div class=\"splide__track {{trackClass}}\">\n    <ul class=\"splide__list\">\n      <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n        <div class=\"it-single-slide-wrapper\">\n          <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-carousel', exportAs: 'itCarousel', template: "<div class=\"it-carousel-wrapper splide {{typeClass}}\"\n     [class.it-full-carousel]=\"isFullCarousel\"\n     [class.it-big-img]=\"isBigImg\"\n     data-bs-carousel-splide #carousel>\n\n  <div class=\"it-header-block\" *ngIf=\"title\">\n    <div class=\"it-header-block-title\">\n      <h2>{{title}}</h2>\n    </div>\n  </div>\n\n  <div class=\"splide__track {{trackClass}}\">\n    <ul class=\"splide__list\">\n      <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n        <div class=\"it-single-slide-wrapper\">\n          <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"] }]
+            args: [{ selector: 'it-carousel', exportAs: 'itCarousel', template: "<div #carousel class=\"it-carousel-wrapper splide {{typeClass}}\"\n     [class.it-full-carousel]=\"isFullCarousel\"\n     [class.it-big-img]=\"isBigImg\"\n     data-bs-carousel-splide>\n\n  <div class=\"it-header-block\" *ngIf=\"title\">\n    <div class=\"it-header-block-title\">\n      <h2>{{title}}</h2>\n    </div>\n  </div>\n\n  <div class=\"splide__track {{trackClass}}\">\n    <ul class=\"splide__list\">\n      <li *ngFor=\"let item of items\" class=\"splide__slide\" [class.lined_slide]=\"isLined\">\n        <div class=\"it-single-slide-wrapper\">\n          <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{display:flex;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], type: [{
@@ -643,105 +828,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['carousel']
             }] } });
 
-class CollapseComponent extends AbstractComponent {
-    constructor(_renderer, _elementRef) {
-        super(_renderer, _elementRef);
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        /**
-         * Custom class
-         */
-        this.class = '';
-        /**
-         * This event fires immediately when the show method is called.
-         */
-        this.onShow = new EventEmitter();
-        /**
-         * This event is triggered when the tooltip has been made visible to the user (it will wait for the CSS transitions to complete).
-         */
-        this.onShown = new EventEmitter();
-        /**
-         * This event fires immediately when the hide method is called.
-         */
-        this.onHide = new EventEmitter();
-        /**
-         * This event is raised when the tooltip has finished being hidden from the user (it will wait for the CSS transitions to complete).
-         */
-        this.onHidden = new EventEmitter();
-        this.element = this._elementRef.nativeElement;
-    }
-    get isMulti() {
-        return isTrueBooleanInput(this.multi);
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
-        this.collapse = Collapse.getOrCreateInstance(this.collapseDiv.nativeElement, {
-            toggle: false
-        });
-        this.element.addEventListener('show.bs.collapse', event => this.onShow.emit(event));
-        this.element.addEventListener('shown.bs.collapse', event => this.onShown.emit(event));
-        this.element.addEventListener('hide.bs.collapse', event => this.onHide.emit(event));
-        this.element.addEventListener('hidden.bs.collapse', event => this.onHidden.emit(event));
-    }
-    /**
-     * Shows a resealable item
-     * NOTE: Returns to the caller before the collapsable element has actually been shown (onShown event).
-     */
-    show() {
-        var _a;
-        (_a = this.collapse) === null || _a === void 0 ? void 0 : _a.show();
-    }
-    /**
-     * Hides a resealable item
-     * NOTE: Returns to the caller before the collapsable element has actually been hidden (onHidden Event)
-     */
-    hide() {
-        var _a;
-        (_a = this.collapse) === null || _a === void 0 ? void 0 : _a.hide();
-    }
-    /**
-     * Toggle a collapsible item to show or hide it.
-     * NOTE: Returns to the caller before the collapsable element has actually been shown or hidden (onShown and onHidden events)
-     */
-    toggle() {
-        var _a;
-        (_a = this.collapse) === null || _a === void 0 ? void 0 : _a.toggle();
-    }
-    /**
-     * Eliminates the possibility of an item being resealable
-     */
-    dispose() {
-        var _a;
-        (_a = this.collapse) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
-CollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CollapseComponent, selector: "it-collapse[id]", inputs: { multi: "multi", class: "class" }, outputs: { onShow: "onShow", onShown: "onShown", onHide: "onHide", onHidden: "onHidden" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itCollapse"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"collapse {{class}}\" [class.multi-collapse]=\"isMulti\" #collapse>\n  <ng-content></ng-content>\n</div>\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'it-collapse[id]', exportAs: 'itCollapse', template: "<div [id]=\"id\" class=\"collapse {{class}}\" [class.multi-collapse]=\"isMulti\" #collapse>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { multi: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], onShow: [{
-                type: Output
-            }], onShown: [{
-                type: Output
-            }], onHide: [{
-                type: Output
-            }], onHidden: [{
-                type: Output
-            }], collapseDiv: [{
-                type: ViewChild,
-                args: ['collapse']
-            }] } });
-
-class LinkComponent {
-    constructor(_renderer, _elementRef) {
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
+class LinkComponent extends AbstractComponent {
+    constructor() {
+        super(...arguments);
         /**
          * Custom class
          */
@@ -754,15 +843,16 @@ class LinkComponent {
         return isTrueBooleanInput(this.disabled);
     }
     ngAfterViewInit() {
+        super.ngAfterViewInit();
         this._renderer.removeAttribute(this._elementRef.nativeElement, 'class');
     }
 }
-LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LinkComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LinkComponent, selector: "it-link", inputs: { href: "href", externalLink: "externalLink", disabled: "disabled", class: "class" }, ngImport: i0, template: "<a *ngIf=\"!isExternalLink; else externalLink\" [class]=\"class\" [routerLink]=\"isDisabled ? null : href\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [class]=\"class\" [attr.href]=\"isDisabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LinkComponent, selector: "it-link", inputs: { href: "href", externalLink: "externalLink", disabled: "disabled", class: "class" }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isExternalLink; else externalLink\" [class]=\"class\" [routerLink]=\"isDisabled ? null : href\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [class]=\"class\" [attr.href]=\"isDisabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-link', template: "<a *ngIf=\"!isExternalLink; else externalLink\" [class]=\"class\" [routerLink]=\"isDisabled ? null : href\">\n  <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n</a>\n<ng-template #externalLink>\n  <a [class]=\"class\" [attr.href]=\"isDisabled ? null : href\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { href: [{
+        }], propDecorators: { href: [{
                 type: Input
             }], externalLink: [{
                 type: Input
@@ -773,11 +863,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class DropdownItemComponent extends LinkComponent {
-    constructor(_renderer, _elementRef, _changeDetectorRef) {
-        super(_renderer, _elementRef);
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        super(...arguments);
         /**
          * The icon position
          * @default right
@@ -818,12 +905,12 @@ class DropdownItemComponent extends LinkComponent {
         }
     }
 }
-DropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: { divider: "divider", active: "active", large: "large", iconName: "iconName", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span><ng-content></ng-content></span>\n\n      <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+DropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: { divider: "divider", active: "active", large: "large", iconName: "iconName", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span><ng-content></ng-content></span>\n\n      <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-dropdown-item', template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span><ng-content></ng-content></span>\n\n      <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { divider: [{
+            args: [{ selector: 'it-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n  <span *ngIf=\"isDivider; else item\" class=\"divider\"></span>\n\n  <ng-template #item>\n    <it-link [class]=\"linkClass\" [href]=\"href\" [externalLink]=\"externalLink\" [disabled]=\"disabled\">\n      <it-icon *ngIf=\"iconName && iconPosition === 'left'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span><ng-content></ng-content></span>\n\n      <it-icon *ngIf=\"iconName && iconPosition === 'right'\"\n                size=\"sm\"\n                [name]=\"iconName\"\n                [color]=\"isDark ? 'light' : 'primary'\"\n                [class]=\"iconPosition\"></it-icon>\n\n      <span *ngIf=\"isActive\" class=\"visually-hidden\">{{'it.core.active'|translate}}</span>\n    </it-link>\n  </ng-template>\n</li>\n", styles: [".list-item.disabled{pointer-events:none;cursor:default}\n"] }]
+        }], propDecorators: { divider: [{
                 type: Input
             }], active: [{
                 type: Input
@@ -836,6 +923,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class DropdownComponent extends AbstractComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Fires immediately when the show instance method is called.
+         */
+        this.onShow = new EventEmitter();
+        /**
+         * Fired when the dropdown has been made visible to the user and CSS transitions have completed.
+         */
+        this.onShown = new EventEmitter();
+        /**
+         * Fires immediately when the hide instance method has been called.
+         */
+        this.onHide = new EventEmitter();
+        /**
+         * Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
+         */
+        this.onHidden = new EventEmitter();
+    }
     get buttonClass() {
         let btnClass = 'btn dropdown-toggle';
         if (this.color) {
@@ -856,10 +962,19 @@ class DropdownComponent extends AbstractComponent {
         if (changes['dark'] && !changes['dark'].firstChange) {
             this.setDarkItems();
         }
+        super.ngOnChanges(changes);
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this.setDarkItems();
+        if (this.dropdownButton) {
+            const element = this.dropdownButton.nativeElement;
+            this.dropdown = Dropdown.getOrCreateInstance(element);
+            element.addEventListener('show.bs.dropdown', event => this.onShow.emit(event));
+            element.addEventListener('shown.bs.dropdown', event => this.onShown.emit(event));
+            element.addEventListener('hide.bs.dropdown', event => this.onHide.emit(event));
+            element.addEventListener('hidden.bs.dropdown', event => this.onHidden.emit(event));
+        }
     }
     /**
      * Set child items dark mode
@@ -871,12 +986,47 @@ class DropdownComponent extends AbstractComponent {
             item.setDark(this.isDark);
         });
     }
+    /**
+     * Toggles the dropdown menu of a given navbar or tabbed navigation.
+     */
+    toggle() {
+        var _a;
+        (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.toggle();
+    }
+    /**
+     * Shows the dropdown menu of a given navbar or tabbed navigation.
+     */
+    show() {
+        var _a;
+        (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show();
+    }
+    /**
+     * Hides the dropdown menu of a given navbar or tabbed navigation.
+     */
+    hide() {
+        var _a;
+        (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    /**
+     * Updates the position of an element's dropdown.
+     */
+    update() {
+        var _a;
+        (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.update();
+    }
+    /**
+     * Destroys an element's dropdown. (Removes stored data on the DOM element)
+     */
+    dispose() {
+        var _a;
+        (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownComponent, selector: "it-dropdown[id]", inputs: { color: "color", direction: "direction", fullWidth: "fullWidth", dark: "dark" }, queries: [{ propertyName: "items", predicate: DropdownItemComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{direction}}\">\n  <button [id]=\"id\"\n          [class]=\"buttonClass\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\">\n    <ng-content select=\"[button]\"></ng-content>\n    <it-icon class=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n  </button>\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownComponent, selector: "it-dropdown[id]", inputs: { color: "color", direction: "direction", fullWidth: "fullWidth", dark: "dark" }, outputs: { onShow: "onShow", onShown: "onShown", onHide: "onHide", onHidden: "onHidden" }, queries: [{ propertyName: "items", predicate: DropdownItemComponent }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }], exportAs: ["itDropdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown {{direction}}\">\n  <button #dropdownButton [id]=\"id\"\n          [class]=\"buttonClass\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\">\n    <ng-content select=\"[button]\"></ng-content>\n    <it-icon class=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n  </button>\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: [".link-list-heading:empty{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-dropdown[id]', template: "<div class=\"dropdown {{direction}}\">\n  <button [id]=\"id\"\n          [class]=\"buttonClass\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\">\n    <ng-content select=\"[button]\"></ng-content>\n    <it-icon class=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n  </button>\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: [".link-list-heading:empty{display:none}\n"] }]
+            args: [{ selector: 'it-dropdown[id]', exportAs: 'itDropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropdown {{direction}}\">\n  <button #dropdownButton [id]=\"id\"\n          [class]=\"buttonClass\"\n          type=\"button\"\n          data-bs-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\">\n    <ng-content select=\"[button]\"></ng-content>\n    <it-icon class=\"icon-expand\" name=\"expand\" size=\"sm\" [color]=\"this.color ? 'light' : 'primary'\"></it-icon>\n  </button>\n\n  <div class=\"dropdown-menu\" [class.full-width]=\"isFullWidth\" [class.dark]=\"isDark\" [attr.aria-labelledby]=\"id\">\n    <div class=\"link-list-wrapper\">\n      <div class=\"link-list-heading\">\n        <ng-content select=\"[listHeading]\"></ng-content>\n      </div>\n      <ul class=\"link-list\">\n        <ng-content select=\"[list]\"></ng-content>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: [".link-list-heading:empty{display:none}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], direction: [{
@@ -888,6 +1038,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], items: [{
                 type: ContentChildren,
                 args: [DropdownItemComponent]
+            }], onShow: [{
+                type: Output
+            }], onShown: [{
+                type: Output
+            }], onHide: [{
+                type: Output
+            }], onHidden: [{
+                type: Output
+            }], dropdownButton: [{
+                type: ViewChild,
+                args: ['dropdownButton']
             }] } });
 
 class ListComponent {
@@ -1006,10 +1167,10 @@ class ModalComponent extends AbstractComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "it-modal[id][title]", inputs: { title: "title", size: "size" }, outputs: { onShow: "onShow", onShown: "onShown", onHide: "onHide", onHidden: "onHidden", onHidePrevented: "onHidePrevented" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div [id]=\"id\" class=\"modal fade\"\n     tabindex=\"-1\"\n     role=\"dialog\"\n     aria-hidden=\"true\"\n     [attr.aria-labelledby]=\"id+'-label'\" #modalElement>\n  <div class=\"modal-dialog {{size}}\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title h5 no_toc\" id=\"{{id}}-label\">{{title}}</h2>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\n      </div>\n      <div class=\"modal-body mb-3\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer modal-footer-shadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "it-modal[id][title]", inputs: { title: "title", size: "size" }, outputs: { onShow: "onShow", onShown: "onShown", onHide: "onHide", onHidden: "onHidden", onHidePrevented: "onHidePrevented" }, viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true }], exportAs: ["itModal"], usesInheritance: true, ngImport: i0, template: "<div #modalElement [id]=\"id\" class=\"modal fade\"\n     tabindex=\"-1\"\n     role=\"dialog\"\n     aria-hidden=\"true\"\n     [attr.aria-labelledby]=\"id+'-label'\">\n  <div class=\"modal-dialog {{size}}\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title h5 no_toc\" id=\"{{id}}-label\">{{title}}</h2>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"\n                [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\n      </div>\n      <div class=\"modal-body mb-3\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer modal-footer-shadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"], dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-modal[id][title]', exportAs: 'itModal', template: "<div [id]=\"id\" class=\"modal fade\"\n     tabindex=\"-1\"\n     role=\"dialog\"\n     aria-hidden=\"true\"\n     [attr.aria-labelledby]=\"id+'-label'\" #modalElement>\n  <div class=\"modal-dialog {{size}}\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title h5 no_toc\" id=\"{{id}}-label\">{{title}}</h2>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\n      </div>\n      <div class=\"modal-body mb-3\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer modal-footer-shadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"] }]
+            args: [{ selector: 'it-modal[id][title]', exportAs: 'itModal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #modalElement [id]=\"id\" class=\"modal fade\"\n     tabindex=\"-1\"\n     role=\"dialog\"\n     aria-hidden=\"true\"\n     [attr.aria-labelledby]=\"id+'-label'\">\n  <div class=\"modal-dialog {{size}}\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title h5 no_toc\" id=\"{{id}}-label\">{{title}}</h2>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"\n                [attr.aria-label]=\"'it.core.close-modal'|translate\"></button>\n      </div>\n      <div class=\"modal-body mb-3\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer modal-footer-shadow\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-footer:empty{display:none}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], size: [{
@@ -1303,7 +1464,7 @@ class PopoverDirective {
      */
     set title(title) {
         if (title) {
-            // this.element.setAttribute("title", title);
+            this.element.setAttribute('title', title);
             this.element.setAttribute('data-bs-original-title', title);
         }
     }
@@ -1350,6 +1511,9 @@ class PopoverDirective {
         this.element.addEventListener('hidden.bs.popover', event => this.onHidden.emit(event));
         this.element.addEventListener('inserted.bs.popover', event => this.onInserted.emit(event));
     }
+    ngOnDestroy() {
+        this.dispose();
+    }
     /**
      * Shows the popover of an item.
      */
@@ -1445,28 +1609,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }] } });
 
-class ProgressButtonComponent {
-    get isProgress() {
-        return typeof this.progress === 'number' || isTrueBooleanInput(this.progress);
-    }
-    get progressValue() {
-        return typeof this.progress === 'number' ? this.progress : 0;
-    }
-    get isIndeterminate() {
-        return typeof this.progress !== 'number' && isTrueBooleanInput(this.progress);
-    }
-}
-ProgressButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressButtonComponent, selector: "button[itButton][progress]", inputs: { progress: "progress", progressColor: "progressColor" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n                 [value]=\"progressValue\"\n                 [indeterminate]=\"isIndeterminate\"\n                 [color]=\"progressColor\"></it-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "it-progress-bar[value]", inputs: ["value", "showLabel", "indeterminate", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[itButton][progress]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n<it-progress-bar *ngIf=\"isProgress\"\n                 [value]=\"progressValue\"\n                 [indeterminate]=\"isIndeterminate\"\n                 [color]=\"progressColor\"></it-progress-bar>\n" }]
-        }], propDecorators: { progress: [{
-                type: Input
-            }], progressColor: [{
-                type: Input
-            }] } });
-
 class SpinnerComponent {
     constructor() {
         /**
@@ -1637,10 +1779,10 @@ class TabItemComponent extends AbstractComponent {
     }
 }
 TabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabItemComponent, selector: "it-tab-item[id]", inputs: { label: "label", icon: "icon", active: "active", disabled: "disabled", class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" });
+TabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabItemComponent, selector: "it-tab-item[id]", inputs: { label: "label", icon: "icon", active: "active", disabled: "disabled", class: "class" }, viewQueries: [{ propertyName: "htmlContent", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-tab-item[id]', template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'it-tab-item[id]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -1656,23 +1798,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: [TemplateRef]
             }] } });
 
-class TabContainerComponent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
-    }
+class TabContainerComponent extends AbstractComponent {
     isTrueBooleanInput(booleanInput) {
         return isTrueBooleanInput(booleanInput);
     }
     ngAfterViewInit() {
-        this._changeDetectorRef.detectChanges();
+        var _a;
+        super.ngAfterViewInit();
+        (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.changes.pipe(// When tabs changes (dynamic add/remove)
+        startWith(undefined), tap(() => {
+            var _a, _b;
+            (_a = this.tabSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
+            this.tabSubscriptions = (_b = this.tabs) === null || _b === void 0 ? void 0 : _b.map(tab => tab.valueChanges.subscribe(() => {
+                this._changeDetectorRef.detectChanges(); // DetectChanges when tab-item attributes changes
+            }));
+            this._changeDetectorRef.detectChanges(); // Force update html render
+        }), switchMap(() => { var _a; return ((_a = this.tabNavLinks) === null || _a === void 0 ? void 0 : _a.changes.pipe(startWith(undefined))) || of(undefined); })).subscribe(() => {
+            var _a;
+            // Init tabs from bootstrap-italia
+            (_a = this.tabNavLinks) === null || _a === void 0 ? void 0 : _a.forEach(tabNavLink => {
+                const triggerEl = tabNavLink.nativeElement, tabTrigger = Tab.getOrCreateInstance(triggerEl);
+                if (triggerEl.getAttribute('tab-listener') !== 'true') {
+                    triggerEl.addEventListener('click', event => {
+                        event.preventDefault();
+                        tabTrigger.show();
+                    });
+                    triggerEl.setAttribute('tab-listener', 'true'); // Prevents multiple insertion of the listener
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.tabSubscriptions) === null || _a === void 0 ? void 0 : _a.forEach(sub => sub.unsubscribe());
     }
 }
-TabContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabContainerComponent, selector: "it-tab-container", inputs: { auto: "auto", iconText: "iconText", dark: "dark" }, queries: [{ propertyName: "tabs", predicate: TabItemComponent }], ngImport: i0, template: "<ul class=\"nav nav-tabs\"\n    [class.auto]=\"isTrueBooleanInput(auto)\"\n    [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n    [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n    role=\"tablist\">\n\n  <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n    <a [id]=\"tab.id+'-tab-link'\"\n       role=\"tab\"\n       data-bs-toggle=\"tab\"\n       class=\"nav-link\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n       [attr.href]=\"'#'+tab.id+'-tab'\"\n       [attr.aria-controls]=\"tab.id+'-tab'\">\n      <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\"></it-icon>\n      {{tab.label}}\n    </a>\n  </li>\n</ul>\n\n<div class=\"tab-content\">\n  <div *ngFor=\"let tab of tabs\"\n       [id]=\"tab.id+'-tab'\"\n       class=\"tab-pane fade {{tab.class ?? ''}}\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.show]=\"isTrueBooleanInput(tab.active)\"\n       role=\"tabpanel\"\n       [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n    <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }] });
+TabContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabContainerComponent, selector: "it-tab-container", inputs: { auto: "auto", iconText: "iconText", dark: "dark" }, queries: [{ propertyName: "tabs", predicate: TabItemComponent }], viewQueries: [{ propertyName: "tabNavLinks", predicate: ["tabNavLinks"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"nav nav-tabs\"\n    [class.auto]=\"isTrueBooleanInput(auto)\"\n    [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n    [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n    role=\"tablist\">\n\n  <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n    <a #tabNavLinks [id]=\"tab.id+'-tab-link'\"\n       role=\"tab\"\n       class=\"nav-link\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n       [attr.href]=\"'#'+tab.id+'-tab'\"\n       [attr.aria-controls]=\"tab.id+'-tab'\">\n      <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n      {{tab.label}}\n    </a>\n  </li>\n</ul>\n\n<div class=\"tab-content\">\n  <div *ngFor=\"let tab of tabs\"\n       [id]=\"tab.id+'-tab'\"\n       class=\"tab-pane p-4 fade {{tab.class ?? ''}}\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.show]=\"isTrueBooleanInput(tab.active)\"\n       role=\"tabpanel\"\n       [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n    <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-tab-container', template: "<ul class=\"nav nav-tabs\"\n    [class.auto]=\"isTrueBooleanInput(auto)\"\n    [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n    [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n    role=\"tablist\">\n\n  <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n    <a [id]=\"tab.id+'-tab-link'\"\n       role=\"tab\"\n       data-bs-toggle=\"tab\"\n       class=\"nav-link\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n       [attr.href]=\"'#'+tab.id+'-tab'\"\n       [attr.aria-controls]=\"tab.id+'-tab'\">\n      <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\"></it-icon>\n      {{tab.label}}\n    </a>\n  </li>\n</ul>\n\n<div class=\"tab-content\">\n  <div *ngFor=\"let tab of tabs\"\n       [id]=\"tab.id+'-tab'\"\n       class=\"tab-pane fade {{tab.class ?? ''}}\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.show]=\"isTrueBooleanInput(tab.active)\"\n       role=\"tabpanel\"\n       [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n    <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { auto: [{
+            args: [{ selector: 'it-tab-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"nav nav-tabs\"\n    [class.auto]=\"isTrueBooleanInput(auto)\"\n    [class.nav-tabs-icon-text]=\"isTrueBooleanInput(iconText)\"\n    [class.nav-dark]=\"isTrueBooleanInput(dark)\"\n    role=\"tablist\">\n\n  <li class=\"nav-item\" *ngFor=\"let tab of tabs\">\n    <a #tabNavLinks [id]=\"tab.id+'-tab-link'\"\n       role=\"tab\"\n       class=\"nav-link\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.disabled]=\"isTrueBooleanInput(tab.disabled)\"\n       [attr.href]=\"'#'+tab.id+'-tab'\"\n       [attr.aria-controls]=\"tab.id+'-tab'\">\n      <it-icon *ngIf=\"tab.icon\" [name]=\"tab.icon\" class=\"me-2\"></it-icon>\n      {{tab.label}}\n    </a>\n  </li>\n</ul>\n\n<div class=\"tab-content\">\n  <div *ngFor=\"let tab of tabs\"\n       [id]=\"tab.id+'-tab'\"\n       class=\"tab-pane p-4 fade {{tab.class ?? ''}}\"\n       [class.active]=\"isTrueBooleanInput(tab.active)\"\n       [class.show]=\"isTrueBooleanInput(tab.active)\"\n       role=\"tabpanel\"\n       [attr.aria-labelledby]=\"tab.id+'-tab-link'\">\n    <ng-container *ngTemplateOutlet=\"tab.htmlContent\"></ng-container>\n  </div>\n</div>\n" }]
+        }], propDecorators: { auto: [{
                 type: Input
             }], iconText: [{
                 type: Input
@@ -1681,6 +1847,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], tabs: [{
                 type: ContentChildren,
                 args: [TabItemComponent]
+            }], tabNavLinks: [{
+                type: ViewChildren,
+                args: ['tabNavLinks']
             }] } });
 
 class TableComponent {
@@ -1795,6 +1964,9 @@ class TooltipDirective {
         this.element.addEventListener('hidden.bs.tooltip', event => this.onHidden.emit(event));
         this.element.addEventListener('inserted.bs.tooltip', event => this.onInserted.emit(event));
     }
+    ngOnDestroy() {
+        this.dispose();
+    }
     /**
      * Shows the tooltip of an item.
      */
@@ -2141,7 +2313,7 @@ class InputComponent extends AbstractFormComponent {
         if (this.type === 'number' && (isTrueBooleanInput(this.currency) || isTrueBooleanInput(this.percentage))) {
             return true;
         }
-        return this.type === 'date' || this.type === 'time';
+        return this.type === 'date' || this.type === 'time' || this.type === 'color';
     }
     /**
      * Check is readonly field
@@ -2627,6 +2799,14 @@ class FileUtils {
         const fileBlob = FileUtils.base64ToBlob(base64, mimeType);
         return new File([fileBlob], filename, { type: mimeType });
     }
+    /**
+     * Extract the MIME type from base64 string
+     * @param base64 the base64 string
+     */
+    static getMimeTypeFromBase64(base64) {
+        const mime = base64.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
+        return (mime && mime.length) ? mime[1] : undefined;
+    }
 }
 
 class UploadDragDropComponent extends AbstractComponent {
@@ -2772,7 +2952,7 @@ class UploadFileListComponent extends AbstractComponent {
          * @example application/pdf,image/png
          * @default *
          */
-        this.accept = "*";
+        this.accept = '*';
         /**
          * If upload multiple files
          */
@@ -2797,12 +2977,15 @@ class UploadFileListComponent extends AbstractComponent {
     }
     ngOnChanges(changes) {
         if (changes['fileList'] && this.isImageList) {
-            this.fileList.forEach(item => {
-                FileUtils.fileToBase64(item.file).pipe(take(1)).subscribe(base64 => {
-                    this.previewImages.set(item.id, base64);
-                });
+            const images$ = this.fileList.map(item => FileUtils.fileToBase64(item.file).pipe(take(1), tap(base64 => this.previewImages.set(item.id, base64))));
+            forkJoin(images$).subscribe(() => {
+                this._changeDetectorRef.detectChanges();
+                super.ngOnChanges(changes);
             });
         }
+        else {
+            super.ngOnChanges(changes);
+        }
     }
     get isMultipleInput() {
         return isTrueBooleanInput(this.multiple);
@@ -2934,12 +3117,47 @@ class BackToTopComponent extends AbstractComponent {
     get isDark() {
         return isTrueBooleanInput(this.dark);
     }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.backToTopElement) {
+            const element = this.backToTopElement.nativeElement;
+            this.backToTop = BackToTop.getOrCreateInstance(element);
+        }
+    }
+    /**
+     * Show button
+     */
+    show() {
+        var _a;
+        (_a = this.backToTop) === null || _a === void 0 ? void 0 : _a.show();
+    }
+    /**
+     * Hide the button
+     */
+    hide() {
+        var _a;
+        (_a = this.backToTop) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    /**
+     * Activates the scroll animation towards the Y coordinate indicated by the positionTop option
+     */
+    scrollToTop() {
+        var _a;
+        (_a = this.backToTop) === null || _a === void 0 ? void 0 : _a.scrollToTop();
+    }
+    /**
+     * Eliminate component features
+     */
+    dispose() {
+        var _a;
+        (_a = this.backToTop) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
 }
 BackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BackToTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BackToTopComponent, selector: "it-back-to-top", inputs: { id: "id", small: "small", shadow: "shadow", dark: "dark" }, usesInheritance: true, ngImport: i0, template: "<a [id]=\"id\"\n   href=\"#\"\n   aria-hidden=\"true\"\n   data-bs-toggle=\"backtotop\"\n   class=\"back-to-top\"\n   [class.back-to-top-small]=\"isSmall\"\n   [class.shadow]=\"isShadow\"\n   [class.dark]=\"isDark\">\n\n  <it-icon name=\"arrow-up\" [color]=\"isDark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }] });
+BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BackToTopComponent, selector: "it-back-to-top", inputs: { id: "id", small: "small", shadow: "shadow", dark: "dark" }, viewQueries: [{ propertyName: "backToTopElement", first: true, predicate: ["backToTop"], descendants: true }], exportAs: ["itBackToTop"], usesInheritance: true, ngImport: i0, template: "<a #backToTop [id]=\"id\"\n   href=\"#\"\n   aria-hidden=\"true\"\n   class=\"back-to-top\"\n   [class.back-to-top-small]=\"isSmall\"\n   [class.shadow]=\"isShadow\"\n   [class.dark]=\"isDark\">\n\n  <it-icon name=\"arrow-up\" [color]=\"isDark ? 'secondary' : 'light'\"></it-icon>\n</a>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BackToTopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'it-back-to-top', template: "<a [id]=\"id\"\n   href=\"#\"\n   aria-hidden=\"true\"\n   data-bs-toggle=\"backtotop\"\n   class=\"back-to-top\"\n   [class.back-to-top-small]=\"isSmall\"\n   [class.shadow]=\"isShadow\"\n   [class.dark]=\"isDark\">\n\n  <it-icon name=\"arrow-up\" [color]=\"isDark ? 'secondary' : 'light'\"></it-icon>\n</a>\n" }]
+            args: [{ selector: 'it-back-to-top', exportAs: 'itBackToTop', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a #backToTop [id]=\"id\"\n   href=\"#\"\n   aria-hidden=\"true\"\n   class=\"back-to-top\"\n   [class.back-to-top-small]=\"isSmall\"\n   [class.shadow]=\"isShadow\"\n   [class.dark]=\"isDark\">\n\n  <it-icon name=\"arrow-up\" [color]=\"isDark ? 'secondary' : 'light'\"></it-icon>\n</a>\n" }]
         }], propDecorators: { id: [{
                 type: Input
             }], small: [{
@@ -2948,6 +3166,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], dark: [{
                 type: Input
+            }], backToTopElement: [{
+                type: ViewChild,
+                args: ['backToTop']
             }] } });
 
 class BreadcrumbItemComponent extends LinkComponent {
@@ -3011,11 +3232,13 @@ class HeaderComponent extends AbstractComponent {
      * TODO: complete header
      * @param _renderer
      * @param _elementRef
+     * @param _changeDetectorRef
      */
-    constructor(_renderer, _elementRef) {
-        super(_renderer, _elementRef);
+    constructor(_renderer, _elementRef, _changeDetectorRef) {
+        super(_renderer, _elementRef, _changeDetectorRef);
         this._renderer = _renderer;
         this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
         this.showSlim = true;
         this.loginStyle = 'full';
         this.smallHeader = true;
@@ -3036,12 +3259,12 @@ class HeaderComponent extends AbstractComponent {
         return isTrueBooleanInput(this.showSearch);
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "it-header", inputs: { light: "light", showSlim: "showSlim", slimTitle: "slimTitle", loginStyle: "loginStyle", smallHeader: "smallHeader", showSearch: "showSearch" }, outputs: { loginClick: "loginClick", searchClick: "searchClick" }, usesInheritance: true, ngImport: i0, template: "<header class=\"it-header-wrapper\">\n  <div *ngIf=\"isShowSlim\" class=\"it-header-slim-wrapper\" [class.theme-light]=\"isLight\">\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 class=\"it-opener d-lg-none\" data-bs-toggle=\"collapse\" href=\"#menuC1\" role=\"button\"\n                   aria-expanded=\"false\" 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              <!-- TODO: add language dropdown -->\n              <ng-content select=\"[slimRightZone]\"></ng-content>\n              <div *ngIf=\"loginStyle === 'default'\" class=\"it-access-top-wrapper\">\n                <a class=\"btn btn-primary btn-sm\" (click)=\"loginClick.emit($event)\">\n                  {{'it.navigation.login'|translate}}\n                </a>\n              </div>\n            </div>\n            <button *ngIf=\"loginStyle === 'full'\" itButton=\"primary\" class=\"btn-full\" (click)=\"loginClick.emit($event)\">\n              <span class=\"rounded-icon\">\n                <it-icon name=\"user\" color=\"primary\"></it-icon>\n                <span class=\"d-none d-lg-block\">{{'it.navigation.full-login'|translate}}</span>\n              </span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"isSmallHeader\">\n      <div class=\"container-fluid\">\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                <div class=\"it-search-wrapper\" *ngIf=\"isShowSearch\">\n                  <span class=\"d-none d-md-block\">{{'it.navigation.search'|translate}}</span>\n                  <a class=\"search-link rounded-icon\" [attr.aria-label]=\"'it.navigation.website-search'|translate\" (click)=\"searchClick.emit($event)\">\n                    <it-icon name=\"search\"></it-icon>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- TODO: complete header -->\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ButtonDirective, selector: "[itButton]", inputs: ["itButton", "size", "block", "disabled"], exportAs: ["itButton"] }, { kind: "component", type: IconComponent, selector: "it-icon[name]", inputs: ["name", "size", "color", "padded", "class"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-header', template: "<header class=\"it-header-wrapper\">\n  <div *ngIf=\"isShowSlim\" class=\"it-header-slim-wrapper\" [class.theme-light]=\"isLight\">\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 class=\"it-opener d-lg-none\" data-bs-toggle=\"collapse\" href=\"#menuC1\" role=\"button\"\n                   aria-expanded=\"false\" 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              <!-- TODO: add language dropdown -->\n              <ng-content select=\"[slimRightZone]\"></ng-content>\n              <div *ngIf=\"loginStyle === 'default'\" class=\"it-access-top-wrapper\">\n                <a class=\"btn btn-primary btn-sm\" (click)=\"loginClick.emit($event)\">\n                  {{'it.navigation.login'|translate}}\n                </a>\n              </div>\n            </div>\n            <button *ngIf=\"loginStyle === 'full'\" itButton=\"primary\" class=\"btn-full\" (click)=\"loginClick.emit($event)\">\n              <span class=\"rounded-icon\">\n                <it-icon name=\"user\" color=\"primary\"></it-icon>\n                <span class=\"d-none d-lg-block\">{{'it.navigation.full-login'|translate}}</span>\n              </span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"it-nav-wrapper\">\n    <div class=\"it-header-center-wrapper\" [class.it-small-header]=\"isSmallHeader\">\n      <div class=\"container-fluid\">\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                <div class=\"it-search-wrapper\" *ngIf=\"isShowSearch\">\n                  <span class=\"d-none d-md-block\">{{'it.navigation.search'|translate}}</span>\n                  <a class=\"search-link rounded-icon\" [attr.aria-label]=\"'it.navigation.website-search'|translate\" (click)=\"searchClick.emit($event)\">\n                    <it-icon name=\"search\"></it-icon>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- TODO: complete header -->\n  </div>\n</header>\n", styles: [".nav-mobile:has(.link-list-wrapper:empty){display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { light: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { light: [{
                 type: Input
             }], showSlim: [{
                 type: Input
@@ -3078,7 +3301,7 @@ class LanguageSwitcherComponent {
     }
 }
 LanguageSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguageSwitcherComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-LanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LanguageSwitcherComponent, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages" }, ngImport: i0, template: "<it-dropdown id=\"language-switcher\">\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  <ng-container list>\n    <it-dropdown-item *ngFor=\"let lang of availableLanguages\" (click)=\"changeLanguage(lang.code)\"\n                      [active]=\"lang.code === (currentLang$ | async)?.code\">\n      {{lang.label}}\n      <span class=\"visually-hidden\" *ngIf=\"lang.code === (currentLang$ | async)?.code\">\n        {{'it.utils.selected' | translate}}\n      </span>\n    </it-dropdown-item>\n  </ng-container>\n</it-dropdown>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "it-dropdown[id]", inputs: ["color", "direction", "fullWidth", "dark"] }, { kind: "component", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+LanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LanguageSwitcherComponent, selector: "it-language-switcher", inputs: { availableLanguages: "availableLanguages" }, ngImport: i0, template: "<it-dropdown id=\"language-switcher\">\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  <ng-container list>\n    <it-dropdown-item *ngFor=\"let lang of availableLanguages\" (click)=\"changeLanguage(lang.code)\"\n                      [active]=\"lang.code === (currentLang$ | async)?.code\">\n      {{lang.label}}\n      <span class=\"visually-hidden\" *ngIf=\"lang.code === (currentLang$ | async)?.code\">\n        {{'it.utils.selected' | translate}}\n      </span>\n    </it-dropdown-item>\n  </ng-container>\n</it-dropdown>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "it-dropdown[id]", inputs: ["color", "direction", "fullWidth", "dark"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["itDropdown"] }, { kind: "component", type: DropdownItemComponent, selector: "it-dropdown-item", inputs: ["divider", "active", "large", "iconName", "iconPosition"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'it-language-switcher', template: "<it-dropdown id=\"language-switcher\">\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  <ng-container list>\n    <it-dropdown-item *ngFor=\"let lang of availableLanguages\" (click)=\"changeLanguage(lang.code)\"\n                      [active]=\"lang.code === (currentLang$ | async)?.code\">\n      {{lang.label}}\n      <span class=\"visually-hidden\" *ngIf=\"lang.code === (currentLang$ | async)?.code\">\n        {{'it.utils.selected' | translate}}\n      </span>\n    </it-dropdown-item>\n  </ng-container>\n</it-dropdown>\n" }]