@vonage/vivid 5.1.0 → 5.3.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}"]`
@@ -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}"]`
@@ -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/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,6 +1,6 @@
 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';
@@ -165,7 +165,7 @@ class MenuItem extends HostSemantics(AffixIcon(VividElement)) {
    */
   connectedCallback() {
     super.connectedCallback();
-    DOM.queueUpdate(() => {
+    Updates.enqueue(() => {
       this._isPresentational = this._isPresentational ?? true;
       this.#ensureRoleMatchesPresentational();
     });

package/unbundled/definition3.cjs

@@ -157,6 +157,7 @@ const expandCollapseButton = (context) => {
 };
 const TreeItemTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const treeItemTagName = context.tagFor(TreeItem, true);
   return fastElement.html` <template
 		slot="${(x) => x.isNestedItem() ? "item" : void 0}"
 		tabindex="-1"
@@ -170,7 +171,7 @@ const TreeItemTemplate = (context) => {
 		@focusout="${(x, c) => x.handleBlur(c.event)}"
 		${fastElement.children({
     property: "childItems",
-    filter: fastElement.elements(context.tagFor(TreeItem))
+    filter: fastElement.elements(treeItemTagName)
   })}
 	>
 		<div class="${getClasses}">

package/unbundled/definition3.js

@@ -155,6 +155,7 @@ const expandCollapseButton = (context) => {
 };
 const TreeItemTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
+  const treeItemTagName = context.tagFor(TreeItem, true);
   return html` <template
 		slot="${(x) => x.isNestedItem() ? "item" : void 0}"
 		tabindex="-1"
@@ -168,7 +169,7 @@ const TreeItemTemplate = (context) => {
 		@focusout="${(x, c) => x.handleBlur(c.event)}"
 		${children({
     property: "childItems",
-    filter: elements(context.tagFor(TreeItem))
+    filter: elements(treeItemTagName)
   })}
 	>
 		<div class="${getClasses}">

package/unbundled/delegates-aria.cjs

@@ -6,20 +6,35 @@ const vividElement = require('./vivid-element.cjs');
 
 class DelegateAriaBehavior {
   constructor(target, params) {
-    this.target = target;
-    this.source = null;
+    this.target = null;
+    // unbind() {
+    // 	if (this.source === null) {
+    // 		return;
+    // 	}
+    // 	this.releasePropertyBindings(this.source);
+    // 	this.stopForwardingPropertiesToTarget(this.source);
+    // 	this.source = null;
+    // }
     this.bindingBehaviours = [];
+    // private stopForwardingPropertiesToTarget(source: DelegatesAriaElement) {
+    // 	unsubscribeFromAriaPropertyChanges(
+    // 		source as AriaMixinElement,
+    // 		this.onSourceAriaPropertyChanged
+    // 	);
+    // }
     this.onSourceAriaPropertyChanged = (source, property) => {
-      if (!this.forwardedProperties.has(property)) {
+      if (!this.forwardedProperties.has(property) || property in this.boundProperties) {
         return;
       }
       this.forwardPropertyToTarget(this.target, property, source[property]);
     };
+    this.target = target;
     this.boundProperties = params.boundProperties;
     this.forwardedProperties = params.forwardedProperties;
   }
-  bind(source) {
-    this.source = source;
+  // private source: DelegatesAriaElement | null = null;
+  bind(controller) {
+    const source = controller.source;
     this.bindPropertiesToTarget(source, this.boundProperties, this.target);
     this.startForwardingPropertiesToTarget(
       source,
@@ -27,63 +42,82 @@ class DelegateAriaBehavior {
       this.target
     );
   }
-  unbind() {
-    if (this.source === null) {
-      return;
-    }
-    this.releasePropertyBindings(this.source);
-    this.stopForwardingPropertiesToTarget(this.source);
-    this.source = null;
-  }
   bindPropertiesToTarget(source, boundProperties, target) {
     for (const [property, binding] of Object.entries(boundProperties)) {
       const bindingFn = binding instanceof Function ? binding : () => binding;
       this.bindingBehaviours.push(
         new attributeBindingBehaviour.AttributeBindingBehavior(
           target,
-          bindingFn,
+          fastElement.oneWay(bindingFn),
           fastElement.Observable.isVolatileBinding(bindingFn),
           vividElement.ariaAttributeName(property)
         )
       );
     }
-    source.$fastController.addBehaviors(this.bindingBehaviours);
-  }
-  releasePropertyBindings(source) {
-    source.$fastController.removeBehaviors(this.bindingBehaviours);
-    this.bindingBehaviours = [];
+    for (const behavior of this.bindingBehaviours) {
+      behavior.bind({
+        source,
+        context: source.$fastController.context
+      });
+    }
   }
+  // private releasePropertyBindings(source: DelegatesAriaElement) {
+  // 	for (const behavior of this.bindingBehaviours) {
+  // 		(behavior as any).unbind(); // TODO: fix type
+  // 	}
+  // 	this.bindingBehaviours = [];
+  // }
   startForwardingPropertiesToTarget(source, delegatedProperties, target) {
     for (const key of delegatedProperties) {
-      this.forwardPropertyToTarget(target, key, source[key]);
+      if (!(key in this.boundProperties)) {
+        this.forwardPropertyToTarget(target, key, source[key]);
+      }
     }
-    vividElement.subscribeToAriaPropertyChanges(source, this.onSourceAriaPropertyChanged);
-  }
-  stopForwardingPropertiesToTarget(source) {
-    vividElement.unsubscribeFromAriaPropertyChanges(
+    vividElement.subscribeToAriaPropertyChanges(
       source,
       this.onSourceAriaPropertyChanged
     );
   }
   forwardPropertyToTarget(target, property, value) {
-    fastElement.DOM.setAttribute(target, vividElement.ariaAttributeName(property), value);
+    if (value === null || value === void 0 || value === false) {
+      target.removeAttribute(vividElement.ariaAttributeName(property));
+    } else {
+      target.setAttribute(vividElement.ariaAttributeName(property), String(value));
+    }
   }
 }
 
+class DelegateAriaDirective extends fastElement.StatelessAttachedAttributeDirective {
+  constructor(boundProperties, forwardedProperties) {
+    super("vvd-delegate-aria");
+    this.boundProperties = boundProperties;
+    this.forwardedProperties = forwardedProperties;
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    this.targetNodeId = "";
+  }
+  bind(controller) {
+    const targetElement = controller.targets[this.targetNodeId];
+    const behavior = new DelegateAriaBehavior(
+      targetElement,
+      // Pass the target element as target
+      {
+        boundProperties: this.boundProperties,
+        forwardedProperties: this.forwardedProperties
+      }
+    );
+    behavior.bind(controller);
+  }
+}
+fastElement.HTMLDirective.define(DelegateAriaDirective);
 function delegateAria(boundProperties = {}, options = {}) {
   const forwardedProperties = new Set(
     (options.onlySpecified ? [] : vividElement.ariaMixinProperties).filter(
       (p) => !(p in boundProperties)
     )
   );
-  return new fastElement.AttachedBehaviorHTMLDirective(
-    "vvd-delegate-aria",
-    DelegateAriaBehavior,
-    {
-      boundProperties,
-      forwardedProperties
-    }
-  );
+  return new DelegateAriaDirective(boundProperties, forwardedProperties);
 }
 const DelegatesAria = (Base) => {
   class DelegatesAriaElement extends Base {