@vonage/vivid 4.16.2 → 4.18.0

package/shared/single-date-picker.js

@@ -0,0 +1,44 @@
+const SingleDatePickerMixin = (Base) => {
+  class SingleDatePicker extends Base {
+    /**
+     * @internal
+     */
+    valueChanged(previous, next) {
+      super.valueChanged(previous, next);
+      if (this.value) {
+        this._adjustSelectedMonthToEnsureVisibilityOf(this._dateValue());
+      }
+    }
+    /**
+     * @internal
+     */
+    _onDateClick(date) {
+      this._updateValueDueToUserInteraction(this._withUpdatedDate(date));
+    }
+    /**
+     * @internal
+     */
+    _isDateSelected(date) {
+      return date === this._dateValue();
+    }
+    /**
+     * @internal
+     */
+    _isDateAriaSelected(date) {
+      return this._isDateSelected(date);
+    }
+    /**
+     * @internal
+     */
+    _getSelectedDates() {
+      const dates = [];
+      if (this.value) {
+        dates.push(this._dateValue());
+      }
+      return dates;
+    }
+  }
+  return SingleDatePicker;
+};
+
+export { SingleDatePickerMixin as S };

package/shared/single-value-picker.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+const SingleValuePicker = (Base) => {
+  class SingleValuePickerElement extends Base {
+    /**
+     * @internal
+     */
+    valueChanged(previous, next) {
+      super.valueChanged(previous, next);
+      if (this.value) {
+        if (!this._isValidValue(this.value)) {
+          this.value = "";
+          return;
+        }
+      }
+      this._updatePresentationValue();
+    }
+    /**
+     * @internal
+     */
+    _updatePresentationValue() {
+      if (this.value) {
+        this._presentationValue = this._toPresentationValue(this.value);
+      } else {
+        this._presentationValue = "";
+      }
+    }
+    /**
+     * @internal
+     */
+    _updateValueDueToUserInteraction(newValue) {
+      this.value = newValue;
+      this.$emit("change");
+      this.$emit("input");
+    }
+    /**
+     * @internal
+     */
+    _onTextFieldChange() {
+      if (this._presentationValue === "") {
+        this._updateValueDueToUserInteraction("");
+        return;
+      }
+      try {
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue)
+        );
+      } catch (_) {
+        return;
+      }
+    }
+    /**
+     * @internal
+     */
+    _isPresentationValueInvalid() {
+      if (this._presentationValue === "") {
+        return false;
+      }
+      try {
+        this._parsePresentationValue(this._presentationValue);
+        return false;
+      } catch (_) {
+        return true;
+      }
+    }
+    /**
+     * @internal
+     */
+    _onClearClick() {
+      this._updateValueDueToUserInteraction("");
+      super._onClearClick();
+    }
+  }
+  return SingleValuePickerElement;
+};
+
+exports.SingleValuePicker = SingleValuePicker;

package/shared/single-value-picker.js

@@ -0,0 +1,75 @@
+const SingleValuePicker = (Base) => {
+  class SingleValuePickerElement extends Base {
+    /**
+     * @internal
+     */
+    valueChanged(previous, next) {
+      super.valueChanged(previous, next);
+      if (this.value) {
+        if (!this._isValidValue(this.value)) {
+          this.value = "";
+          return;
+        }
+      }
+      this._updatePresentationValue();
+    }
+    /**
+     * @internal
+     */
+    _updatePresentationValue() {
+      if (this.value) {
+        this._presentationValue = this._toPresentationValue(this.value);
+      } else {
+        this._presentationValue = "";
+      }
+    }
+    /**
+     * @internal
+     */
+    _updateValueDueToUserInteraction(newValue) {
+      this.value = newValue;
+      this.$emit("change");
+      this.$emit("input");
+    }
+    /**
+     * @internal
+     */
+    _onTextFieldChange() {
+      if (this._presentationValue === "") {
+        this._updateValueDueToUserInteraction("");
+        return;
+      }
+      try {
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue)
+        );
+      } catch (_) {
+        return;
+      }
+    }
+    /**
+     * @internal
+     */
+    _isPresentationValueInvalid() {
+      if (this._presentationValue === "") {
+        return false;
+      }
+      try {
+        this._parsePresentationValue(this._presentationValue);
+        return false;
+      } catch (_) {
+        return true;
+      }
+    }
+    /**
+     * @internal
+     */
+    _onClearClick() {
+      this._updateValueDueToUserInteraction("");
+      super._onClearClick();
+    }
+  }
+  return SingleValuePickerElement;
+};
+
+export { SingleValuePicker as S };

package/shared/slider.template.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
 const numbers = require('./numbers.cjs');
-const definition = require('./definition63.cjs');
-const vividElement = require('./vivid-element.cjs');
+const definition = require('./definition65.cjs');
+const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
-const aria = require('./aria.cjs');
 const when = require('./when.cjs');
-const classNames = require('./class-names.cjs');
+const aria = require('./aria.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 const getDecimalPlaces = (num) => {
   const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
@@ -64,7 +64,7 @@ const SliderTemplate = (context) => {
 			role="slider"
 			tabindex="${(x) => x.disabled ? null : 0}"
 			aria-label="${(x) => x.ariaLabel}"
-			aria-valuetext="${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}"
+			aria-valuetext="${(x) => x.ariaValueText || x.valueTextFormatter(x.value)}"
 			aria-valuenow="${(x) => x.value}"
 			aria-valuemin="${(x) => x.min}"
 			aria-valuemax="${(x) => x.max}"
@@ -98,7 +98,7 @@ const SliderTemplate = (context) => {
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
 				>
-					<div class="tooltip">${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}</div>
+					<div class="tooltip">${(x) => x.ariaValueText || x.valueTextFormatter(x.value)}</div>
 				</${popupTag}>`
   )}
 			</div>

package/shared/slider.template.js

@@ -1,10 +1,10 @@
 import { l as limit } from './numbers.js';
-import { P as Popup, a as PlacementStrategy } from './definition63.js';
-import { h as html } from './vivid-element.js';
+import { P as Popup, a as PlacementStrategy } from './definition65.js';
+import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
-import { O as Orientation } from './aria.js';
 import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { O as Orientation } from './aria.js';
+import { h as html } from './vivid-element.js';
 
 const getDecimalPlaces = (num) => {
   const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
@@ -62,7 +62,7 @@ const SliderTemplate = (context) => {
 			role="slider"
 			tabindex="${(x) => x.disabled ? null : 0}"
 			aria-label="${(x) => x.ariaLabel}"
-			aria-valuetext="${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}"
+			aria-valuetext="${(x) => x.ariaValueText || x.valueTextFormatter(x.value)}"
 			aria-valuenow="${(x) => x.value}"
 			aria-valuemin="${(x) => x.min}"
 			aria-valuemax="${(x) => x.max}"
@@ -96,7 +96,7 @@ const SliderTemplate = (context) => {
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
 				>
-					<div class="tooltip">${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}</div>
+					<div class="tooltip">${(x) => x.ariaValueText || x.valueTextFormatter(x.value)}</div>
 				</${popupTag}>`
   )}
 			</div>

package/shared/text-anchor.cjs

@@ -4,6 +4,7 @@ const vividElement = require('./vivid-element.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const anchor = require('./anchor.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends vividElement.VividElement {
+class TextAnchor extends delegatesAria.DelegatesAria(vividElement.VividElement) {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal

package/shared/text-anchor.js

@@ -2,6 +2,7 @@ import { V as VividElement, a as attr } from './vivid-element.js';
 import { b as AffixIcon } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { A as Anchor } from './anchor.js';
+import { D as DelegatesAria } from './delegates-aria.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -12,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends VividElement {
+class TextAnchor extends DelegatesAria(VividElement) {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal

package/shared/text-anchor.template.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 const affix = require('./affix.cjs');
-const vividElement = require('./vivid-element.cjs');
-const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
+const ref = require('./ref.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 const getClasses = ({ text, connotation, appearance }) => classNames.classNames(
   "control",
@@ -26,18 +26,16 @@ const textAnchorTemplate = (context) => {
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"
 		aria-current="${(x) => x.ariaCurrent}"
-		aria-details="${(x) => x.ariaDetails}"
 		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-errormessage="${(x) => x.ariaErrormessage}"
 		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-haspopup="${(x) => x.ariaHasPopup}"
 		aria-hidden="${(x) => x.ariaHidden}"
 		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
 		aria-label="${(x) => x.ariaLabel}"
 		aria-live="${(x) => x.ariaLive}"
 		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoledescription}"
+		aria-roledescription="${(x) => x.ariaRoleDescription}"
 		${ref.ref("control")}
 	>
 		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.text}

package/shared/text-anchor.template.js

@@ -1,7 +1,7 @@
 import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { h as html } from './vivid-element.js';
-import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
+import { r as ref } from './ref.js';
+import { h as html } from './vivid-element.js';
 
 const getClasses = ({ text, connotation, appearance }) => classNames(
   "control",
@@ -24,18 +24,16 @@ const textAnchorTemplate = (context) => {
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"
 		aria-current="${(x) => x.ariaCurrent}"
-		aria-details="${(x) => x.ariaDetails}"
 		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-errormessage="${(x) => x.ariaErrormessage}"
 		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-haspopup="${(x) => x.ariaHasPopup}"
 		aria-hidden="${(x) => x.ariaHidden}"
 		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
 		aria-label="${(x) => x.ariaLabel}"
 		aria-live="${(x) => x.ariaLive}"
 		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoledescription}"
+		aria-roledescription="${(x) => x.ariaRoleDescription}"
 		${ref("control")}
 	>
 		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.text}