@vonage/vivid 5.2.0 → 5.4.0

package/unbundled/base-color-picker.js

@@ -0,0 +1,275 @@
+import { Updates, when, html, attr, observable } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { F as FormAssociated } from './form-associated.js';
+import { L as Localized } from './localized.js';
+import { F as FormElement } from './form-element.js';
+
+function parseHexColor(input) {
+  if (!input) return null;
+  const hex = input.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(hex)) {
+    return hex.split("").map((char) => char + char).join("").toLowerCase();
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(hex)) {
+    return hex.toLowerCase();
+  }
+  return null;
+}
+function isValidHexColor(input) {
+  return parseHexColor(input) !== null;
+}
+function getLuminance(hexColor) {
+  const hex = parseHexColor(hexColor);
+  if (!hex) return 0;
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+  const sR = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+  const sG = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+  const sB = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+  return 0.2126 * sR + 0.7152 * sG + 0.0722 * sB;
+}
+function getContrastRatio(color1, color2) {
+  const lum1 = getLuminance(color1);
+  const lum2 = getLuminance(color2);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+function getCSSCustomProperty(propertyName, element) {
+  if (!element) {
+    element = document.querySelector(".vvd-root") || document.documentElement;
+  }
+  return getComputedStyle(element).getPropertyValue(propertyName).trim();
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const BaseColorPicker = (Base) => {
+  class BaseColorPickerElement extends Localized(
+    FormElement(FormAssociated(Base))
+  ) {
+    constructor() {
+      super(...arguments);
+      /**
+       * @internal
+       */
+      this.proxy = document.createElement("input");
+      this.open = false;
+      this.swatches = [];
+      /**
+       * @internal
+       */
+      this._canvasColor = "";
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this._refreshCanvasColor();
+    }
+    /**
+     * @internal
+     */
+    _refreshCanvasColor() {
+      this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
+    }
+    /**
+     * @internal
+     */
+    _applyContrastClass(color, threshold = 3) {
+      if (!color || !this._canvasColor) return false;
+      const ratio = getContrastRatio(color, this._canvasColor);
+      return ratio < threshold;
+    }
+    /**
+     * @internal
+     */
+    _getRowLength() {
+      return 7;
+    }
+    /**
+     * @internal
+     */
+    _handleSwatchSelection(value) {
+      if (this.value === value) {
+        this.value = "";
+      } else {
+        this.value = value;
+      }
+      this.$emit("change");
+      this.open = false;
+    }
+    /**
+     * @internal
+     */
+    _handleColorSaving() {
+    }
+    /**
+     * @internal
+     */
+    _getFocusReturnEl() {
+      return null;
+    }
+    /**
+     * @internal
+     */
+    _returnFocusToAnchor() {
+      const el = this._getFocusReturnEl();
+      if (!el) return;
+      Updates.enqueue(() => el.focus());
+    }
+    /**
+     * @internal
+     */
+    _getGridCells() {
+      const grid = this.shadowRoot?.querySelector('[role="grid"]');
+      return grid ? Array.from(
+        grid.querySelectorAll(
+          '[role="gridcell"], [data-vvd-role="gridcell"]'
+        )
+      ) : [];
+    }
+    /**
+     * @internal
+     */
+    _handleCellKeydown(event, value, index, isSaveCell) {
+      const rowLength = this._getRowLength();
+      const totalCells = this._getGridCells().length;
+      const currentRow = Math.floor(index / rowLength);
+      const currentCol = index % rowLength;
+      const totalRows = Math.ceil(totalCells / rowLength);
+      switch (event.key) {
+        case "ArrowRight":
+          if (currentCol < rowLength - 1 && index + 1 < totalCells) {
+            this._focusSwatchByIndex(index + 1);
+          }
+          return false;
+        case "ArrowLeft":
+          if (currentCol > 0) {
+            this._focusSwatchByIndex(index - 1);
+          }
+          return false;
+        case "ArrowDown":
+          if (currentRow < totalRows - 1 && index + rowLength < totalCells) {
+            this._focusSwatchByIndex(index + rowLength);
+          }
+          return false;
+        case "ArrowUp":
+          if (currentRow > 0) {
+            this._focusSwatchByIndex(index - rowLength);
+          }
+          return false;
+        case "PageDown": {
+          const lastRowStart = (totalRows - 1) * rowLength;
+          const targetIndex = Math.min(
+            lastRowStart + currentCol,
+            totalCells - 1
+          );
+          if (index !== targetIndex) {
+            this._focusSwatchByIndex(targetIndex);
+          }
+          return false;
+        }
+        case "PageUp": {
+          const targetIndex = Math.min(currentCol, totalCells - 1);
+          if (index !== targetIndex) {
+            this._focusSwatchByIndex(targetIndex);
+          }
+          return false;
+        }
+        case "Home":
+          if (event.ctrlKey) {
+            this._focusSwatchByIndex(0);
+          } else {
+            this._focusSwatchByIndex(currentRow * rowLength);
+          }
+          return false;
+        case "End":
+          if (event.ctrlKey) {
+            this._focusSwatchByIndex(totalCells - 1);
+          } else {
+            const rowEnd = Math.min(
+              (currentRow + 1) * rowLength - 1,
+              totalCells - 1
+            );
+            this._focusSwatchByIndex(rowEnd);
+          }
+          return false;
+        case "Enter":
+        case " ":
+          if (isSaveCell) {
+            this._handleColorSaving();
+          }
+          if (value && !isSaveCell) {
+            this._handleSwatchSelection(value);
+            this._returnFocusToAnchor();
+          }
+          return false;
+        case "Escape":
+          this.open = false;
+          this._returnFocusToAnchor();
+          return false;
+        case "Tab":
+          this.open = false;
+          return true;
+        default:
+          return true;
+      }
+    }
+    /**
+     * @internal
+     */
+    _focusSwatchByIndex(index) {
+      const cells = this._getGridCells();
+      if (index < 0 || index >= cells.length) return;
+      cells[index]?.focus();
+    }
+    /**
+     * @internal
+     */
+    _renderColorSwatch(iconTag) {
+      return html`
+				<button
+					class="swatch ${(x, c) => classNames(
+        c.parent.value === x.value ? "selected" : "",
+        c.parent._applyContrastClass(x.value) ? "contrast" : ""
+      )}"
+					role="gridcell"
+					style="--swatch-color: ${(x) => x.value};"
+					tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
+					aria-label="${(x, c) => c.parent.locale.baseColorPicker.colorSwatchLabel(
+        x.value,
+        x.label,
+        c.parent.value === x.value
+      )}"
+					@click="${(x, c) => c.parent._handleSwatchSelection(x.value)}"
+					@keydown="${(x, c) => c.parent._handleCellKeydown(
+        c.event,
+        x.value,
+        c.index
+      )}"
+				>
+					${when(
+        (x, c) => c.parent.value === x.value,
+        html`<${iconTag} size="-6" name="check-solid" aria-hidden="true"></${iconTag}>`
+      )}
+				</button>
+			`;
+    }
+  }
+  __decorateClass([
+    attr({ mode: "boolean" })
+  ], BaseColorPickerElement.prototype, "open");
+  __decorateClass([
+    observable
+  ], BaseColorPickerElement.prototype, "swatches");
+  return BaseColorPickerElement;
+};
+
+export { BaseColorPicker as B, isValidHexColor as i };

package/unbundled/button.cjs

@@ -120,7 +120,7 @@ class VividFoundationButton extends delegatesAria.DelegatesAria(
     this.proxy.setAttribute("type", this.type);
     this.handleUnsupportedDelegatesFocus();
     if (this.autofocus) {
-      fastElement.DOM.queueUpdate(() => {
+      fastElement.Updates.enqueue(() => {
         this.focus();
       });
     }

package/unbundled/button.js

@@ -1,4 +1,4 @@
-import { DOM, attr } from '@microsoft/fast-element';
+import { Updates, attr } from '@microsoft/fast-element';
 import { D as DelegatesAria } from './delegates-aria.js';
 import { V as VividElement } from './vivid-element.js';
 import { F as FormAssociated } from './form-associated.js';
@@ -118,7 +118,7 @@ class VividFoundationButton extends DelegatesAria(
     this.proxy.setAttribute("type", this.type);
     this.handleUnsupportedDelegatesFocus();
     if (this.autofocus) {
-      DOM.queueUpdate(() => {
+      Updates.enqueue(() => {
         this.focus();
       });
     }

package/unbundled/calendar-picker.template.cjs

@@ -226,7 +226,7 @@ const CalendarPicker = (Base) => {
     _onPickerButtonClick() {
       super._onPickerButtonClick();
       if (this._popupOpen) {
-        fastElement.DOM.processUpdates();
+        fastElement.Updates.process();
         const tabbableDate = this._tabbableDate;
         if (tabbableDate)
           this.shadowRoot.querySelector(
@@ -402,7 +402,7 @@ const CalendarPicker = (Base) => {
       }
       if (newDate && this._isDateInValidRange(newDate)) {
         if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
-          fastElement.DOM.processUpdates();
+          fastElement.Updates.process();
         }
         this._dialogEl.querySelector(
           `[data-date="${newDate}"]`
@@ -457,7 +457,7 @@ const CalendarPicker = (Base) => {
     _onMonthKeydown(month, event) {
       let newMonth = null;
       if (event.key === "ArrowUp") {
-        newMonth = addMonths(month, -4);
+        newMonth = addMonths(month, -MonthsPerRow);
       } else if (event.key === "ArrowDown") {
         newMonth = addMonths(month, MonthsPerRow);
       } else if (event.key === "ArrowLeft") {
@@ -468,7 +468,7 @@ const CalendarPicker = (Base) => {
       if (newMonth && this._isMonthInValidRange(newMonth)) {
         if (newMonth.year !== this._monthPickerYear) {
           this._monthPickerYear = newMonth.year;
-          fastElement.DOM.processUpdates();
+          fastElement.Updates.process();
         }
         this._dialogEl.querySelector(
           `[data-month="${monthToStr(newMonth)}"]`

package/unbundled/calendar-picker.template.js

@@ -1,5 +1,5 @@
 import { formatISO, format, parse, addDays as addDays$1 } from 'date-fns';
-import { observable, volatile, DOM, attr, repeat, when, html } from '@microsoft/fast-element';
+import { observable, volatile, Updates, attr, repeat, when, html } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { D as Divider } from './divider.js';
 import { B as Button } from './definition.js';
@@ -224,7 +224,7 @@ const CalendarPicker = (Base) => {
     _onPickerButtonClick() {
       super._onPickerButtonClick();
       if (this._popupOpen) {
-        DOM.processUpdates();
+        Updates.process();
         const tabbableDate = this._tabbableDate;
         if (tabbableDate)
           this.shadowRoot.querySelector(
@@ -400,7 +400,7 @@ const CalendarPicker = (Base) => {
       }
       if (newDate && this._isDateInValidRange(newDate)) {
         if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
-          DOM.processUpdates();
+          Updates.process();
         }
         this._dialogEl.querySelector(
           `[data-date="${newDate}"]`
@@ -455,7 +455,7 @@ const CalendarPicker = (Base) => {
     _onMonthKeydown(month, event) {
       let newMonth = null;
       if (event.key === "ArrowUp") {
-        newMonth = addMonths(month, -4);
+        newMonth = addMonths(month, -MonthsPerRow);
       } else if (event.key === "ArrowDown") {
         newMonth = addMonths(month, MonthsPerRow);
       } else if (event.key === "ArrowLeft") {
@@ -466,7 +466,7 @@ const CalendarPicker = (Base) => {
       if (newMonth && this._isMonthInValidRange(newMonth)) {
         if (newMonth.year !== this._monthPickerYear) {
           this._monthPickerYear = newMonth.year;
-          DOM.processUpdates();
+          Updates.process();
         }
         this._dialogEl.querySelector(
           `[data-month="${monthToStr(newMonth)}"]`

package/unbundled/definition.js

@@ -3,7 +3,7 @@ import { VwcProgressRingElement as ProgressRing, progressRingDefinition } from '
 import { d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
 import { attr, html, when, ref } from '@microsoft/fast-element';
 import { V as VividFoundationButton } from './button.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { L as Linkable } from './linkable.js';
 import { classNames } from '@microsoft/fast-web-utilities';

package/unbundled/definition2.cjs

@@ -167,7 +167,7 @@ class MenuItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.
    */
   connectedCallback() {
     super.connectedCallback();
-    fastElement.DOM.queueUpdate(() => {
+    fastElement.Updates.enqueue(() => {
       this._isPresentational = this._isPresentational ?? true;
       this.#ensureRoleMatchesPresentational();
     });

package/unbundled/definition2.js

@@ -1,9 +1,9 @@
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { V as VividElement, r as replaces, d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
-import { DOM, attr, observable, slotted, when, html, elements } from '@microsoft/fast-element';
+import { Updates, attr, observable, slotted, when, html, elements } from '@microsoft/fast-element';
 import { keySpace, keyEnter, classNames } from '@microsoft/fast-web-utilities';
 import { a as keyArrowLeft, k as keyArrowRight } from './key-codes.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 
 const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{--_menu-item-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:var(--_menu-item-padding-inline)}.base.two-lines{gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:12px;padding-inline:var(--_menu-item-padding-inline)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[checked],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size, var--vvd-typography-base)}";
@@ -165,7 +165,7 @@ class MenuItem extends HostSemantics(AffixIcon(VividElement)) {
    */
   connectedCallback() {
     super.connectedCallback();
-    DOM.queueUpdate(() => {
+    Updates.enqueue(() => {
       this._isPresentational = this._isPresentational ?? true;
       this.#ensureRoleMatchesPresentational();
     });