@vonage/vivid 5.2.0 → 5.3.0

package/unbundled/_commonjsHelpers.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+exports.commonjsGlobal = commonjsGlobal;
+exports.getAugmentedNamespace = getAugmentedNamespace;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/unbundled/_commonjsHelpers.js

@@ -0,0 +1,32 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+export { getAugmentedNamespace as a, commonjsGlobal as c, getDefaultExportFromCjs as g };

package/unbundled/affix.cjs

@@ -58,7 +58,7 @@ const affixIconTemplateFactory = (context) => {
       return null;
     }
     const iconTemplate = fastElement.html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
-    const wrapperTag = slottedState ? "span" : "slot";
+    const wrapperTag = fastElement.html.partial(slottedState ? "span" : "slot");
     return fastElement.html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"

package/unbundled/affix.js

@@ -56,7 +56,7 @@ const affixIconTemplateFactory = (context) => {
       return null;
     }
     const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
-    const wrapperTag = slottedState ? "span" : "slot";
+    const wrapperTag = html.partial(slottedState ? "span" : "slot");
     return html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"

package/unbundled/attribute-binding-behaviour.cjs

@@ -11,23 +11,24 @@ class AttributeBindingBehavior {
     this.source = null;
     this.context = null;
   }
-  bind(source, context) {
-    this.source = source;
-    this.context = context;
+  bind(controller) {
+    this.source = controller.source;
+    this.context = controller.context;
     if (!this.bindingObserver) {
       this.bindingObserver = fastElement.Observable.binding(
-        this.binding,
+        this.binding.evaluate,
         this,
         this.isBindingVolatile
       );
     }
-    this.updateTarget(this.bindingObserver.observe(source, context));
-  }
-  unbind() {
-    this.bindingObserver.disconnect();
-    this.source = null;
-    this.context = null;
+    this.bindingObserver.observe(this.source, this.context);
+    this.updateTarget(this.bindingObserver.observe(this.source, this.context));
   }
+  // unbind() {
+  // 	this.bindingObserver!.dispose();
+  // 	this.source = null;
+  // 	this.context = null;
+  // }
   handleChange() {
     this.updateTarget(
       this.bindingObserver.observe(this.source, this.context)

package/unbundled/attribute-binding-behaviour.js

@@ -9,23 +9,24 @@ class AttributeBindingBehavior {
     this.source = null;
     this.context = null;
   }
-  bind(source, context) {
-    this.source = source;
-    this.context = context;
+  bind(controller) {
+    this.source = controller.source;
+    this.context = controller.context;
     if (!this.bindingObserver) {
       this.bindingObserver = Observable.binding(
-        this.binding,
+        this.binding.evaluate,
         this,
         this.isBindingVolatile
       );
     }
-    this.updateTarget(this.bindingObserver.observe(source, context));
-  }
-  unbind() {
-    this.bindingObserver.disconnect();
-    this.source = null;
-    this.context = null;
+    this.bindingObserver.observe(this.source, this.context);
+    this.updateTarget(this.bindingObserver.observe(this.source, this.context));
   }
+  // unbind() {
+  // 	this.bindingObserver!.dispose();
+  // 	this.source = null;
+  // 	this.context = null;
+  // }
   handleChange() {
     this.updateTarget(
       this.bindingObserver.observe(this.source, this.context)

package/unbundled/base-color-picker.cjs

@@ -0,0 +1,278 @@
+'use strict';
+
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const formAssociated = require('./form-associated.cjs');
+const localized = require('./localized.cjs');
+const formElement = require('./form-element.cjs');
+
+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.Localized(
+    formElement.FormElement(formAssociated.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;
+      fastElement.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 fastElement.html`
+				<button
+					class="swatch ${(x, c) => fastWebUtilities.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
+      )}"
+				>
+					${fastElement.when(
+        (x, c) => c.parent.value === x.value,
+        fastElement.html`<${iconTag} size="-6" name="check-solid" aria-hidden="true"></${iconTag}>`
+      )}
+				</button>
+			`;
+    }
+  }
+  __decorateClass([
+    fastElement.attr({ mode: "boolean" })
+  ], BaseColorPickerElement.prototype, "open");
+  __decorateClass([
+    fastElement.observable
+  ], BaseColorPickerElement.prototype, "swatches");
+  return BaseColorPickerElement;
+};
+
+exports.BaseColorPicker = BaseColorPicker;
+exports.isValidHexColor = isValidHexColor;