@vonage/vivid 5.15.1 → 5.17.0

package/unbundled/base-color-picker.js

@@ -1,296 +1,238 @@
-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';
-
+import { t as __decorate } from "./decorate.js";
+import { n as FormAssociated } from "./form-associated.js";
+import { t as FormElement } from "./form-element.js";
+import { t as Localized } from "./localized.js";
+import { Updates, attr, html, observable, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/shared/color-picker/utils.ts
 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;
+	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;
 }
+/**
+* Check if input value is valid hex color
+*/
 function isValidHexColor(input) {
-  return parseHexColor(input) !== null;
+	return parseHexColor(input) !== null;
 }
+/**
+* Calculate the relative luminance of a hex color using WCAG formula
+*/
 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;
+	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 <= .03928 ? r / 12.92 : Math.pow((r + .055) / 1.055, 2.4);
+	const sG = g <= .03928 ? g / 12.92 : Math.pow((g + .055) / 1.055, 2.4);
+	const sB = b <= .03928 ? b / 12.92 : Math.pow((b + .055) / 1.055, 2.4);
+	return .2126 * sR + .7152 * sG + .0722 * sB;
 }
+/**
+* Calculate contrast ratio between two colors
+*/
 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);
+	const lum1 = getLuminance(color1);
+	const lum2 = getLuminance(color2);
+	const brightest = Math.max(lum1, lum2);
+	const darkest = Math.min(lum1, lum2);
+	return (brightest + .05) / (darkest + .05);
 }
+/**
+* Get CSS custom property value from the document
+*/
 function getCSSCustomProperty(propertyName, element) {
-  if (!element) {
-    element = document.querySelector(".vvd-root") || document.documentElement;
-  }
-  return getComputedStyle(element).getPropertyValue(propertyName).trim();
+	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 = [];
-      this._canvasColor = "";
-    }
-    connectedCallback() {
-      super.connectedCallback();
-      requestAnimationFrame(() => {
-        this._refreshCanvasColor();
-      });
-    }
-    /**
-     * @internal
-     */
-    get _computedCanvasColor() {
-      if (!this._canvasColor) {
-        this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
-      }
-      return this._canvasColor;
-    }
-    /**
-     * @internal
-     */
-    _refreshCanvasColor() {
-      this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
-    }
-    /**
-     * @internal
-     */
-    _applyContrastClass(color, threshold = 3) {
-      if (!color) return false;
-      const canvasColor = this._computedCanvasColor;
-      if (!canvasColor) return false;
-      const ratio = getContrastRatio(color, 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
-     */
-    /* v8 ignore next */
-    _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, tooltipTag) {
-      return html`
+//#endregion
+//#region src/shared/color-picker/base-color-picker.ts
+/**
+* Base mixin for Color Picker components
+*/
+var BaseColorPicker = (Base) => {
+	class BaseColorPickerElement extends Localized(FormElement(FormAssociated(Base))) {
+		constructor(..._args) {
+			super(..._args);
+			this.proxy = document.createElement("input");
+			this.open = false;
+			this.swatches = [];
+			this._canvasColor = "";
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			requestAnimationFrame(() => {
+				this._refreshCanvasColor();
+			});
+		}
+		/**
+		* @internal
+		*/
+		get _computedCanvasColor() {
+			if (!this._canvasColor) this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
+			return this._canvasColor;
+		}
+		/**
+		* @internal
+		*/
+		_refreshCanvasColor() {
+			this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
+		}
+		/**
+		* @internal
+		*/
+		_applyContrastClass(color, threshold = 3) {
+			if (!color) return false;
+			const canvasColor = this._computedCanvasColor;
+			if (!canvasColor) return false;
+			return getContrastRatio(color, canvasColor) < 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
+		*/
+		/* v8 ignore next */
+		_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":
+					/* v8 ignore else -- @preserve */
+					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":
+					/* v8 ignore else -- @preserve */
+					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);
+					/* v8 ignore else -- @preserve */
+					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, tooltipTag) {
+			return html`
 				<${tooltipTag} placement="top" 
 					text="${(x) => x.label ?? x.value}" 
 					exportparts="vvd-theme-alternate">
 					<button
 						slot="anchor"
-						class="swatch ${(x, c) => classNames(
-        c.parent.value === x.value ? "selected" : "",
-        c.parent._applyContrastClass(x.value) ? "contrast" : ""
-      )}"
+						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
-      )}"
+						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
-      )}"
+						@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}>`
-      )}
+						${when((x, c) => c.parent.value === x.value, html`<${iconTag} size="-6" name="check-solid" aria-hidden="true"></${iconTag}>`)}
 					</button>
 				</${tooltipTag}>
 			`;
-    }
-  }
-  __decorateClass([
-    attr({ mode: "boolean" })
-  ], BaseColorPickerElement.prototype, "open");
-  __decorateClass([
-    observable
-  ], BaseColorPickerElement.prototype, "swatches");
-  __decorateClass([
-    observable
-  ], BaseColorPickerElement.prototype, "_canvasColor");
-  return BaseColorPickerElement;
+		}
+	}
+	__decorate([attr({ mode: "boolean" })], BaseColorPickerElement.prototype, "open", void 0);
+	__decorate([observable], BaseColorPickerElement.prototype, "swatches", void 0);
+	__decorate([observable], BaseColorPickerElement.prototype, "_canvasColor", void 0);
+	return BaseColorPickerElement;
 };
-
-export { BaseColorPicker as B, isValidHexColor as i };
+//#endregion
+export { isValidHexColor as n, BaseColorPicker as t };

package/unbundled/base-progress.cjs

@@ -1,79 +1,64 @@
-'use strict';
-
-const fastElement = require('@microsoft/fast-element');
-const vividElement = require('./vivid-element.cjs');
-
-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;
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+//#region src/shared/foundation/progress/base-progress.ts
+/**
+* An Progress HTML Element.
+* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+*
+* @public
+*/
+var BaseProgress = class extends require_vivid_element.VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.percentComplete = 0;
+	}
+	/**
+	* @internal
+	*/
+	valueChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) this.updatePercentComplete();
+	}
+	/**
+	* @internal
+	*/
+	minChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) this.updatePercentComplete();
+	}
+	/**
+	* @private
+	*/
+	maxChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) this.updatePercentComplete();
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.updatePercentComplete();
+	}
+	updatePercentComplete() {
+		const min = typeof this.min === "number" ? this.min : 0;
+		const max = typeof this.max === "number" ? this.max : 100;
+		const value = typeof this.value === "number" ? this.value : 0;
+		const range = max - min;
+		this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
+	}
 };
-class BaseProgress extends vividElement.VividElement {
-  constructor() {
-    super(...arguments);
-    this.percentComplete = 0;
-  }
-  /**
-   * @internal
-   */
-  valueChanged() {
-    if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
-    }
-  }
-  /**
-   * @internal
-   */
-  minChanged() {
-    if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
-    }
-  }
-  /**
-   * @private
-   */
-  maxChanged() {
-    if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
-    }
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.updatePercentComplete();
-  }
-  updatePercentComplete() {
-    const min = typeof this.min === "number" ? this.min : 0;
-    const max = typeof this.max === "number" ? this.max : 100;
-    const value = typeof this.value === "number" ? this.value : 0;
-    const range = max - min;
-    this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
-  }
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.attr({ converter: fastElement.nullableNumberConverter })
-], BaseProgress.prototype, "value");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.attr({ converter: fastElement.nullableNumberConverter })
-], BaseProgress.prototype, "min");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.attr({ converter: fastElement.nullableNumberConverter })
-], BaseProgress.prototype, "max");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], BaseProgress.prototype, "paused");
-__decorateClass([
-  fastElement.observable
-], BaseProgress.prototype, "percentComplete");
-
-exports.BaseProgress = BaseProgress;
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], BaseProgress.prototype, "value", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], BaseProgress.prototype, "min", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], BaseProgress.prototype, "max", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], BaseProgress.prototype, "paused", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], BaseProgress.prototype, "percentComplete", void 0);
+//#endregion
+Object.defineProperty(exports, "BaseProgress", {
+	enumerable: true,
+	get: function() {
+		return BaseProgress;
+	}
+});