design-angular-kit 1.2.2 → 1.3.0

package/fesm2022/design-angular-kit.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, Renderer2, ElementRef, ChangeDetectorRef, EventEmitter, Component, Input, Output, booleanAttribute, ChangeDetectionStrategy, ViewChild, InjectionToken, TemplateRef, HostBinding, ContentChildren, NgModule, Directive, Optional, Host, Inject, HostListener, Injectable, Self, ViewChildren, ViewEncapsulation, Pipe, HostAttributeToken, DestroyRef, APP_INITIALIZER, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
-import { Collapse, Alert, Dropdown, CarouselBI, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, BackToTop, NavBarCollapsible, HeaderSticky, loadFonts } from 'bootstrap-italia';
+import { Collapse, Alert, Dropdown, Carousel, Modal, Notification, Popover, Tab, Tooltip, InputPassword, ProgressDonut, SelectAutocomplete, BackToTop, NavBarCollapsible, HeaderSticky, loadFonts } from 'bootstrap-italia';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe, TranslateLoader, TranslateService } from '@ngx-translate/core';
 import * as i1$3 from '@angular/common';
@@ -10,12 +10,14 @@ import { RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterLink
 import { startWith, Subject, filter, debounceTime, distinctUntilChanged, tap, switchMap, of, merge, map, Observable, take, forkJoin, BehaviorSubject, shareReplay, combineLatest, skip, AsyncSubject, withLatestFrom, delay, timer, takeWhile } from 'rxjs';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$1 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule, NgModel, FormControlName } from '@angular/forms';
+import { FormControl, FormGroup, Validators, ReactiveFormsModule, NgModel, FormControlName } from '@angular/forms';
 import * as i1$2 from '@angular/platform-browser';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import videojs from 'video.js';
+import { initYoutubePlugin } from 'bootstrap-italia/dist/plugins/util/youtube-video.js';
 import { map as map$1 } from 'rxjs/operators';
 
 class ItAbstractComponent {
@@ -1117,7 +1119,6 @@ class ItCarouselComponent {
         this.trackClass = '';
     }
     ngAfterViewInit() {
-        this.carousel = CarouselBI.getOrCreateInstance(this.carouselDiv.nativeElement);
         this.items?.changes
             .pipe(
         // When carousel items changes (dynamic add/remove)
@@ -1129,22 +1130,25 @@ class ItCarouselComponent {
             }));
             this._changeDetectorRef.detectChanges(); // Force update html render
         });
+        setTimeout(() => {
+            this.carousel = Carousel.getOrCreateInstance(this.carouselDiv.nativeElement);
+        }, 100);
     }
     ngOnDestroy() {
         this.itemSubscriptions?.forEach(item => item.unsubscribe());
     }
     /**
-     * Removes CarouselBI features
+     * Removes Carousel features
      */
     dispose() {
         this.carousel?.dispose();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCarouselComponent, isStandalone: true, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: ["fullCarousel", "fullCarousel", inputToBoolean], bigImg: ["bigImg", "bigImg", inputToBoolean], standardImage: ["standardImage", "standardImage", inputToBoolean], lined: ["lined", "lined", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItCarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\"\n  data-bs-carousel-splide>\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;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{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;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;-ms-flex-negative:0;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;-ms-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{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCarouselComponent, isStandalone: true, selector: "it-carousel", inputs: { title: "title", type: "type", trackClass: "trackClass", fullCarousel: ["fullCarousel", "fullCarousel", inputToBoolean], bigImg: ["bigImg", "bigImg", inputToBoolean], standardImage: ["standardImage", "standardImage", inputToBoolean], lined: ["lined", "lined", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItCarouselItemComponent }], viewQueries: [{ propertyName: "carouselDiv", first: true, predicate: ["carousel"], descendants: true }], exportAs: ["itCarousel"], ngImport: i0, template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\">\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCarouselComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-carousel', exportAs: 'itCarousel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\"\n  data-bs-carousel-splide>\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", styles: [".splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;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{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;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;-ms-flex-negative:0;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;-ms-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{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}\n"] }]
+            args: [{ standalone: true, selector: 'it-carousel', exportAs: 'itCarousel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div\n  #carousel\n  class=\"it-carousel-wrapper splide {{ typeClass }}\"\n  [class.it-full-carousel]=\"fullCarousel\"\n  [class.it-big-img]=\"bigImg\"\n  [class.it-standard-image]=\"standardImage\">\n  @if (title) {\n    <div class=\"it-header-block\">\n      <div class=\"it-header-block-title\">\n        <h2>{{ title }}</h2>\n      </div>\n    </div>\n  }\n\n  <div class=\"splide__track {{ trackClass }}\">\n    @if (items) {\n      <ul class=\"splide__list\">\n        @for (item of items; track item) {\n          <li class=\"splide__slide\" [class.lined_slide]=\"lined\">\n            <div class=\"it-single-slide-wrapper\">\n              <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n            </div>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
                 type: Input
             }], type: [{
@@ -1978,19 +1982,20 @@ class ItAbstractFormComponent extends ItAbstractComponent {
     set disabled(isDisabled) {
         this.setDisabledState(isDisabled);
     }
-    constructor(_translateService, _ngControl) {
+    constructor(_translateService, _ngControl, fgd) {
         super();
         this._translateService = _translateService;
         this._ngControl = _ngControl;
+        this.fgd = fgd;
         /**
          * Validation color display mode (validation triggered if field is touched or not pristine)
          * - <b>true</b>: Always show the validation color
          * - <b>false</b>: Never show validation color
          * - <b>only-valid</b>: Show only valid validation color
          * - <b>only-invalid</b>: Show only invalid validation color
-         * @default <b>true</b>: Always show the validation color
+         * @default <b>false</b>: Do not show the validation color by default
          */
-        this.validationMode = true;
+        this.validationMode = false;
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         this.onChange = (_) => { };
         this.onTouched = () => { };
@@ -2033,6 +2038,7 @@ class ItAbstractFormComponent extends ItAbstractComponent {
     ngOnInit() {
         if (this._ngControl?.control) {
             this.control.setValidators(this._ngControl.control.validator);
+            this.setValidationModeWhenInAForm();
         }
     }
     registerOnChange(fn) {
@@ -2131,7 +2137,16 @@ class ItAbstractFormComponent extends ItAbstractComponent {
         }
         return this.control.getError(errorCode, path);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, deps: [{ token: i1.TranslateService }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    // This function assurest that validation mode remains complaiant with the Design kit
+    // When the validation mode is `false` and input elements are wrapped in a `FormGroup`
+    // validation mode is automatically set to `true`.
+    setValidationModeWhenInAForm() {
+        const isInAForm = this.fgd?.control instanceof FormGroup;
+        if (isInAForm && this.validationMode == false) {
+            this.validationMode = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, deps: [{ token: i1.TranslateService }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItAbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: ["disabled", "disabled", inputToBoolean] }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, decorators: [{
@@ -2141,6 +2156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                     type: Self
                 }, {
                     type: Optional
+                }] }, { type: i1$1.ControlContainer, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { label: [{
                 type: Input
             }], validationMode: [{
@@ -2285,6 +2302,11 @@ class ItValidators {
     static get tel() {
         return ItValidators.customPattern(PHONE_NUMBER_REGEX, { invalidTel: true });
     }
+    static includes(possibleValues) {
+        return formControl => {
+            return possibleValues?.includes(formControl.value) ? null : { invalidSelection: true };
+        };
+    }
     /**
      * URL validator
      */
@@ -2481,11 +2503,11 @@ class ItInputComponent extends ItAbstractFormComponent {
         this.control.setValue(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-symbol-label]=\"percentage || currency\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItInputComponent, isStandalone: true, selector: "it-input", inputs: { type: "type", placeholder: "placeholder", description: "description", readonly: "readonly", maxDate: "maxDate", minDate: "minDate", max: "max", min: "min", step: "step", currency: ["currency", "currency", inputToBoolean], percentage: ["percentage", "percentage", inputToBoolean], symbol: "symbol", adaptive: ["adaptive", "adaptive", inputToBoolean], autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-symbol-label]=\"percentage || currency\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItInputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TranslateModule, AsyncPipe], template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-symbol-label]=\"percentage || currency\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group input:focus:not(.focus--mouse){box-shadow:inherit!important;border-color:inherit!important}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
+            args: [{ standalone: true, selector: 'it-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TranslateModule, AsyncPipe], template: "<div class=\"form-group\">\n  <div\n    class=\"input-group\"\n    [class.disabled]=\"!control.enabled\"\n    [class.input-number]=\"type === 'number'\"\n    [class.input-number-currency]=\"currency\"\n    [class.input-number-percentage]=\"percentage\"\n    [class.input-number-adaptive]=\"adaptive\">\n    <span class=\"input-group-text\" #prependText>\n      <ng-content select=\"[prependText]\"></ng-content>\n    </span>\n    @if (label) {\n      <label\n        [for]=\"id\"\n        [class.active]=\"isActiveLabel\"\n        [class.input-symbol-label]=\"percentage || currency\"\n        [class.input-number-label]=\"type === 'number'\"\n        [class.empty-prepend-label]=\"!(percentage || currency) && !prependText.clientWidth\">\n        {{ label }}\n      </label>\n    }\n\n    @if (type === 'number') {\n      @if (currency || percentage) {\n        <span class=\"input-group-text fw-semibold\">{{ symbol }}</span>\n      }\n      <input\n        type=\"number\"\n        [id]=\"id\"\n        [step]=\"step ?? null\"\n        [min]=\"min ?? ''\"\n        [max]=\"max ?? ''\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n      <span class=\"input-group-text align-buttons flex-column\">\n        <button type=\"button\" class=\"input-number-add\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber()\">\n          <span class=\"visually-hidden\">{{ 'it.form.increase-value' | translate }}</span>\n        </button>\n        <button type=\"button\" class=\"input-number-sub\" [disabled]=\"!control.enabled\" (click)=\"incrementNumber(true)\">\n          <span class=\"visually-hidden\">{{ 'it.form.decrease-value' | translate }}</span>\n        </button>\n      </span>\n    } @else {\n      <input\n        [id]=\"id\"\n        [type]=\"type\"\n        [max]=\"type === 'date' ? maxDate : undefined\"\n        [min]=\"type === 'date' ? minDate : undefined\"\n        [class.form-control]=\"readonly !== 'plaintext'\"\n        [class.form-control-plaintext]=\"readonly === 'plaintext'\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.just-validate-success-field]=\"isValid\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"isReadonly\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-describedby]=\"id + '-description'\"\n        (blur)=\"markAsTouched()\" />\n    }\n\n    <div class=\"input-group-append\">\n      <ng-content select=\"[append]\"></ng-content>\n\n      <div class=\"input-group-text\">\n        <ng-content select=\"[appendText]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", styles: [".form-group label{z-index:1000}.form-group .input-number .align-buttons{height:100%}.form-group .input-group-text:empty{display:none}.form-group label.empty-prepend-label{left:auto!important;max-width:100%!important}.form-group label:not(.active):has(+input:-webkit-autofill){transform:translateY(-75%)}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
@@ -4467,7 +4489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
 
-class ItAutocompleteComponent extends ItAbstractFormComponent {
+class ItSearchComponent extends ItAbstractFormComponent {
     constructor() {
         super(...arguments);
         /**
@@ -4489,52 +4511,52 @@ class ItAutocompleteComponent extends ItAbstractFormComponent {
          */
         this.forceShowLabel = true;
         /**
-         * Fired when the Autocomplete Item has been selected
+         * Fired when the Search Item has been selected
          */
-        this.autocompleteSelectedEvent = new EventEmitter();
+        this.searchSelectedEvent = new EventEmitter();
         this.showAutocompletion = false;
         /** Observable da cui vengono emessi i risultati dell'auto completamento */
-        this.autocompleteResults$ = new Observable();
+        this.searchResults$ = new Observable();
     }
     ngOnInit() {
         super.ngOnInit();
-        this.autocompleteResults$ = this.getAutocompleteResults$();
+        this.searchResults$ = this.getSearchResults$();
     }
     /**
-     * Create the autocomplete list
+     * Create the search list
      */
-    getAutocompleteResults$() {
+    getSearchResults$() {
         return this.control.valueChanges.pipe(debounceTime(this.debounceTime), // Delay filter data after time span has passed without another source emission, useful when the user is typing multiple letters
         distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value
         switchMap(searchedValue => {
-            if (!this.autocompleteData) {
+            if (!this.searchData) {
                 return of({
                     searchedValue,
                     relatedEntries: [],
                 });
             }
-            const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue);
-            return autoCompleteData$.pipe(map(autocompleteData => {
+            const autoCompleteData$ = Array.isArray(this.searchData) ? of(this.searchData) : this.searchData(searchedValue);
+            return autoCompleteData$.pipe(map(searchData => {
                 if (!searchedValue || typeof searchedValue === 'number') {
                     return { searchedValue, relatedEntries: [] };
                 }
                 const lowercaseValue = searchedValue.toLowerCase();
-                const relatedEntries = autocompleteData.filter(item => item.value?.toLowerCase().includes(lowercaseValue));
+                const relatedEntries = searchData.filter(item => item.value?.toLowerCase().includes(lowercaseValue));
                 return { searchedValue, relatedEntries };
             }));
         }));
     }
     onEntryClick(entry, event) {
-        // Se non è stato definito un link associato all'elemento dell'autocomplete, probabilmente il desiderata
+        // Se non è stato definito un link associato all'elemento dell'search, probabilmente il desiderata
         // non è effettuare la navigazione al default '#', pertanto in tal caso meglio annullare la navigazione.
         if (!entry.link) {
             event.preventDefault();
         }
-        this.autocompleteSelectedEvent.next(entry);
+        this.searchSelectedEvent.next(entry);
         this.control.setValue(entry.value);
         this.showAutocompletion = false;
     }
-    autocompleteItemTrackByValueFn(index, item) {
+    searchItemTrackByValueFn(index, item) {
         return item.value;
     }
     onKeyDown() {
@@ -4544,13 +4566,13 @@ class ItAutocompleteComponent extends ItAbstractFormComponent {
         const value = this.control.value;
         return this.forceShowLabel && (!!value || !!this.placeholder);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { autocompleteData: "autocompleteData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { autocompleteSelectedEvent: "autocompleteSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (autocompleteResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track autocompleteItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSearchComponent, isStandalone: true, selector: "it-search", inputs: { searchData: "searchData", big: ["big", "big", inputToBoolean], debounceTime: "debounceTime", placeholder: "placeholder", labelWaria: "labelWaria", forceShowLabel: ["forceShowLabel", "forceShowLabel", inputToBoolean] }, outputs: { searchSelectedEvent: "searchSelectedEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "pipe", type: ItMarkMatchingTextPipe, name: "itMarkMatchingText" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSearchComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'it-autocomplete', imports: [AsyncPipe, ItIconComponent, ItMarkMatchingTextPipe, NgTemplateOutlet, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (autocompleteResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track autocompleteItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { autocompleteData: [{
+            args: [{ standalone: true, selector: 'it-search', imports: [AsyncPipe, ItIconComponent, ItMarkMatchingTextPipe, NgTemplateOutlet, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\" [class.autocomplete-wrapper-big]=\"big\">\n  @if (label) {\n    <label [for]=\"id\" [class.visually-hidden]=\"!isActiveLabel\" [class.active]=\"isActiveLabel\">\n      {{ label }}\n    </label>\n  }\n\n  <input\n    [id]=\"id\"\n    type=\"search\"\n    class=\"autocomplete form-control\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.is-valid]=\"isValid\"\n    (blur)=\"markAsTouched()\"\n    (keydown)=\"onKeyDown()\" />\n\n  <span class=\"autocomplete-icon\" aria-hidden=\"true\">\n    <it-icon [labelWaria]=\"labelWaria\" name=\"search\" size=\"sm\"></it-icon>\n  </span>\n\n  @if (searchResults$ | async; as autocomplete) {\n    <ul class=\"autocomplete-list\" [class.autocomplete-list-show]=\"autocomplete.relatedEntries?.length && showAutocompletion\">\n      @for (entry of autocomplete.relatedEntries; track searchItemTrackByValueFn($index, entry)) {\n        <li>\n          <a [href]=\"entry.link\" (click)=\"onEntryClick(entry, $event)\">\n            @if (entry.avatarSrcPath) {\n              <div class=\"avatar size-sm\">\n                <img [src]=\"entry.avatarSrcPath\" [alt]=\"entry.avatarAltText\" />\n              </div>\n            }\n            @if (entry.icon) {\n              <it-icon [name]=\"entry.icon\" size=\"sm\"></it-icon>\n            }\n            <span class=\"autocomplete-list-text\">\n              <span [innerHTML]=\"entry.value | itMarkMatchingText: autocomplete.searchedValue\"></span>\n              @if (entry.label) {\n                <em>{{ entry.label }}</em>\n              }\n            </span>\n          </a>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError>\n        <ng-content select=\"[error]\"></ng-content>\n      </div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { searchData: [{
                 type: Input,
                 args: [{ required: true }]
             }], big: [{
@@ -4565,7 +4587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             }], forceShowLabel: [{
                 type: Input,
                 args: [{ transform: inputToBoolean }]
-            }], autocompleteSelectedEvent: [{
+            }], searchSelectedEvent: [{
                 type: Output
             }] } });
 
@@ -5024,8 +5046,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 type: Output
             }] } });
 
+class ItAutocompleteComponent extends ItAbstractFormComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Autocomplete elements.
+         * @default []
+         */
+        this.source = [];
+        /**
+         * Autocomplete if required.
+         * @default false
+         */
+        this.required = false;
+        /**
+         * Prevents suggestions from appearing if fewer than N characters are typed
+         * @default 0
+         */
+        this.minLength = 0;
+        /**
+         * Default value
+         */
+        this.defaultValue = '';
+        /**
+         * Function to set assistive hint label. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
+         */
+        this.assistiveHintLabel = () => 'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento';
+        /**
+         * Function to set label in case of no result. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
+         */
+        this.noResultsLabel = () => 'Nessun risultato trovato';
+        /**
+         * Function to set label that alerts you that query's too short. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
+         */
+        this.statusQueryTooShortLabel = minQueryLength => `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;
+        /**
+         * Function to set no results label. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
+         */
+        this.statusNoResultsLabel = () => 'Nessun risultato di ricerca';
+        /**
+         * Function to set selected option label. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
+         */
+        this.statusSelectedOptionLabel = (selectedOption, length, index) => `${selectedOption} ${index + 1} di ${length} è sottolineato`;
+        /**
+         * Function to set status results label. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
+         */
+        this.statusResultsLabel = (length, contentSelectedOption) => {
+            const words = {
+                result: length === 1 ? 'risultato' : 'risultati',
+                is: length === 1 ? 'è' : 'sono',
+                available: length === 1 ? 'disponibile' : 'disponibili',
+            };
+            return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;
+        };
+        /**
+         * Fired when value changes
+         */
+        this.selected = new EventEmitter();
+        this.value = '';
+        this._interval = 0;
+        this._inputEl = null;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!this.control.value && !!this.value) {
+            this.writeValue(this.value);
+            this.onChange(this.value);
+        }
+    }
+    clear() {
+        this._inputEl.value = '';
+    }
+    _findInput() {
+        this._interval = setInterval(() => {
+            this._inputEl = document.getElementById(this.id);
+            if (this._inputEl) {
+                clearInterval(this._interval);
+                this._initInputEl();
+            }
+        }, 500);
+    }
+    _setAndCheck(value) {
+        this.value = value == '' ? undefined : value;
+        if (this.control.touched) {
+            this.writeValue(this.value);
+            this.onChange(this.value);
+        }
+        if (this.isValid == false && this.isInvalid == false) {
+            this._inputEl?.classList.remove('just-validate-success-field');
+            this._inputEl?.classList.remove('is-invalid');
+        }
+        else if (this.isValid == true) {
+            this._inputEl?.classList.add('just-validate-success-field');
+            this._inputEl?.classList.remove('is-invalid');
+        }
+        else if (this.isInvalid == true) {
+            this._inputEl?.classList.add('is-invalid');
+            this._inputEl?.classList.remove('just-validate-success-field');
+        }
+    }
+    _initInputEl() {
+        if (this._inputEl) {
+            this._inputEl.onfocus = (ev) => this._setAndCheck(ev.target.value);
+            this._inputEl.onblur = (ev) => this._setAndCheck(ev.target.value);
+            this._inputEl.oninput = (ev) => {
+                this.markAsTouched();
+                this._setAndCheck(ev.target.value);
+            };
+        }
+    }
+    ngAfterViewInit() {
+        if (this.selectAutocompleteEl) {
+            super.ngAfterViewInit();
+            const element = this.selectAutocompleteEl.nativeElement;
+            this.selectAutocomplete = new SelectAutocomplete(element, {
+                id: this.id,
+                name: this.name || this.id,
+                source: this.source,
+                required: this.required,
+                minLength: this.minLength,
+                defaultValue: this.defaultValue,
+                tAssistiveHint: this.assistiveHintLabel,
+                tNoResults: this.noResultsLabel,
+                tStatusQueryTooShort: this.statusQueryTooShortLabel,
+                tStatusNoResults: this.statusNoResultsLabel,
+                tStatusSelectedOption: this.statusSelectedOptionLabel,
+                tStatusResults: this.statusResultsLabel,
+                onConfirm: (selectedElement) => {
+                    this.markAsTouched();
+                    this._setAndCheck(selectedElement);
+                    this.selected.emit(selectedElement);
+                },
+            });
+            this._findInput();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAutocompleteComponent, isStandalone: true, selector: "it-autocomplete", inputs: { source: "source", required: "required", name: "name", description: "description", minLength: "minLength", defaultValue: "defaultValue", assistiveHintLabel: "assistiveHintLabel", noResultsLabel: "noResultsLabel", statusQueryTooShortLabel: "statusQueryTooShortLabel", statusNoResultsLabel: "statusNoResultsLabel", statusSelectedOptionLabel: "statusSelectedOptionLabel", statusResultsLabel: "statusResultsLabel" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "selectAutocompleteEl", first: true, predicate: ["selectAutocomplete"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n  }\n  <div #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, AsyncPipe], template: "<div class=\"form-group\">\n  @if (label) {\n    <label [for]=\"id\" [class.active]=\"!!control.value\">{{ label }}</label>\n  }\n  <div #selectAutocomplete name=\"region\" [id]=\"id + 'Wrapper'\" class=\"autocomplete-wrapper\"></div>\n\n  @if (description) {\n    <small [id]=\"id + '-description'\" class=\"form-text\">{{ description }}</small>\n  }\n  @if (isInvalid) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <div #customError><ng-content select=\"[error]\"></ng-content></div>\n      @if (!customError.hasChildNodes()) {\n        {{ invalidMessage | async }}\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { source: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }], assistiveHintLabel: [{
+                type: Input
+            }], noResultsLabel: [{
+                type: Input
+            }], statusQueryTooShortLabel: [{
+                type: Input
+            }], statusNoResultsLabel: [{
+                type: Input
+            }], statusSelectedOptionLabel: [{
+                type: Input
+            }], statusResultsLabel: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], selectAutocompleteEl: [{
+                type: ViewChild,
+                args: ['selectAutocomplete']
+            }] } });
+
 const formComponents = [
     ItAutocompleteComponent,
+    ItSearchComponent,
     ItCheckboxComponent,
     ItInputComponent,
     ItPasswordInputComponent,
@@ -5041,6 +5236,7 @@ const formComponents = [
 class ItFormModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItFormModule, imports: [ItAutocompleteComponent,
+            ItSearchComponent,
             ItCheckboxComponent,
             ItInputComponent,
             ItPasswordInputComponent,
@@ -5052,6 +5248,7 @@ class ItFormModule {
             ItTransferComponent,
             ItUploadDragDropComponent,
             ItUploadFileListComponent], exports: [ItAutocompleteComponent,
+            ItSearchComponent,
             ItCheckboxComponent,
             ItInputComponent,
             ItPasswordInputComponent,
@@ -5597,7 +5794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             args: [{
                     selector: 'it-navscroll-list-item',
                     standalone: true,
-                    imports: [RouterLink, RouterLinkActive, RouterLinkWithHref, ItNavscrollListItemsComponent, AsyncPipe],
+                    imports: [RouterLink, RouterLinkActive, RouterLinkWithHref, AsyncPipe],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <a
@@ -5817,6 +6014,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 args: ['class']
             }] } });
 
+class ItSkiplinkComponent {
+    constructor() {
+        /**
+         * Aria label for `nav` mode
+         * @default 'Scorciatoie di navigazione'
+         */
+        this.ariaLabel = 'Scorciatoie di navigazione';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSkiplinkComponent, isStandalone: true, selector: "it-skiplink", inputs: { ariaLabel: "ariaLabel", nav: ["nav", "nav", inputToBoolean] }, exportAs: ["itSkipLink"], ngImport: i0, template: "@if (nav) {\n  <nav class=\"skiplinks\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </ul>\n  </nav>\n} @else {\n  <div class=\"skiplinks\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </div>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-skiplink', exportAs: 'itSkipLink', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (nav) {\n  <nav class=\"skiplinks\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </ul>\n  </nav>\n} @else {\n  <div class=\"skiplinks\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </div>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], nav: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }] } });
+
+class ItSkiplinkItemComponent {
+    constructor(parent) {
+        this.inNav = parent.nav ? true : false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkItemComponent, deps: [{ token: ItSkiplinkComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSkiplinkItemComponent, isStandalone: true, selector: "it-skiplink-item", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean] }, exportAs: ["itSkipLinkItem"], ngImport: i0, template: "@if (inNav) {\n  <li class=\"visually-hidden-focusable\">\n    <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </it-link>\n  </li>\n} @else {\n  <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </it-link>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'it-skiplink-item', exportAs: 'itSkipLinkItem', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (inNav) {\n  <li class=\"visually-hidden-focusable\">\n    <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </it-link>\n  </li>\n} @else {\n  <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </it-link>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ItSkiplinkComponent, decorators: [{
+                    type: Host
+                }] }], propDecorators: { href: [{
+                type: Input
+            }], externalLink: [{
+                type: Input,
+                args: [{ transform: inputToBoolean }]
+            }] } });
+
+const skiplinkComponents = [ItSkiplinkComponent, ItSkiplinkItemComponent];
+class ItSkiplinkModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, imports: [ItSkiplinkComponent, ItSkiplinkItemComponent], exports: [ItSkiplinkComponent, ItSkiplinkItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, imports: [skiplinkComponents] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: skiplinkComponents,
+                    exports: skiplinkComponents,
+                }]
+        }] });
+
 class ItErrorPageComponent {
     constructor(route) {
         this.route = route;
@@ -6088,60 +6339,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 }]
         }] });
 
-class ItSkiplinkComponent {
-    constructor() {
-        /**
-         * Aria label for `nav` mode
-         * @default 'Scorciatoie di navigazione'
-         */
-        this.ariaLabel = 'Scorciatoie di navigazione';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSkiplinkComponent, isStandalone: true, selector: "it-skiplink", inputs: { ariaLabel: "ariaLabel", nav: ["nav", "nav", inputToBoolean] }, exportAs: ["itSkipLink"], ngImport: i0, template: "@if (nav) {\n  <nav class=\"skiplinks\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </ul>\n  </nav>\n} @else {\n  <div class=\"skiplinks\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </div>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'it-skiplink', exportAs: 'itSkipLink', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (nav) {\n  <nav class=\"skiplinks\">\n    <ul>\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </ul>\n  </nav>\n} @else {\n  <div class=\"skiplinks\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </div>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], propDecorators: { ariaLabel: [{
-                type: Input
-            }], nav: [{
-                type: Input,
-                args: [{ transform: inputToBoolean }]
-            }] } });
-
-class ItSkiplinkItemComponent {
-    constructor(parent) {
-        this.inNav = parent.nav ? true : false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkItemComponent, deps: [{ token: ItSkiplinkComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItSkiplinkItemComponent, isStandalone: true, selector: "it-skiplink-item", inputs: { href: "href", externalLink: ["externalLink", "externalLink", inputToBoolean] }, exportAs: ["itSkipLinkItem"], ngImport: i0, template: "@if (inNav) {\n  <li class=\"visually-hidden-focusable\">\n    <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </it-link>\n  </li>\n} @else {\n  <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </it-link>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkItemComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'it-skiplink-item', exportAs: 'itSkipLinkItem', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TranslateModule, ItLinkComponent], template: "@if (inNav) {\n  <li class=\"visually-hidden-focusable\">\n    <it-link [href]=\"href\" [externalLink]=\"externalLink\">\n      <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n    </it-link>\n  </li>\n} @else {\n  <it-link class=\"visually-hidden-focusable\" [href]=\"href\" [externalLink]=\"externalLink\">\n    <ng-container *ngTemplateOutlet=\"linkContent\"></ng-container>\n  </it-link>\n}\n\n<ng-template #linkContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: ItSkiplinkComponent, decorators: [{
-                    type: Host
-                }] }], propDecorators: { href: [{
-                type: Input
-            }], externalLink: [{
-                type: Input,
-                args: [{ transform: inputToBoolean }]
-            }] } });
-
-const skiplinkComponents = [ItSkiplinkComponent, ItSkiplinkItemComponent];
-class ItSkiplinkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, imports: [ItSkiplinkComponent, ItSkiplinkItemComponent], exports: [ItSkiplinkComponent, ItSkiplinkItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, imports: [skiplinkComponents] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItSkiplinkModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: skiplinkComponents,
-                    exports: skiplinkComponents,
-                }]
-        }] });
-
 /**
  * Configures DesignAngularKit library
  * @param config the DesignAngularKit config
@@ -6230,6 +6427,7 @@ const core = [
     ItTableModule,
     ItTooltipDirective,
     ItTimelineModule,
+    ItVideoPlayerComponent,
 ];
 /**
  * Navigation Components
@@ -6299,7 +6497,8 @@ class DesignAngularKitModule {
             ItTabModule,
             ItTableModule,
             ItTooltipDirective,
-            ItTimelineModule, // Core components
+            ItTimelineModule,
+            ItVideoPlayerComponent, // Core components
             ItFormModule, ItBackButtonComponent,
             ItBackToTopComponent,
             ItBreadcrumbsModule,
@@ -6334,7 +6533,8 @@ class DesignAngularKitModule {
             ItTabModule,
             ItTableModule,
             ItTooltipDirective,
-            ItTimelineModule, // Core components
+            ItTimelineModule,
+            ItVideoPlayerComponent, // Core components
             ItFormModule, ItBackButtonComponent,
             ItBackToTopComponent,
             ItBreadcrumbsModule,
@@ -6386,6 +6586,498 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 }]
         }] });
 
+class VideoPlayerI18nService {
+    #translate = inject(TranslateService);
+    init(player, destroyRef) {
+        this.#translate.onLangChange
+            .pipe(takeUntilDestroyed(destroyRef), tap({
+            next: e => {
+                const language = e.lang;
+                videojs.addLanguage(language, this.getTranslations());
+                player.language(language);
+            },
+        }))
+            .subscribe(x => {
+            console.log('onLangChange', x);
+        });
+    }
+    getLanguage() {
+        const language = this.#translate.currentLang ?? 'it';
+        return {
+            languages: { [language]: mapToVideoJsTranslation(this.#translate.instant('it.video-player')) },
+            language,
+        };
+    }
+    getTranslations() {
+        return mapToVideoJsTranslation(this.#translate.instant('it.video-player'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerI18nService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerI18nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function mapToVideoJsTranslation(translations) {
+    return {
+        'Audio Player': translations['audio-player'],
+        'Video Player': translations['video-player'],
+        Play: translations.play,
+        Pause: translations.pause,
+        Replay: translations.replay,
+        'Current Time': translations['current-time'],
+        Duration: translations.duration,
+        'Remaining Time': translations['remaining-time'],
+        'Stream Type': translations['stream-type'],
+        LIVE: translations.live,
+        Loaded: translations.loaded,
+        Progress: translations.progress,
+        'Progress Bar': translations['progress-bar'],
+        'progress bar timing: currentTime={1} duration={2}': translations['progress-bar-timing:-currenttime={1}-duration={2}'],
+        Fullscreen: translations.fullscreen,
+        'Exit Fullscreen': translations['exit-fullscreen'],
+        Mute: translations.mute,
+        Unmute: translations.unmute,
+        'Playback Rate': translations['playback-rate'],
+        Subtitles: translations.subtitles,
+        'subtitles off': translations['subtitles-off'],
+        Captions: translations.captions,
+        'captions off': translations['captions-off'],
+        Chapters: translations.chapters,
+        Descriptions: translations.descriptions,
+        'descriptions off': translations['descriptions-off'],
+        'Audio Track': translations['audio-track'],
+        'Volume Level': translations['volume-level'],
+        'You aborted the media playback': translations['you-aborted-the-media-playback'],
+        'A network error caused the media download to fail part-way.': translations['a-network-error-caused-the-media-download-to-fail-part-way.'],
+        'The media could not be loaded, either because the server or network failed or because the format is not supported.': translations['the-media-could-not-be-loaded,-either-because-the-server-or-network-failed-or-because-the-format-is-not-supported.'],
+        'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.': translations['the-media-playback-was-aborted-due-to-a-corruption-problem-or-because-the-media-used-features-your-browser-did-not-support.'],
+        'No compatible source was found for this media.': translations['no-compatible-source-was-found-for-this-media.'],
+        'The media is encrypted and we do not have the keys to decrypt it.': translations['the-media-is-encrypted-and-we-do-not-have-the-keys-to-decrypt-it.'],
+        'Play Video': translations['play-video'],
+        Close: translations.close,
+        'Close Modal Dialog': translations['close-modal-dialog'],
+        'Modal Window': translations['modal-window'],
+        'This is a modal window': translations['this-is-a-modal-window'],
+        'This modal can be closed by pressing the Escape key or activating the close button.': translations['this-modal-can-be-closed-by-pressing-the-escape-key-or-activating-the-close-button.'],
+        ', opens captions settings dialog': translations[',-opens-captions-settings-dialog'],
+        ', opens subtitles settings dialog': translations[',-opens-subtitles-settings-dialog'],
+        ', opens descriptions settings dialog': translations[',-opens-descriptions-settings-dialog'],
+        ', selected': translations[',-selected'],
+        'captions settings': translations['captions-settings'],
+        'subtitles settings': translations['subtitles-settings'],
+        'descriptions settings': translations['descriptions-settings'],
+        Text: translations.text,
+        White: translations.white,
+        Black: translations.black,
+        Red: translations.red,
+        Green: translations.green,
+        Blue: translations.blue,
+        Yellow: translations.yellow,
+        Magenta: translations.magenta,
+        Cyan: translations.cyan,
+        Background: translations.background,
+        Window: translations.window,
+        Transparent: translations.transparent,
+        'Semi-Transparent': translations['semi-transparent'],
+        Opaque: translations.opaque,
+        'Font Size': translations['font-size'],
+        'Text Edge Style': translations['text-edge-style'],
+        None: translations.none,
+        Uniform: translations.uniform,
+        'Drop shadow': translations['drop-shadow'],
+        'Font Family': translations['font-family'],
+        'Proportional Sans-Serif': translations['proportional-sans-serif'],
+        'Monospace Sans-Serif': translations['monospace-sans-serif'],
+        'Proportional Serif': translations['proportional-serif'],
+        'Monospace Serif': translations['monospace-serif'],
+        'Small Caps': translations['small-caps'],
+        Reset: translations.reset,
+        'restore all settings to the default values': translations['restore-all-settings-to-the-default-values'],
+        Done: translations.done,
+        'Caption Settings Dialog': translations['caption-settings-dialog'],
+        'Beginning of dialog window. Escape will cancel and close the window.': translations['beginning-of-dialog-window.-escape-will-cancel-and-close-the-window.'],
+        'End of dialog window.': translations['end-of-dialog-window.'],
+        '{1} is loading.': translations['{1}-is-loading.'],
+        'Exit Picture-in-Picture': translations['exit-picture-in-picture'],
+        'Picture-in-Picture': translations['picture-in-picture'],
+        Color: translations.color,
+        Opacity: translations.opacity,
+        'Text Background': translations['text-background'],
+        'Caption Area Background': translations['caption-area-background'],
+        'Skip forward {1} seconds': translations['skip-forward-{1}-seconds'],
+        'Skip backward {1} seconds': translations['skip-backward-{1}-seconds'],
+    };
+}
+
+const preferencesMap = { ck3: {} };
+const STORAGE_KEY = 'bs-ck3';
+/*
+  Possible choices:
+  false => Accept once
+  true => Accept always
+*/
+const rememberChoice = (service, remember) => {
+    preferencesMap.ck3[service] = remember;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(preferencesMap.ck3));
+};
+const isChoiceRemembered = (service) => {
+    preferencesMap.ck3 = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+    return Boolean(preferencesMap.ck3[service]) || false;
+};
+const clearAllRememberedChoices = () => {
+    localStorage.removeItem(STORAGE_KEY);
+};
+const cookies = {
+    rememberChoice,
+    isChoiceRemembered,
+    clearAllRememberedChoices,
+};
+
+const hasYoutubeVideo = (options) => options.source?.type === 'video/youtube';
+class VideoPlayerConfigService {
+    #languageService = inject(VideoPlayerI18nService);
+    async configureTech({ tech }) {
+        if (tech === 'youtube') {
+            initYoutubePlugin(videojs);
+        }
+    }
+    mergeConfig(o) {
+        const options = o;
+        const captions = options.captions ? options.captions.map(c => ({ ...c, kind: 'captions' })) : [];
+        const chapters = options.chapters ? options.chapters.map(c => ({ ...c, kind: 'chapters' })) : [];
+        const isYoutubeVideo = hasYoutubeVideo(options);
+        const DEFAULT_CONFIG = this.#languageService.getLanguage();
+        const tech = isYoutubeVideo ? 'youtube' : 'html5';
+        const techOrder = [tech];
+        //https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#preload
+        const preload = options.preload ?? 'metadata';
+        const config = { ...DEFAULT_CONFIG, ...options, preload, techOrder, tracks: [...captions, ...chapters], tech: 'html5' };
+        return isYoutubeVideo
+            ? {
+                ...config,
+                sources: [o.source],
+                tech: 'youtube',
+                youtube: { ytControls: 2, rel: 0, fs: 0, modestbranding: 1 },
+            }
+            : config;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VideoPlayerConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+var ViewType;
+(function (ViewType) {
+    ViewType["Default"] = "DEFAULT";
+    ViewType["Overlay"] = "OVERLAY";
+})(ViewType || (ViewType = {}));
+/**
+ * Video Player
+ * @description Component that allows playing a video.
+ */
+class ItVideoPlayerComponent extends ItAbstractComponent {
+    #destroyRef;
+    get viewType() {
+        return this.viewType$.value;
+    }
+    constructor(config) {
+        super();
+        this.config = config;
+        this.viewTypes = ViewType;
+        this.viewType$ = new BehaviorSubject(undefined);
+        this.cookieAccepted$ = new BehaviorSubject(false);
+        this.i18nService = inject(VideoPlayerI18nService);
+        this.#destroyRef = inject(DestroyRef);
+    }
+    async ngOnInit() {
+        const config = this.config.mergeConfig(this.options);
+        this.setViewType(config);
+        await this.config.configureTech(config);
+        if (!this.videoPlayerRef) {
+            this.cookieAccepted$
+                .pipe(takeUntilDestroyed(this.#destroyRef), delay(0), tap({
+                next: value => {
+                    if (value && !this.player) {
+                        this.initVideoPlayer();
+                    }
+                },
+            }))
+                .subscribe();
+            return;
+        }
+        this.initVideoPlayer();
+    }
+    ngAfterViewInit() {
+        if (this.viewType === ViewType.Overlay && cookies.isChoiceRemembered('youtube.com')) {
+            this.hideOverlay();
+        }
+    }
+    ngOnDestroy() {
+        if (this.player) {
+            this.player.dispose();
+        }
+    }
+    acceptCookieHandler() {
+        this.rememberHandler();
+        this.hideOverlay();
+        this.cookieAccepted$.next(true);
+    }
+    initVideoPlayer() {
+        const config = this.config.mergeConfig(this.options);
+        this.setVideoAttributes(config);
+        this.setVideoPlayer();
+    }
+    setVideoPlayer() {
+        const config = this.config.mergeConfig(this.options);
+        const onPlayerReadyCb = () => {
+            if (!this.player) {
+                return;
+            }
+            this.i18nService.init(this.player, this.#destroyRef);
+        };
+        if (!this.videoPlayerRef) {
+            throw Error('videoPlayerRef is undefined');
+        }
+        this.player = videojs(this.videoPlayerRef.nativeElement, config, onPlayerReadyCb.bind(this));
+    }
+    setViewType(config) {
+        this.viewType$.next(config.tech === 'youtube' ? ViewType.Overlay : ViewType.Default);
+        this.cookieAccepted$.next(this.viewType === ViewType.Overlay && cookies.isChoiceRemembered('youtube.com'));
+    }
+    hideOverlay() {
+        if (!this.acceptOverlayableRef) {
+            return;
+        }
+        const classes = ['show'];
+        this.acceptOverlayableRef.nativeElement.classList.remove(...classes);
+        if (!this.acceptOveralyRef) {
+            return;
+        }
+        this.acceptOveralyRef.nativeElement.classList.remove(...classes);
+        this.acceptOveralyRef.nativeElement.setAttribute('aria-hidden', 'true');
+    }
+    rememberHandler() {
+        if (!this.chrRememberRef) {
+            return;
+        }
+        const remember = this.chrRememberRef.nativeElement.checked;
+        cookies.rememberChoice('youtube.com', remember);
+    }
+    setVideoAttributes(options) {
+        if (!this.videoPlayerRef) {
+            return;
+        }
+        const v = this.videoPlayerRef.nativeElement;
+        const { autoplay, controls, loop, muted, poster, fluid } = options;
+        if (autoplay) {
+            v.setAttribute('autoplay', autoplay.toString());
+        }
+        if (controls) {
+            v.setAttribute('controls', '');
+        }
+        if (loop) {
+            v.setAttribute('loop', '');
+        }
+        if (muted) {
+            v.setAttribute('muted', '');
+        }
+        if (poster) {
+            v.setAttribute('poster', poster);
+        }
+        if (fluid) {
+            v.setAttribute('fluid', '');
+        }
+        v.setAttribute('preload', 'none');
+        v.setAttribute('playsinline', '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerComponent, deps: [{ token: VideoPlayerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItVideoPlayerComponent, isStandalone: true, selector: "it-video-player", inputs: { options: "options" }, viewQueries: [{ propertyName: "videoPlayerRef", first: true, predicate: ["videoPlayer"], descendants: true }, { propertyName: "acceptOveralyRef", first: true, predicate: ["acceptOveraly"], descendants: true }, { propertyName: "acceptOverlayableRef", first: true, predicate: ["acceptOverlayable"], descendants: true }, { propertyName: "chrRememberRef", first: true, predicate: ["chkRemember"], descendants: true }], usesInheritance: true, ngImport: i0, template: `@switch (viewType$ | async) {
+      @case (viewTypes.Default) {
+        <div class="row">
+          <ng-container *ngTemplateOutlet="videoTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="transcriptionTemplate"></ng-container>
+        </div>
+      }
+      @case (viewTypes.Overlay) {
+        <div #acceptOverlayable class="acceptoverlayable show">
+          <div #acceptOveraly class="acceptoverlay acceptoverlay-primary fade show">
+            <div class="acceptoverlay-inner">
+              <div class="acceptoverlay-icon">
+                <svg class="icon icon-xl"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-video"></use></svg>
+              </div>
+              <p>
+                Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella
+                <a href="#" class="text-white">cookie policy</a>.
+              </p>
+              <div class="acceptoverlay-buttons bg-dark">
+                <button type="button" class="btn btn-primary" (click)="acceptCookieHandler()">Accetta</button>
+                <div class="form-check">
+                  <input id="chk-remember{{ id }}" type="checkbox" #chkRemember />
+                  <label for="chk-remember{{ id }}">Ricorda per tutti i video</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          @if (cookieAccepted$ | async) {
+            <div>
+              <ng-container *ngTemplateOutlet="videoTemplate"></ng-container>
+              <ng-container *ngTemplateOutlet="transcriptionTemplate"></ng-container>
+            </div>
+          }
+        </div>
+      }
+      @default {
+        <h1>No video provider</h1>
+      }
+    }
+    <ng-template #videoTemplate>
+      <div>
+        <video #videoPlayer class="video-js vjs-theme-bootstrap-italia vjs-fluid vjs-big-play-centered"></video>
+      </div>
+    </ng-template>
+
+    <ng-template #transcriptionTemplate>
+      <div class="vjs-transcription accordion">
+        <div class="accordion-item">
+          <h2 class="accordion-header " id="transcription-{{ id }}-head">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              [attr.data-bs-target]="'#transcription-' + id"
+              [attr.aria-controls]="'transcription-' + id"
+              aria-expanded="true">
+              <ng-content select="[transcriptionTitle]">Trascrizione</ng-content>
+            </button>
+          </h2>
+          <div
+            id="transcription-{{ id }}"
+            class="accordion-collapse collapse"
+            role="region"
+            [attr.aria-labelledby]="'transcription-' + id + '-head'">
+            <div class="accordion-body">
+              <ng-content select="[transcriptionText]">-</ng-content>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-template> `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'it-video-player',
+                    template: `@switch (viewType$ | async) {
+      @case (viewTypes.Default) {
+        <div class="row">
+          <ng-container *ngTemplateOutlet="videoTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="transcriptionTemplate"></ng-container>
+        </div>
+      }
+      @case (viewTypes.Overlay) {
+        <div #acceptOverlayable class="acceptoverlayable show">
+          <div #acceptOveraly class="acceptoverlay acceptoverlay-primary fade show">
+            <div class="acceptoverlay-inner">
+              <div class="acceptoverlay-icon">
+                <svg class="icon icon-xl"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-video"></use></svg>
+              </div>
+              <p>
+                Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella
+                <a href="#" class="text-white">cookie policy</a>.
+              </p>
+              <div class="acceptoverlay-buttons bg-dark">
+                <button type="button" class="btn btn-primary" (click)="acceptCookieHandler()">Accetta</button>
+                <div class="form-check">
+                  <input id="chk-remember{{ id }}" type="checkbox" #chkRemember />
+                  <label for="chk-remember{{ id }}">Ricorda per tutti i video</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          @if (cookieAccepted$ | async) {
+            <div>
+              <ng-container *ngTemplateOutlet="videoTemplate"></ng-container>
+              <ng-container *ngTemplateOutlet="transcriptionTemplate"></ng-container>
+            </div>
+          }
+        </div>
+      }
+      @default {
+        <h1>No video provider</h1>
+      }
+    }
+    <ng-template #videoTemplate>
+      <div>
+        <video #videoPlayer class="video-js vjs-theme-bootstrap-italia vjs-fluid vjs-big-play-centered"></video>
+      </div>
+    </ng-template>
+
+    <ng-template #transcriptionTemplate>
+      <div class="vjs-transcription accordion">
+        <div class="accordion-item">
+          <h2 class="accordion-header " id="transcription-{{ id }}-head">
+            <button
+              class="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              [attr.data-bs-target]="'#transcription-' + id"
+              [attr.aria-controls]="'transcription-' + id"
+              aria-expanded="true">
+              <ng-content select="[transcriptionTitle]">Trascrizione</ng-content>
+            </button>
+          </h2>
+          <div
+            id="transcription-{{ id }}"
+            class="accordion-collapse collapse"
+            role="region"
+            [attr.aria-labelledby]="'transcription-' + id + '-head'">
+            <div class="accordion-body">
+              <ng-content select="[transcriptionText]">-</ng-content>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-template> `,
+                    imports: [AsyncPipe, NgTemplateOutlet],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: VideoPlayerConfigService }], propDecorators: { options: [{
+                type: Input
+            }], videoPlayerRef: [{
+                type: ViewChild,
+                args: ['videoPlayer', { static: false }]
+            }], acceptOveralyRef: [{
+                type: ViewChild,
+                args: ['acceptOveraly', { static: false }]
+            }], acceptOverlayableRef: [{
+                type: ViewChild,
+                args: ['acceptOverlayable', { static: false }]
+            }], chrRememberRef: [{
+                type: ViewChild,
+                args: ['chkRemember', { static: false }]
+            }] } });
+
+// See options: https://videojs.com/guides/options
+
+class ItVideoPlayerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerModule, imports: [ItVideoPlayerComponent], exports: [ItVideoPlayerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItVideoPlayerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ItVideoPlayerComponent],
+                    exports: [ItVideoPlayerComponent],
+                }]
+        }] });
+
 //Qs
 //Aria hidden?
 //state management with service?
@@ -6727,5 +7419,5 @@ class ItDateUtils {
  * Generated bundle index. Do not edit.
  */
 
-export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNavscrollComponent, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSelectComponent, ItSidebarComponent, ItSkiplinkComponent, ItSkiplinkItemComponent, ItSkiplinkModule, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTimelineComponent, ItTimelineItemComponent, ItTimelineModule, ItTooltipDirective, ItTransferComponent, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, PLATE_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
+export { CAP_REGEX, DesignAngularKitModule, EMAIL_REGEX, IBAN_REGEX, ITALIAN_TAX_CODE_REGEX, IT_ASSET_BASE_PATH, IT_SORT_DEFAULT_OPTIONS, IconNameArray, ItAccordionComponent, ItAlertComponent, ItAutocompleteComponent, ItAvatarDirective, ItAvatarDropdownComponent, ItAvatarDropdownItemComponent, ItAvatarGroupComponent, ItAvatarGroupItemComponent, ItAvatarModule, ItBackButtonComponent, ItBackToTopComponent, ItBadgeDirective, ItBreadcrumbComponent, ItBreadcrumbItemComponent, ItBreadcrumbsModule, ItButtonDirective, ItCalloutComponent, ItCardComponent, ItCarouselComponent, ItCarouselItemComponent, ItCarouselModule, ItCheckboxComponent, ItChipComponent, ItCollapseComponent, ItDateAgoPipe, ItDateUtils, ItDimmerButtonsComponent, ItDimmerComponent, ItDimmerIconComponent, ItDimmerModule, ItDropdownComponent, ItDropdownItemComponent, ItDropdownModule, ItDurationPipe, ItErrorPageComponent, ItFileUtils, ItFormModule, ItForwardDirective, ItHeaderComponent, ItIconComponent, ItInputComponent, ItLanguageSwitcherComponent, ItLinkComponent, ItListComponent, ItListItemComponent, ItListModule, ItMarkMatchingTextPipe, ItMegamenuComponent, ItModalComponent, ItNavBarComponent, ItNavBarItemComponent, ItNavBarModule, ItNavscrollComponent, ItNotificationService, ItNotificationsComponent, ItPaginationComponent, ItPasswordInputComponent, ItPopoverDirective, ItProgressBarComponent, ItProgressButtonComponent, ItRadioButtonComponent, ItRangeComponent, ItRatingComponent, ItSearchComponent, ItSelectComponent, ItSidebarComponent, ItSkiplinkComponent, ItSkiplinkItemComponent, ItSkiplinkModule, ItSortDirective, ItSortHeaderComponent, ItSpinnerComponent, ItSteppersContainerComponent, ItSteppersItemComponent, ItSteppersModule, ItTabContainerComponent, ItTabItemComponent, ItTabModule, ItTableComponent, ItTableModule, ItTextareaComponent, ItTimelineComponent, ItTimelineItemComponent, ItTimelineModule, ItTooltipDirective, ItTransferComponent, ItUploadDragDropComponent, ItUploadFileListComponent, ItValidators, ItVideoPlayerComponent, ItVideoPlayerModule, NotificationPosition, NotificationType, PHONE_NUMBER_REGEX, PLATE_REGEX, URL_REGEX, VAT_NUMBER_REGEX, provideDesignAngularKit };
 //# sourceMappingURL=design-angular-kit.mjs.map