@vonage/vivid 4.14.0 → 4.14.1

package/shared/definition40.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
-const formAssociated = require('./form-associated.cjs');
 const vividElement = require('./vivid-element.cjs');
+const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -15,7 +14,45 @@ class FormAssociatedRadio extends formAssociated.CheckableFormAssociated(_Radio)
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
+    this.#validateValueMissingWithSiblings = () => {
+      const siblings = this.#radioSiblings;
+      if (siblings && siblings.length > 1) {
+        const isSiblingChecked = siblings.some((x) => x.checked);
+        if (isSiblingChecked) {
+          this.setValidity({ valueMissing: false });
+        }
+      }
+    };
+    this.#syncSiblingsRequiredValidationStatus = () => {
+      if (this.elementInternals && !this.validity.valueMissing) {
+        const siblings = this.#radioSiblings;
+        if (siblings && siblings.length > 1) {
+          siblings.forEach((x) => {
+            x.elementInternals.setValidity({ valueMissing: false });
+          });
+        }
+      }
+    };
+    this.validate = (anchor) => {
+      super.validate(anchor);
+      if (this.validity.valueMissing) {
+        this.#validateValueMissingWithSiblings();
+      } else {
+        this.#syncSiblingsRequiredValidationStatus();
+      }
+    };
   }
+  get #radioSiblings() {
+    const siblings = this.parentElement?.querySelectorAll(
+      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
+    );
+    if (siblings) {
+      return Array.from(siblings);
+    }
+    return [];
+  }
+  #validateValueMissingWithSiblings;
+  #syncSiblingsRequiredValidationStatus;
 }
 
 var __defProp = Object.defineProperty;
@@ -53,6 +90,7 @@ class Radio extends FormAssociatedRadio {
       return true;
     };
     this.proxy.setAttribute("type", "radio");
+    this.proxy.setAttribute("name", this.name);
   }
   // Map to proxy element
   /**
@@ -74,12 +112,22 @@ class Radio extends FormAssociatedRadio {
       }
     }
   }
+  /**
+   * @internal
+   */
+  nameChanged(previous, next) {
+    if (super.nameChanged) {
+      super.nameChanged(previous, next);
+    }
+    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
+    vividElement.DOM.queueUpdate(this.validate);
+  }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    this.validate();
+    vividElement.DOM.queueUpdate(this.validate);
     if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -110,22 +158,22 @@ class Radio extends FormAssociatedRadio {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], Radio.prototype, "ariaLabel");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Radio.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Radio.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], Radio.prototype, "readOnly");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.attr
 ], Radio.prototype, "name");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Radio.prototype, "defaultSlottedNodes");
 
 const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
@@ -135,7 +183,7 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.
   ["readonly", Boolean(readOnly)],
   ["disabled", Boolean(disabled)]
 );
-const RadioTemplate = defineVividComponent.html`<template
+const RadioTemplate = vividElement.html`<template
 	role="${(x) => x.ariaLabel ? "presentation" : null}"
 >
 	<div
@@ -151,12 +199,12 @@ const RadioTemplate = defineVividComponent.html`<template
 		<div class="control"></div>
 		${when.when(
   (x) => x.label,
-  defineVividComponent.html`<label class="label">${(x) => x.label}</label>`
+  vividElement.html`<label class="label">${(x) => x.label}</label>`
 )}
 	</div>
 </template>`;
 
-const radioDefinition = defineVividComponent.defineVividComponent(
+const radioDefinition = vividElement.defineVividComponent(
   "radio",
   Radio,
   RadioTemplate,
@@ -165,7 +213,7 @@ const radioDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerRadio = defineVividComponent.createRegisterFunction(radioDefinition);
+const registerRadio = vividElement.createRegisterFunction(radioDefinition);
 
 exports.Radio = Radio;
 exports.radioDefinition = radioDefinition;

package/shared/definition40.js

@@ -1,6 +1,5 @@
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, D as DOM, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { a as keySpace } from './key-codes.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
@@ -13,7 +12,45 @@ class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
+    this.#validateValueMissingWithSiblings = () => {
+      const siblings = this.#radioSiblings;
+      if (siblings && siblings.length > 1) {
+        const isSiblingChecked = siblings.some((x) => x.checked);
+        if (isSiblingChecked) {
+          this.setValidity({ valueMissing: false });
+        }
+      }
+    };
+    this.#syncSiblingsRequiredValidationStatus = () => {
+      if (this.elementInternals && !this.validity.valueMissing) {
+        const siblings = this.#radioSiblings;
+        if (siblings && siblings.length > 1) {
+          siblings.forEach((x) => {
+            x.elementInternals.setValidity({ valueMissing: false });
+          });
+        }
+      }
+    };
+    this.validate = (anchor) => {
+      super.validate(anchor);
+      if (this.validity.valueMissing) {
+        this.#validateValueMissingWithSiblings();
+      } else {
+        this.#syncSiblingsRequiredValidationStatus();
+      }
+    };
+  }
+  get #radioSiblings() {
+    const siblings = this.parentElement?.querySelectorAll(
+      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
+    );
+    if (siblings) {
+      return Array.from(siblings);
+    }
+    return [];
   }
+  #validateValueMissingWithSiblings;
+  #syncSiblingsRequiredValidationStatus;
 }
 
 var __defProp = Object.defineProperty;
@@ -51,6 +88,7 @@ class Radio extends FormAssociatedRadio {
       return true;
     };
     this.proxy.setAttribute("type", "radio");
+    this.proxy.setAttribute("name", this.name);
   }
   // Map to proxy element
   /**
@@ -72,12 +110,22 @@ class Radio extends FormAssociatedRadio {
       }
     }
   }
+  /**
+   * @internal
+   */
+  nameChanged(previous, next) {
+    if (super.nameChanged) {
+      super.nameChanged(previous, next);
+    }
+    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
+    DOM.queueUpdate(this.validate);
+  }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    this.validate();
+    DOM.queueUpdate(this.validate);
     if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -120,7 +168,7 @@ __decorateClass([
   attr({ attribute: "readonly", mode: "boolean" })
 ], Radio.prototype, "readOnly");
 __decorateClass([
-  observable
+  attr
 ], Radio.prototype, "name");
 __decorateClass([
   observable

package/shared/definition41.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
 const definition = require('./definition63.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const slider_template = require('./slider.template.cjs');
 const aria = require('./aria.cjs');
 const numbers = require('./numbers.cjs');
@@ -460,70 +459,70 @@ unregisterDragListeners_fn = function() {
 _onDragMove = new WeakMap();
 _onDragEnd = new WeakMap();
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "start", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView", attribute: "start" })
+  vividElement.attr({ mode: "fromView", attribute: "start" })
 ], RangeSlider.prototype, "initialStart", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "current-start" })
+  vividElement.attr({ attribute: "current-start" })
 ], RangeSlider.prototype, "currentStart", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "end", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView", attribute: "end" })
+  vividElement.attr({ mode: "fromView", attribute: "end" })
 ], RangeSlider.prototype, "initialEnd", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "current-end" })
+  vividElement.attr({ attribute: "current-end" })
 ], RangeSlider.prototype, "currentEnd", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], RangeSlider.prototype, "min", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], RangeSlider.prototype, "max", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], RangeSlider.prototype, "step", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RangeSlider.prototype, "orientation", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-start-label" })
+  vividElement.attr({ attribute: "aria-start-label" })
 ], RangeSlider.prototype, "ariaStartLabel", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-end-label" })
+  vividElement.attr({ attribute: "aria-end-label" })
 ], RangeSlider.prototype, "ariaEndLabel", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], RangeSlider.prototype, "markers", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RangeSlider.prototype, "connotation", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], RangeSlider.prototype, "pin", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "valueTextFormatter", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_draggingThumb", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_visiblyFocusedThumb", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_hoveredThumb", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_startThumbCss", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_endThumbCss", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_selectedRangeCss", 2);
 RangeSlider = __decorateClass([
   formElements.formElements
@@ -541,7 +540,7 @@ const getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => classNames.c
 ]);
 const RangeSliderTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
-  return defineVividComponent.html` <template
+  return vividElement.html` <template
 		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 	>
 		<div class="${getClasses} ${(x) => x.orientation}">
@@ -550,7 +549,7 @@ const RangeSliderTemplate = (context) => {
 					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
 					${when.when(
     (x) => x.markers,
-    defineVividComponent.html`${(x) => slider_template.getMarkersTemplate(
+    vividElement.html`${(x) => slider_template.getMarkersTemplate(
       x.orientation === aria.Orientation.horizontal,
       Math.floor((x.max - x.min) / x.step)
     )}`
@@ -572,7 +571,7 @@ const RangeSliderTemplate = (context) => {
 				></div>
 				${when.when(
     (x) => x.pin,
-    defineVividComponent.html`<${popupTag}
+    vividElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
@@ -602,7 +601,7 @@ const RangeSliderTemplate = (context) => {
 				></div>
 				${when.when(
     (x) => x.pin,
-    defineVividComponent.html`<${popupTag}
+    vividElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
@@ -621,7 +620,7 @@ const RangeSliderTemplate = (context) => {
 	</template>`;
 };
 
-const rangeSliderDefinition = defineVividComponent.defineVividComponent(
+const rangeSliderDefinition = vividElement.defineVividComponent(
   "range-slider",
   RangeSlider,
   RangeSliderTemplate,
@@ -633,7 +632,7 @@ const rangeSliderDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerRangeSlider = defineVividComponent.createRegisterFunction(
+const registerRangeSlider = vividElement.createRegisterFunction(
   rangeSliderDefinition
 );
 

package/shared/definition41.js

@@ -1,9 +1,8 @@
 import { P as Popup, a as PlacementStrategy, p as popupDefinition } from './definition63.js';
-import { o as observable, a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, o as observable, a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, e as keyArrowUp, h as keyArrowLeft, f as keyArrowDown, i as keyArrowRight } from './key-codes.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { i as inverseLerp, l as lerp, r as roundToStepValue, g as getMarkersTemplate } from './slider.template.js';
 import { O as Orientation } from './aria.js';
 import { l as limit } from './numbers.js';