@italia/video 0.1.0-alpha.1 → 1.0.0-alpha.4

package/dist/src/it-video.js

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit';
-import { property, state, customElement } from 'lit/decorators.js';
+import { state, query, property, customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { directive, Directive } from 'lit/directive.js';
@@ -14720,7 +14720,7 @@ var clockExports = requireClock();
 
 /**
  * @license
- * Video.js 8.23.3 <http://videojs.com/>
+ * Video.js 8.23.4 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/main/LICENSE>
@@ -14731,7 +14731,7 @@ var clockExports = requireClock();
  */
 
 
-var version$6 = "8.23.3";
+var version$6 = "8.23.4";
 
 /**
  * An Object that contains lifecycle hooks as keys which point to an array
@@ -18829,8 +18829,8 @@ class Component$1 {
    * Remove a child `Component` from this `Component`s list of children. Also removes
    * the child `Component`s element from this `Component`s element.
    *
-   * @param {Component} component
-   *        The child `Component` to remove.
+   * @param {string|Component} component
+   *       The name or instance of a child to remove.
    */
   removeChild(component) {
     if (typeof component === 'string') {
@@ -42943,7 +42943,7 @@ videojs.registerPlugin('qualityLevels', qualityLevels);
 // Include the version number.
 qualityLevels.VERSION = version$5;
 
-/*! @name @videojs/http-streaming @version 3.17.0 @license Apache-2.0 */
+/*! @name @videojs/http-streaming @version 3.17.2 @license Apache-2.0 */
 
 /**
  * @file resolve-url.js - Handling how URLs are resolved and manipulated
@@ -44447,7 +44447,7 @@ const getStreamingNetworkErrorMetadata = ({
   } else if (request.aborted) {
     errorMetadata.errorType = videojs.Error.NetworkRequestAborted;
   } else if (request.timedout) {
-    errorMetadata.erroType = videojs.Error.NetworkRequestTimeout;
+    errorMetadata.errorType = videojs.Error.NetworkRequestTimeout;
   } else if (isBadStatusOrParseFailure) {
     const errorType = parseFailure ? videojs.Error.NetworkBodyParserFailed : videojs.Error.NetworkBadStatus;
     errorMetadata.errorType = errorType;
@@ -45723,16 +45723,17 @@ class PlaylistLoader extends EventTarget$1 {
    */
 
   getKeyIdSet(playlist) {
-    if (playlist.contentProtection) {
-      const keyIds = new Set();
-      for (const keysystem in playlist.contentProtection) {
+    const keyIds = new Set();
+    if (!playlist || !playlist.contentProtection) {
+      return keyIds;
+    }
+    for (const keysystem in playlist.contentProtection) {
+      if (playlist.contentProtection[keysystem] && playlist.contentProtection[keysystem].attributes && playlist.contentProtection[keysystem].attributes.keyId) {
         const keyId = playlist.contentProtection[keysystem].attributes.keyId;
-        if (keyId) {
-          keyIds.add(keyId.toLowerCase());
-        }
+        keyIds.add(keyId.toLowerCase());
       }
-      return keyIds;
     }
+    return keyIds;
   }
 }
 
@@ -68788,7 +68789,7 @@ const initPlugin = function (player, options) {
 const reloadSourceOnError = function (options) {
   initPlugin(this, options);
 };
-var version$4 = "3.17.0";
+var version$4 = "3.17.2";
 var version$3 = "7.1.0";
 var version$2 = "1.3.1";
 var version$1 = "7.2.0";
@@ -69995,45 +69996,6 @@ if (!videojs.getPlugin || !videojs.getPlugin('reloadSourceOnError')) {
   videojs.registerPlugin('reloadSourceOnError', reloadSourceOnError);
 }
 
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * Form validation status.
- */
-var VALIDATION_STATUS;
-(function (VALIDATION_STATUS) {
-    /**
-     * One indicating no validation error.
-     */
-    VALIDATION_STATUS["NO_ERROR"] = "";
-    /**
-     * One indicating that the value is invalid (generic).
-     */
-    VALIDATION_STATUS["INVALID"] = "invalid";
-    /**
-     * One indicating missing required value.
-     */
-    VALIDATION_STATUS["ERROR_REQUIRED"] = "required";
-    /**
-     * One indicating that the value does not match the pattern.
-     */
-    VALIDATION_STATUS["PATTERN"] = "pattern";
-    /**
-     * One indicating that the value is shorter than the minimum length.
-     */
-    VALIDATION_STATUS["MINLENGTH"] = "minlength";
-    /**
-     * One indicating that the value is less than the maximum length.
-     */
-    VALIDATION_STATUS["MAXLENGTH"] = "maxlength";
-})(VALIDATION_STATUS || (VALIDATION_STATUS = {}));
-
 class SetAttributesDirective extends Directive {
     update(part, [attributes]) {
         const el = part.element;
@@ -70056,6 +70018,8 @@ class SetAttributesDirective extends Directive {
 */
 directive(SetAttributesDirective);
 
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
 const connectedElements = new Set();
 if (window && !window.translations) {
     window.translations = new Map();
@@ -70265,10 +70229,11 @@ const LocalizeMixin = (Base) => class extends Base {
     constructor() {
         super(...arguments);
         this.localize = new LocalizeController(this);
-        // Provide default values to avoid definite assignment errors and avoid decorators
-        this.dir = '';
-        this.lang = '';
     }
+    // Provide default values to avoid definite assignment errors and avoid decorators
+    // commentati perchè danno problemi su React.js. Sono attributi nativi, e assegnare un valore di default a react da fastidio
+    // dir: string = '';
+    // lang: string = '';
     /**
      * Restituisce tutta l'utility di traduzione
      *
@@ -70361,9 +70326,21 @@ class Logger {
 class BaseComponent extends LitElement {
     constructor() {
         super();
-        this._ariaAttributes = {}; // tutti gli attributi aria-* passati al Web component
+        this.composeClass = clsx;
         this.logger = new Logger(this.tagName.toLowerCase());
     }
+    get _ariaAttributes() {
+        const attributes = {};
+        for (const attr of this.getAttributeNames()) {
+            if (attr === 'it-role') {
+                attributes.role = this.getAttribute(attr);
+            }
+            else if (attr.startsWith('it-aria-')) {
+                attributes[attr.replace(/^it-/, '')] = this.getAttribute(attr);
+            }
+        }
+        return attributes;
+    }
     // eslint-disable-next-line class-methods-use-this
     generateId(prefix) {
         return `${prefix}-${Math.random().toString(36).slice(2)}`;
@@ -70373,25 +70350,22 @@ class BaseComponent extends LitElement {
         // new TrackFocus(element); // per il momento è stato disattivato perchè ci sono le pseudo classi ::focus-visible per fare quello che fa TrackFocus. Si possono aggiungere regole css in bsi-italia 3 dato che stiamo facendo una breaking release di bsi.
     }
     // eslint-disable-next-line class-methods-use-this
-    composeClass(...classes) {
-        let composedClass = '';
-        classes
-            .filter((c) => c.length > 0)
-            .forEach((newClass) => {
-            composedClass += ` ${newClass}`;
-        });
-        return composedClass.trim();
-    }
-    getAriaAttributes() {
-        for (const attr of this.getAttributeNames()) {
-            if (attr.startsWith('aria-')) {
-                this._ariaAttributes[attr] = this.getAttribute(attr);
-            }
+    getActiveElement() {
+        let active = document.activeElement;
+        while (active && active.shadowRoot && active.shadowRoot.activeElement) {
+            active = active.shadowRoot.activeElement;
         }
+        return active;
+    }
+    get focusElement() {
+        return this;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    get prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     }
     connectedCallback() {
-        super.connectedCallback?.();
-        this.getAriaAttributes();
+        super.connectedCallback();
         // generate internal _id
         const prefix = this.id?.length > 0 ? this.id : this.tagName.toLowerCase();
         this._id = this.generateId(prefix);
@@ -70399,6 +70373,668 @@ class BaseComponent extends LitElement {
 }
 const BaseLocalizedComponent = LocalizeMixin(BaseComponent);
 
+//
+// We store a WeakMap of forms + controls so we can keep references to all FormControl within a given form. As
+// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is
+// added and removed from the form's set, respectively.
+//
+const formCollections = new WeakMap();
+//
+// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and
+// restore the original behavior when they disconnect.
+//
+const reportValidityOverloads = new WeakMap();
+const checkValidityOverloads = new WeakMap();
+//
+// We store a Set of controls that users have interacted with. This allows us to determine the interaction state
+// without littering the DOM with additional data attributes.
+//
+const userInteractedControls = new WeakSet();
+//
+// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.
+//
+const interactions = new WeakMap();
+/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
+class FormControlController {
+    constructor(host, options) {
+        this.submittedOnce = false;
+        this.handleFormData = (event) => {
+            // console.log('handleFormData');
+            const disabled = this.options.disabled(this.host);
+            const name = this.options.name(this.host);
+            const value = this.options.value(this.host);
+            const tagName = this.host.tagName.toLowerCase();
+            // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by
+            // injecting the name/value on a temporary button, so we can just skip them here.
+            const isButton = tagName === 'it-button';
+            if (this.host.isConnected &&
+                !disabled &&
+                !isButton &&
+                typeof name === 'string' &&
+                name.length > 0 &&
+                typeof value !== 'undefined') {
+                switch (tagName) {
+                    case 'it-radio':
+                        if (this.host.checked) {
+                            event.formData.append(name, value);
+                        }
+                        break;
+                    case 'it-checkbox':
+                        if (this.host.checked) {
+                            if (event.formData.getAll(name).indexOf(value) < 0) {
+                                // handle group checkbox
+                                event.formData.append(name, value);
+                            }
+                        }
+                        break;
+                    case 'it-checkbox-group':
+                        // non settare valori in formData, perchè ogni singola checkbox setta il suo valore
+                        break;
+                    default:
+                        if (Array.isArray(value)) {
+                            value.forEach((val) => {
+                                event.formData.append(name, val.toString());
+                            });
+                        }
+                        else {
+                            event.formData.append(name, value.toString());
+                        }
+                }
+            }
+        };
+        this.handleFormSubmit = (event) => {
+            const disabled = this.options.disabled(this.host);
+            const reportValidity = this.options.reportValidity;
+            // Update the interacted state for all controls when the form is submitted
+            if (this.form && !this.form.noValidate) {
+                formCollections.get(this.form)?.forEach((control) => {
+                    this.setUserInteracted(control, true);
+                });
+            }
+            const resReportValidity = reportValidity(this.host);
+            if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
+                event.preventDefault();
+                // event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
+                // Scroll al primo controllo non valido
+                const formControls = formCollections.get(this.form);
+                if (formControls) {
+                    for (const control of formControls) {
+                        if (!control.validity?.valid) {
+                            // Scroll smooth verso il controllo non valido
+                            control.scrollIntoView({
+                                behavior: 'smooth',
+                                block: 'center',
+                            });
+                            break;
+                        }
+                    }
+                }
+            }
+            this.submittedOnce = true;
+        };
+        this.handleFormReset = () => {
+            this.options.setValue(this.host, '');
+            this.submittedOnce = false;
+            this.setUserInteracted(this.host, false);
+            interactions.set(this.host, []);
+        };
+        this.handleInteraction = (event) => {
+            const emittedEvents = interactions.get(this.host);
+            if (!emittedEvents.includes(event.type)) {
+                emittedEvents.push(event.type);
+            }
+            // Mark it as user-interacted as soon as all associated events have been emitted
+            if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+                this.setUserInteracted(this.host, true);
+            }
+        };
+        this.checkFormValidity = () => {
+            // console.log('checkFormValidity');
+            //
+            // This is very similar to the `reportFormValidity` function, but it does not trigger native constraint validation
+            // Allow the user to simply check if the form is valid and handling validity in their own way.
+            //
+            // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
+            // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
+            // be necessary once we can use ElementInternals.
+            //
+            // Note that we're also honoring the form's novalidate attribute.
+            //
+            if (this.form && !this.form.noValidate) {
+                // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
+                // elements that support the constraint validation API.
+                const elements = this.form.querySelectorAll('*');
+                for (const element of elements) {
+                    if (typeof element.checkValidity === 'function') {
+                        if (!element.checkValidity()) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        };
+        this.reportFormValidity = () => {
+            // console.log('reportFormValidity');
+            //
+            // FormControl work hard to act like regular form controls. They support the Constraint Validation API
+            // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
+            // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
+            // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
+            //
+            // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
+            // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
+            // be necessary once we can use ElementInternals.
+            //
+            // Note that we're also honoring the form's novalidate attribute.
+            //
+            if (this.form && !this.form.noValidate) {
+                // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
+                // elements that support the constraint validation API.
+                const elements = this.form.querySelectorAll('*');
+                for (const element of elements) {
+                    if (typeof element.reportValidity === 'function') {
+                        if (!element.reportValidity()) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        };
+        (this.host = host).addController(this);
+        this.options = {
+            form: (input) => {
+                // If there's a form attribute, use it to find the target form by id
+                // Controls may not always reflect the 'form' property. For example, `<it-button>` doesn't reflect.
+                const formId = input.form;
+                if (formId) {
+                    const root = input.getRootNode();
+                    const form = root.querySelector(`#${formId}`);
+                    if (form) {
+                        return form;
+                    }
+                }
+                return input.closest('form');
+            },
+            name: (input) => input.name,
+            value: (input) => input.value,
+            disabled: (input) => input.disabled ?? false,
+            reportValidity: (input) => typeof input.reportValidity === 'function' ? input.reportValidity() : true,
+            checkValidity: (input) => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),
+            setValue: (input, value) => {
+                // eslint-disable-next-line no-param-reassign
+                input.value = value;
+            },
+            assumeInteractionOn: ['it-input'],
+            ...options,
+        };
+    }
+    hostConnected() {
+        const form = this.options.form(this.host);
+        if (form) {
+            this.attachForm(form);
+        }
+        // Listen for interactions
+        interactions.set(this.host, []);
+        this.options.assumeInteractionOn.forEach((event) => {
+            this.host.addEventListener(event, this.handleInteraction);
+        });
+    }
+    hostDisconnected() {
+        this.detachForm();
+        // Clean up interactions
+        interactions.delete(this.host);
+        this.options.assumeInteractionOn.forEach((event) => {
+            this.host.removeEventListener(event, this.handleInteraction);
+        });
+    }
+    hostUpdated() {
+        const form = this.options.form(this.host);
+        // Detach if the form no longer exists
+        if (!form) {
+            this.detachForm();
+        }
+        // If the form has changed, reattach it
+        if (form && this.form !== form) {
+            this.detachForm();
+            this.attachForm(form);
+        }
+        if (this.host.hasUpdated) {
+            this.setValidity(this.host.validity.valid);
+        }
+    }
+    attachForm(form) {
+        if (form) {
+            this.form = form;
+            // Add this element to the form's collection
+            if (formCollections.has(this.form)) {
+                formCollections.get(this.form).add(this.host);
+            }
+            else {
+                formCollections.set(this.form, new Set([this.host]));
+            }
+            this.form.addEventListener('formdata', this.handleFormData);
+            this.form.addEventListener('submit', this.handleFormSubmit);
+            this.form.addEventListener('reset', this.handleFormReset);
+            // Overload the form's reportValidity() method so it looks at FormControl
+            if (!reportValidityOverloads.has(this.form)) {
+                reportValidityOverloads.set(this.form, this.form.reportValidity);
+                this.form.reportValidity = () => this.reportFormValidity();
+            }
+            // Overload the form's checkValidity() method so it looks at FormControl
+            if (!checkValidityOverloads.has(this.form)) {
+                checkValidityOverloads.set(this.form, this.form.checkValidity);
+                this.form.checkValidity = () => this.checkFormValidity();
+            }
+        }
+        else {
+            this.form = undefined;
+        }
+    }
+    detachForm() {
+        if (!this.form)
+            return;
+        const formCollection = formCollections.get(this.form);
+        if (!formCollection) {
+            return;
+        }
+        this.submittedOnce = false;
+        // Remove this host from the form's collection
+        formCollection.delete(this.host);
+        // Check to make sure there's no other form controls in the collection. If we do this
+        // without checking if any other controls are still in the collection, then we will wipe out the
+        // validity checks for all other elements.
+        // see: https://github.com/shoelace-style/shoelace/issues/1703
+        if (formCollection.size <= 0) {
+            this.form.removeEventListener('formdata', this.handleFormData);
+            this.form.removeEventListener('submit', this.handleFormSubmit);
+            this.form.removeEventListener('reset', this.handleFormReset);
+            // Remove the overload and restore the original method
+            if (reportValidityOverloads.has(this.form)) {
+                this.form.reportValidity = reportValidityOverloads.get(this.form);
+                reportValidityOverloads.delete(this.form);
+            }
+            if (checkValidityOverloads.has(this.form)) {
+                this.form.checkValidity = checkValidityOverloads.get(this.form);
+                checkValidityOverloads.delete(this.form);
+            }
+            // So it looks weird here to not always set the form to undefined. But I _think_ if we unattach this.form here,
+            // we end up in this fun spot where future validity checks don't have a reference to the form validity handler.
+            // First form element in sets the validity handler. So we can't clean up `this.form` until there are no other form elements in the form.
+            this.form = undefined;
+        }
+    }
+    // eslint-disable-next-line class-methods-use-this
+    setUserInteracted(el, hasInteracted) {
+        if (hasInteracted) {
+            userInteractedControls.add(el);
+        }
+        else {
+            userInteractedControls.delete(el);
+        }
+        el.requestUpdate();
+    }
+    doAction(type, submitter) {
+        // console.log('doaction', type);
+        if (this.form) {
+            const button = document.createElement('button');
+            button.type = type;
+            button.style.position = 'absolute';
+            button.style.width = '0';
+            button.style.height = '0';
+            button.style.clipPath = 'inset(50%)';
+            button.style.overflow = 'hidden';
+            button.style.whiteSpace = 'nowrap';
+            // Pass name, value, and form attributes through to the temporary button
+            if (submitter) {
+                button.name = submitter.name;
+                button.value = submitter.value;
+                ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach((attr) => {
+                    if (submitter.hasAttribute(attr)) {
+                        button.setAttribute(attr, submitter.getAttribute(attr));
+                    }
+                });
+            }
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+    /** Returns the associated `<form>` element, if one exists. */
+    getForm() {
+        return this.form ?? null;
+    }
+    /** Resets the form, restoring all the control to their default value */
+    reset(submitter) {
+        this.doAction('reset', submitter);
+    }
+    /** Submits the form, triggering validation and form data injection. */
+    submit(submitter) {
+        // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+        // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+        this.doAction('submit', submitter);
+    }
+    /**
+     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+     * the host element immediately, i.e. before Lit updates the component in the next update.
+     */
+    setValidity(isValid) {
+        const host = this.host;
+        const hasInteracted = Boolean(userInteractedControls.has(host));
+        const required = Boolean(host.required);
+        //
+        // We're mapping the following "states" to data attributes. In the future, we can use ElementInternals.states to
+        // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.
+        //
+        // See this RFC for more details: https://github.com/shoelace-style/shoelace/issues/1011
+        //
+        host.toggleAttribute('data-required', required);
+        host.toggleAttribute('data-optional', !required);
+        host.toggleAttribute('data-invalid', !isValid);
+        host.toggleAttribute('data-valid', isValid);
+        host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
+        host.toggleAttribute('data-user-valid', isValid && hasInteracted);
+    }
+    userInteracted() {
+        const hasInteracted = Boolean(userInteractedControls.has(this.host));
+        return hasInteracted;
+    }
+    /**
+     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+     * that affects constraint validation changes so the component receives the correct validity states.
+     */
+    updateValidity() {
+        const host = this.host;
+        this.setValidity(host.validity.valid);
+    }
+    /**
+     * Dispatches a non-bubbling, cancelable custom event of type `it-invalid`.
+     * If the `it-invalid` event will be cancelled then the original `invalid`
+     * event (which may have been passed as argument) will also be cancelled.
+     * If no original `invalid` event has been passed then the `it-invalid`
+     * event will be cancelled before being dispatched.
+     */
+    emitInvalidEvent(originalInvalidEvent) {
+        const itInvalidEvent = new CustomEvent('it-invalid', {
+            bubbles: false,
+            composed: false,
+            cancelable: true,
+            detail: {},
+        });
+        if (!originalInvalidEvent) {
+            itInvalidEvent.preventDefault();
+        }
+        if (!this.host.dispatchEvent(itInvalidEvent)) {
+            originalInvalidEvent?.preventDefault();
+        }
+    }
+}
+
+const translation$2 = {
+    $code: 'it',
+    $name: 'Italiano',
+    $dir: 'ltr',
+    validityRequired: 'Questo campo è obbligatorio.',
+    validityGroupRequired: "Scegli almeno un'opzione",
+    validityPattern: 'Il valore non corrisponde al formato richiesto.',
+    validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.',
+    validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.',
+};
+
+registerTranslation(translation$2);
+class FormControl extends BaseLocalizedComponent {
+    constructor() {
+        super(...arguments);
+        this.formControlController = new FormControlController(this, {
+            assumeInteractionOn: ['it-input', 'it-blur', 'it-change'],
+        });
+        // TODO: verificare se serve davvero con il fatto che usiamo form-controller
+        // static formAssociated = true;
+        //   @property()
+        // internals = this.attachInternals();
+        this._touched = false;
+        /** The name of the input, submitted as a name/value pair with form data. */
+        this.name = '';
+        /** The current value of the input, submitted as a name/value pair with form data. */
+        this.value = '';
+        /** If the input is disabled. */
+        this.disabled = false;
+        /**
+         * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+         * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+         * the same document or shadow root for this to work.
+         */
+        this.form = '';
+        /** If you implement your custom validation and you won't to trigger default validation */
+        this.customValidation = false;
+        /** If your input is invalid from your custom validition, set this attribute with message validation */
+        this.validationText = '';
+        /**
+         * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+         * implied, allowing any numeric value. Only applies to date and number input types.
+         */
+        this.step = 'any';
+        /** The input's minimum length. */
+        this.minlength = -1;
+        /** The input's maximum length. */
+        this.maxlength = -1;
+        /** If the input is required. */
+        this.required = false;
+        /* For grouped input, like checkbox-group */
+        this.isInGroup = false;
+        this.validationMessage = '';
+    }
+    /** Gets the validity state object */
+    get validity() {
+        return this.inputElement?.validity;
+    }
+    /** Gets the associated form, if one exists. */
+    getForm() {
+        return this.formControlController.getForm();
+    }
+    // Form validation methods
+    checkValidity() {
+        const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
+        return inputValid;
+    }
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity() {
+        // const ret = this.inputElement.checkValidity();
+        const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
+        this.handleValidationMessages();
+        return ret; // this.inputElement.reportValidity();
+    }
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message) {
+        this.inputElement.setCustomValidity(message);
+        this.validationMessage = this.inputElement.validationMessage;
+        this.formControlController.updateValidity();
+    }
+    // Handlers
+    _handleReady() {
+        requestAnimationFrame(() => {
+            this.dispatchEvent(new CustomEvent('it-input-ready', { bubbles: true, detail: { el: this.inputElement } }));
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleInput(e) {
+        this.handleValidationMessages();
+        this.dispatchEvent(new CustomEvent('it-input', {
+            detail: { value: this.inputElement.value, el: this.inputElement },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleBlur(e) {
+        this._touched = true;
+        this.handleValidationMessages();
+        this.dispatchEvent(new FocusEvent('it-blur', { bubbles: true, composed: true }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleFocus(e) {
+        this.dispatchEvent(new FocusEvent('it-focus', { bubbles: true, composed: true }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleClick(e) {
+        this.dispatchEvent(new MouseEvent('it-click', { bubbles: true, composed: true }));
+    }
+    /*
+    Override default browser validation messages
+     */
+    handleValidationMessages() {
+        if (!this.customValidation) {
+            const _v = this.inputElement.validity;
+            const isRequiredHandledByGroup = this.isInGroup === true;
+            if (_v.valueMissing && !isRequiredHandledByGroup) {
+                this.setCustomValidity(this.$t('validityRequired'));
+            }
+            else if (_v.patternMismatch) {
+                this.setCustomValidity(this.$t('validityPattern'));
+            }
+            else if (_v.tooShort) {
+                this.setCustomValidity(this.$t('validityMinlength').replace('{minlength}', this.minlength.toString()));
+            }
+            else if (_v.tooLong) {
+                this.setCustomValidity(this.$t('validityMaxlength').replace('{maxlength}', this.maxlength.toString()));
+            }
+            else {
+                /* nothing. Usa il messaggio di errore della validazione
+                di default del browser per altri errori di validità come:
+                - typeMismatch
+                - rangeUnderflow
+                - rangeOverflow
+                - stepMismatch
+                - badInput */
+                const otherConstraintErrors = _v.typeMismatch || _v.rangeUnderflow || _v.rangeOverflow || _v.stepMismatch || _v.badInput;
+                if (!otherConstraintErrors) {
+                    this.setCustomValidity('');
+                }
+            }
+        }
+        this.validationMessage = this.inputElement.validationMessage;
+    }
+    _handleInvalid(event) {
+        this.formControlController.setValidity(false);
+        this.formControlController.emitInvalidEvent(event);
+    }
+    _handleChange(e) {
+        const target = e.target;
+        let value;
+        if (target instanceof HTMLInputElement) {
+            switch (target.type) {
+                case 'checkbox':
+                case 'radio':
+                    value = target.checked;
+                    break;
+                case 'file':
+                    value = target.files; // FileList
+                    break;
+                default:
+                    value = target.value;
+            }
+        }
+        else if (target instanceof HTMLSelectElement) {
+            if (target.multiple) {
+                value = Array.from(target.selectedOptions).map((o) => o.value);
+            }
+            else {
+                value = target.value;
+            }
+        }
+        else {
+            // textarea o altri input con value
+            value = target.value;
+        }
+        this.dispatchEvent(new CustomEvent('it-change', {
+            detail: { value, el: target },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updated(changedProperties) {
+        super.updated?.(changedProperties);
+        if (this.customValidation) {
+            this.setCustomValidity(this.validationText ?? '');
+        }
+        else if (this.formControlController.userInteracted()) {
+            this.formControlController.updateValidity();
+        }
+    }
+}
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "_touched", void 0);
+__decorate([
+    query('.it-form__control'),
+    __metadata("design:type", HTMLInputElement)
+], FormControl.prototype, "inputElement", void 0);
+__decorate([
+    property({ type: String, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: String }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "form", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'custom-validation' }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "customValidation", void 0);
+__decorate([
+    property({ attribute: 'validity-message', reflect: true }),
+    __metadata("design:type", String)
+], FormControl.prototype, "validationText", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], FormControl.prototype, "pattern", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "min", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "max", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "step", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "isInGroup", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "validationMessage", void 0);
+
 /**
  * --------------------------------------------------------------------------
  * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
@@ -70429,6 +71065,14 @@ const cookies = {
     clearAllRememberedChoices,
 };
 
+if (typeof window !== 'undefined') {
+    window._itAnalytics = window._itAnalytics || {};
+    window._itAnalytics = {
+        ...window._itAnalytics,
+        version: '1.0.0-alpha.4',
+    };
+}
+
 /* eslint-disable class-methods-use-this */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable dot-notation */
@@ -73539,8 +74183,14 @@ video::-webkit-media-text-track-display {
   min-height: 450px;
 }
 
+.acceptoverlayable {
+  aspect-ratio: 16 / 9;
+}
+
 .acceptoverlay {
   --bs-acceptoverlay-color-text: #fff;
+  --bs-form-control-label-color: #fff;
+  --bs-form-checkbox-border-color: #fff;
 }
 .acceptoverlay a {
   color: var(--bs-acceptoverlay-color-text);
@@ -73576,7 +74226,7 @@ video::-webkit-media-text-track-display {
 
 :host {
   /*
-    * Regole spostate in design-web-components/styles/index.scss
+    * Regole spostate in dev-kit-italia/styles/index.scss
   display: block;
   min-width: var(--it-videojs-default-width);
   */
@@ -73591,9 +74241,15 @@ video:not([width]) {
   width: var(--it-videojs-default-width);
   height: var(--it-videojs-default-height);
 }
-
-.vjs-fluid:not(.vjs-audio-only-mode) {
-  padding-top: 56.25%;
+.video-js .vjs-tech {
+  position: inherit !important;
+  height: auto !important;
+}
+.video-js.vjs-youtube .vjs-tech {
+  aspect-ratio: 16 / 9;
+}
+.video-js:not(.vjs-audio-only-mode).vjs-fluid, .video-js:not(.vjs-audio-only-mode).vjs-16-9, .video-js:not(.vjs-audio-only-mode).vjs-4-3, .video-js:not(.vjs-audio-only-mode).vjs-9-16, .video-js:not(.vjs-audio-only-mode).vjs-1-1, .video-js:not(.vjs-audio-only-mode).vjs-youtube {
+  height: auto;
 }`;
 
 registerTranslation(translation);
@@ -73727,26 +74383,28 @@ let ItVideo = class ItVideo extends BaseLocalizedComponent {
                 initYoutubePlugin(videojsFn);
             }
             this.initPluginsFn?.(videojsFn); // se passata una funzione di init di ulteriori plugin, la chiama.
-            this.player = videojsFn(this.videoElement, mergedOptions, function onPlayerReady() {
-                this.addClass('vjs-theme-bootstrap-italia');
-                this.addClass('vjs-big-play-centered');
-                // Aggiungi i track manualmente
-                tracks.forEach((t) => {
-                    this.addRemoteTextTrack({
-                        kind: t.kind,
-                        src: t.src,
-                        srclang: t.srclang || this.language,
-                        label: t.label,
-                        default: !!t.default,
-                    }, false);
-                });
-                if (focusPlayButton) {
-                    const playButton = this.el()?.querySelector('.vjs-big-play-button');
-                    if (playButton) {
-                        playButton.focus();
+            if (this.videoElement) {
+                this.player = videojsFn(this.videoElement, mergedOptions, function onPlayerReady() {
+                    this.addClass('vjs-theme-bootstrap-italia');
+                    this.addClass('vjs-big-play-centered');
+                    // Aggiungi i track manualmente
+                    tracks.forEach((t) => {
+                        this.addRemoteTextTrack({
+                            kind: t.kind,
+                            src: t.src,
+                            srclang: t.srclang || this.language,
+                            label: t.label,
+                            default: !!t.default,
+                        }, false);
+                    });
+                    if (focusPlayButton) {
+                        const playButton = this.el()?.querySelector('.vjs-big-play-button');
+                        if (playButton) {
+                            playButton.focus();
+                        }
                     }
-                }
-            });
+                });
+            }
         }
     }
     /*
@@ -73756,6 +74414,13 @@ let ItVideo = class ItVideo extends BaseLocalizedComponent {
         window.VIDEOJS_NO_DYNAMIC_STYLE = true; // Disabilita lo stile dinamico di Video.js
         this.initVideoPlayer();
     }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        const changedLang = changedProperties.has('language');
+        if (changedLang && this.player) {
+            this.player.language(this.language);
+        }
+    }
     render() {
         const needsCookieConsent = this.needsCookieConsent();
         return needsCookieConsent
@@ -73775,10 +74440,14 @@ let ItVideo = class ItVideo extends BaseLocalizedComponent {
                   ${this.$t('video_consent_accept')}
                 </it-button>
 
-                <div class="form-check">
-                  <input id="chk-remember" type="checkbox" @click=${() => this.acceptConsent(true)} />
-                  <label for="chk-remember">${this.$t('video_consent_remember')}</label>
-                </div>
+                <it-checkbox
+                  @click=${(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.acceptConsent(true);
+            }}
+                  ><span slot="label">${this.$t('video_consent_remember')}</span></it-checkbox
+                >
               </div>
             </div>
           </div>
@@ -73821,7 +74490,7 @@ __decorate([
     __metadata("design:type", Object)
 ], ItVideo.prototype, "options", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, attribute: 'lang', reflect: true }),
     __metadata("design:type", Object)
 ], ItVideo.prototype, "language", void 0);
 __decorate([