@italia/video 0.1.0-alpha.2 → 1.0.0-alpha.5

package/dist/src/it-video.js

@@ -543,8 +543,12 @@ function requireDomElement () {
 
 	DOMElement.prototype.removeAttributeNS =
 	    function _Element_removeAttributeNS(namespace, name) {
+	        // Prevent prototype pollution by checking if namespace is a direct property
+	        if (!Object.prototype.hasOwnProperty.call(this._attributes, namespace)) {
+	            return;
+	        }
 	        var attributes = this._attributes[namespace];
-	        if (attributes) {
+	        if (attributes && Object.prototype.hasOwnProperty.call(attributes, name)) {
 	            delete attributes[name];
 	        }
 	    };
@@ -7175,6 +7179,9 @@ function requireDom () {
 		}
 		do{
 			newFirst.parentNode = parent;
+			// Update ownerDocument for each node being inserted
+			var targetDoc = parent.ownerDocument || parent;
+			_updateOwnerDocument(newFirst, targetDoc);
 		}while(newFirst !== newLast && (newFirst= newFirst.nextSibling))
 		_onUpdateChild(parent.ownerDocument||parent, parent);
 		//console.log(parent.lastChild.nextSibling == null)
@@ -7184,6 +7191,37 @@ function requireDom () {
 		return node;
 	}
 
+	/**
+	 * Recursively updates the ownerDocument property for a node and all its descendants
+	 * @param {Node} node
+	 * @param {Document} newOwnerDocument
+	 * @private
+	 */
+	function _updateOwnerDocument(node, newOwnerDocument) {
+		if (node.ownerDocument === newOwnerDocument) {
+			return;
+		}
+		
+		node.ownerDocument = newOwnerDocument;
+		
+		// Update attributes if this is an element
+		if (node.nodeType === ELEMENT_NODE && node.attributes) {
+			for (var i = 0; i < node.attributes.length; i++) {
+				var attr = node.attributes.item(i);
+				if (attr) {
+					attr.ownerDocument = newOwnerDocument;
+				}
+			}
+		}
+		
+		// Recursively update child nodes
+		var child = node.firstChild;
+		while (child) {
+			_updateOwnerDocument(child, newOwnerDocument);
+			child = child.nextSibling;
+		}
+	}
+
 	/**
 	 * Appends `newChild` to `parentNode`.
 	 * If `newChild` is already connected to a `parentNode` it is first removed from it.
@@ -7209,6 +7247,11 @@ function requireDom () {
 		}
 		parentNode.lastChild = newChild;
 		_onUpdateChild(parentNode.ownerDocument, parentNode, newChild);
+		
+		// Update ownerDocument for the new child and all its descendants
+		var targetDoc = parentNode.ownerDocument || parentNode;
+		_updateOwnerDocument(newChild, targetDoc);
+		
 		return newChild;
 	}
 
@@ -7237,7 +7280,7 @@ function requireDom () {
 				return newChild;
 			}
 			_insertBefore(this, newChild, refChild);
-			newChild.ownerDocument = this;
+			_updateOwnerDocument(newChild, this);
 			if (this.documentElement === null && newChild.nodeType === ELEMENT_NODE) {
 				this.documentElement = newChild;
 			}
@@ -7253,7 +7296,7 @@ function requireDom () {
 		replaceChild: function (newChild, oldChild) {
 			//raises
 			_insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
-			newChild.ownerDocument = this;
+			_updateOwnerDocument(newChild, this);
 			if (oldChild) {
 				this.removeChild(oldChild);
 			}
@@ -8033,7 +8076,7 @@ var hasRequiredEntities;
 function requireEntities () {
 	if (hasRequiredEntities) return entities;
 	hasRequiredEntities = 1;
-	(function (exports) {
+	(function (exports$1) {
 
 		var freeze = requireConventions().freeze;
 
@@ -8044,7 +8087,7 @@ function requireEntities () {
 		 * @see https://www.w3.org/TR/2008/REC-xml-20081126/#sec-predefined-ent W3C XML 1.0
 		 * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Predefined_entities_in_XML Wikipedia
 		 */
-		exports.XML_ENTITIES = freeze({
+		exports$1.XML_ENTITIES = freeze({
 			amp: '&',
 			apos: "'",
 			gt: '>',
@@ -8066,7 +8109,7 @@ function requireEntities () {
 		 * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML Wikipedia (HTML)
 		 * @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Entities_representing_special_characters_in_XHTML Wikpedia (XHTML)
 		 */
-		exports.HTML_ENTITIES = freeze({
+		exports$1.HTML_ENTITIES = freeze({
 			Aacute: '\u00C1',
 			aacute: '\u00E1',
 			Abreve: '\u0102',
@@ -10198,7 +10241,7 @@ function requireEntities () {
 		 * @deprecated use `HTML_ENTITIES` instead
 		 * @see HTML_ENTITIES
 		 */
-		exports.entityMap = exports.HTML_ENTITIES; 
+		exports$1.entityMap = exports$1.HTML_ENTITIES; 
 	} (entities));
 	return entities;
 }
@@ -70397,6 +70440,7 @@ 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);
@@ -70418,6 +70462,17 @@ class FormControlController {
                             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) => {
@@ -70439,13 +70494,30 @@ class FormControlController {
                     this.setUserInteracted(control, true);
                 });
             }
-            if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+            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, []);
         };
@@ -70610,6 +70682,7 @@ class FormControlController {
         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
@@ -70706,6 +70779,10 @@ class FormControlController {
         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.
@@ -70742,6 +70819,7 @@ const translation$2 = {
     $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.',
@@ -70786,24 +70864,27 @@ class FormControl extends BaseLocalizedComponent {
         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;
     }
-    /** Gets the associated form, if one exists. */
-    getForm() {
-        return this.formControlController.getForm();
-    }
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity() {
-        const ret = this.inputElement.checkValidity();
+        // 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();
     }
@@ -70848,7 +70929,8 @@ class FormControl extends BaseLocalizedComponent {
     handleValidationMessages() {
         if (!this.customValidation) {
             const _v = this.inputElement.validity;
-            if (_v.valueMissing) {
+            const isRequiredHandledByGroup = this.isInGroup === true;
+            if (_v.valueMissing && !isRequiredHandledByGroup) {
                 this.setCustomValidity(this.$t('validityRequired'));
             }
             else if (_v.patternMismatch) {
@@ -70919,7 +71001,7 @@ class FormControl extends BaseLocalizedComponent {
         if (this.customValidation) {
             this.setCustomValidity(this.validationText ?? '');
         }
-        else {
+        else if (this.formControlController.userInteracted()) {
             this.formControlController.updateValidity();
         }
     }
@@ -70987,6 +71069,10 @@ __decorate([
     ,
     __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)
@@ -71022,6 +71108,14 @@ const cookies = {
     clearAllRememberedChoices,
 };
 
+if (typeof window !== 'undefined') {
+    window._itAnalytics = window._itAnalytics || {};
+    window._itAnalytics = {
+        ...window._itAnalytics,
+        version: '1.0.0-alpha.5',
+    };
+}
+
 /* eslint-disable class-methods-use-this */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable dot-notation */
@@ -73951,14 +74045,14 @@ video::-webkit-media-text-track-display {
 
 /* stylelint-enable */
 .vjs-theme-bootstrap-italia {
-  --bs-videoplayer-button-background: var(--bs-color-background-primary);
-  --bs-videoplayer-control-background: var(--bs-color-background-primary);
+  --bsi-videoplayer-button-background: var(--bsi-color-background-primary);
+  --bsi-videoplayer-control-background: var(--bsi-color-background-primary);
 }
 .vjs-theme-bootstrap-italia .vjs-big-play-button, .vjs-theme-bootstrap-italia:hover .vjs-big-play-button, .vjs-theme-bootstrap-italia.vjs-big-play-button:focus {
-  background-color: var(--bs-videoplayer-button-background);
+  background-color: var(--bsi-videoplayer-button-background);
 }
 .vjs-theme-bootstrap-italia .vjs-control-bar {
-  background-color: var(--bs-videoplayer-control-background);
+  background-color: var(--bsi-videoplayer-control-background);
   font-size: 1rem;
 }
 @media (min-width: 992px) {
@@ -74006,18 +74100,21 @@ video::-webkit-media-text-track-display {
   }
 }
 .acceptoverlay {
-  --bs-acceptoverlay-color-background: var(--bs-color-background-inverse);
-  --bs-acceptoverlay-color-text: var(--bs-color-text);
-  --bs-acceptoverlay-label-color: var(--bs-color-text-secondary);
-  --bs-acceptoverlay-label-border-color: var(--bs-color-border-subtle);
-  --bs-acceptoverlay-opacity: 0.9;
-  --bs-acceptoverlay-spacing-inset: var(--bs-spacing-s);
-  --bs-acceptoverlay-primary-opacity: 0.95;
-  --bs-acceptoverlay-inner-width: 600px;
-  --bs-acceptoverlay-icon-spacing: var(--bs-spacing-s);
-  --bs-acceptoverlay-icon-fill: var(--bs-icon-primary);
-  --bs-acceptoverlay-buttons-spacing: var(--bs-spacing-s);
-  --bs-acceptoverlay-buttons-last-child-margin-top: ;
+  --bsi-acceptoverlay-color-background: var(--bsi-color-background-inverse);
+  --bsi-acceptoverlay-color-text: var(--bsi-color-text);
+  --bsi-acceptoverlay-label-color: var(--bsi-color-text-secondary);
+  --bsi-acceptoverlay-label-border-color: var(--bsi-color-border-subtle);
+  --bsi-acceptoverlay-opacity: 0.9;
+  --bsi-acceptoverlay-spacing-inset: var(--bsi-spacing-s);
+  --bsi-acceptoverlay-primary-opacity: 0.95;
+  --bsi-acceptoverlay-inner-width: 600px;
+  --bsi-acceptoverlay-icon-spacing: var(--bsi-spacing-s);
+  --bsi-acceptoverlay-icon-fill: var(--bsi-icon-primary);
+  --bsi-acceptoverlay-buttons-spacing: var(--bsi-spacing-s);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.acceptoverlay {
   position: absolute;
   top: 0;
   right: 0;
@@ -74028,13 +74125,13 @@ video::-webkit-media-text-track-display {
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: center;
-  padding: var(--bs-acceptoverlay-spacing-inset);
-  opacity: var(--bs-acceptoverlay-opacity);
-  background-color: var(--bs-acceptoverlay-background-color);
+  padding: var(--bsi-acceptoverlay-spacing-inset);
+  opacity: var(--bsi-acceptoverlay-opacity);
+  background-color: var(--bsi-acceptoverlay-background-color);
 }
 @media (min-width: 768px) {
   .acceptoverlay {
-    --bs-acceptoverlay-spacing-inset: var(--bs-spacing-m);
+    --bsi-acceptoverlay-spacing-inset: var(--bsi-spacing-m);
   }
 }
 @media (min-width: 992px) {
@@ -74043,19 +74140,19 @@ video::-webkit-media-text-track-display {
   }
 }
 .acceptoverlay label {
-  color: var(--bs-acceptoverlay-label-color);
+  color: var(--bsi-acceptoverlay-label-color);
 }
 .acceptoverlay label::after {
-  border-color: var(--bs-acceptoverlay-label-border-color) !important;
+  border-color: var(--bsi-acceptoverlay-label-border-color) !important;
 }
 .acceptoverlay[aria-hidden=true] {
   display: none;
 }
 .acceptoverlay.acceptoverlay-primary {
-  --bs-acceptoverlay-background-color: var(--bs-color-background-primary);
+  --bsi-acceptoverlay-background-color: var(--bsi-color-background-primary);
 }
 .acceptoverlay.acceptoverlay-primary.show {
-  opacity: var(--bs-acceptoverlay-primary-opacity);
+  opacity: var(--bsi-acceptoverlay-primary-opacity);
 }
 .acceptoverlay h1,
 .acceptoverlay h2,
@@ -74065,7 +74162,7 @@ video::-webkit-media-text-track-display {
 .acceptoverlay h6,
 .acceptoverlay p {
   margin-bottom: 0;
-  color: var(--bs-acceptoverlay-color-text);
+  color: var(--bsi-acceptoverlay-color-text);
 }
 .acceptoverlay h4 {
   text-align: center;
@@ -74075,19 +74172,19 @@ video::-webkit-media-text-track-display {
 }
 .acceptoverlay .acceptoverlay-inner {
   width: 100%;
-  max-width: var(--bs-acceptoverlay-inner-width);
+  max-width: var(--bsi-acceptoverlay-inner-width);
 }
 .acceptoverlay .acceptoverlay-icon {
-  margin-bottom: var(--bs-acceptoverlay-icon-spacing);
+  margin-bottom: var(--bsi-acceptoverlay-icon-spacing);
   text-align: center;
 }
 @media (min-width: 768px) {
   .acceptoverlay .acceptoverlay-icon {
-    --bs-acceptoverlay-icon-margin-bottom: var(--it-spacing-12x);
+    --bsi-acceptoverlay-icon-margin-bottom: var(--bsi-spacing-xxl);
   }
 }
 .acceptoverlay .acceptoverlay-icon .icon {
-  fill: var(--bs-acceptoverlay-icon-fill);
+  fill: var(--bsi-acceptoverlay-icon-fill);
 }
 .acceptoverlay .acceptoverlay-buttons {
   display: flex;
@@ -74095,14 +74192,14 @@ video::-webkit-media-text-track-display {
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-top: var(--bs-acceptoverlay-buttons-spacing);
+  margin-top: var(--bsi-acceptoverlay-buttons-spacing);
   background-color: transparent !important;
 }
 .acceptoverlay .acceptoverlay-buttons button {
   width: 100%;
 }
 .acceptoverlay .acceptoverlay-buttons button:last-child {
-  --bs-acceptoverlay-buttons-spacing: var(--bs-spacing-xxs);
+  --bsi-acceptoverlay-buttons-spacing: var(--bsi-spacing-xxs);
 }
 .acceptoverlay .acceptoverlay-buttons.single-button button {
   margin-top: 0;
@@ -74117,7 +74214,7 @@ video::-webkit-media-text-track-display {
     margin-top: 0 !important;
   }
   .acceptoverlay-buttons button:last-child {
-    margin-left: var(--bs-spacing-m);
+    margin-left: var(--bsi-spacing-m);
   }
   .acceptoverlay-buttons.single-button button {
     width: auto;
@@ -74132,24 +74229,30 @@ video::-webkit-media-text-track-display {
   min-height: 450px;
 }
 
+.acceptoverlayable {
+  aspect-ratio: 16 / 9;
+}
+
 .acceptoverlay {
-  --bs-acceptoverlay-color-text: #fff;
+  --bsi-acceptoverlay-color-text: #fff;
+  --bsi-form-control-label-color: #fff;
+  --bsi-form-checkbox-border-color: #fff;
 }
 .acceptoverlay a {
-  color: var(--bs-acceptoverlay-color-text);
+  color: var(--bsi-acceptoverlay-color-text);
 }
 .acceptoverlay .bg-dark it-button::part(primary) {
-  --bs-btn-text-color: var(--bs-color-background-primary);
-  --bs-btn-background: var(--bs-color-background-inverse);
+  --bsi-btn-text-color: var(--bsi-color-background-primary);
+  --bsi-btn-background: var(--bsi-color-background-inverse);
 }
 .acceptoverlay .bg-dark it-button::part(primary):hover {
-  --bs-btn-text-color: var(--bs-color-text);
+  --bsi-btn-text-color: var(--bsi-color-text);
 }
 .acceptoverlay .acceptoverlay-buttons it-button {
   width: 100%;
 }
 .acceptoverlay .acceptoverlay-buttons it-button:last-child {
-  --bs-acceptoverlay-buttons-spacing: var(--bs-spacing-xxs);
+  --bsi-acceptoverlay-buttons-spacing: var(--bsi-spacing-xxs);
 }
 @media (min-width: 768px) {
   .acceptoverlay .acceptoverlay-buttons {
@@ -74159,7 +74262,7 @@ video::-webkit-media-text-track-display {
     width: 50%;
   }
   .acceptoverlay .acceptoverlay-buttons it-button:last-child {
-    margin-left: var(--bs-spacing-m);
+    margin-left: var(--bsi-spacing-m);
   }
   .acceptoverlay .acceptoverlay-buttons.single-button it-button {
     width: auto;
@@ -74184,9 +74287,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);
@@ -74320,26 +74429,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();
+                        }
                     }
-                }
-            });
+                });
+            }
         }
     }
     /*
@@ -74375,10 +74486,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>