@vonage/vivid 4.31.0 → 5.1.0

package/simple-color-picker/definition.cjs

@@ -0,0 +1,398 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const popup_definition = require('../unbundled/definition4.cjs');
+const icon_definition = require('../icon/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const anchored = require('../unbundled/anchored.cjs');
+const formAssociated = require('../unbundled/form-associated.cjs');
+const localized = require('../unbundled/localized.cjs');
+const formElement = require('../unbundled/form-element.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const index = require('../unbundled/index.cjs');
+
+const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{display:grid;padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px);grid-template-columns:repeat(var(--swatches-per-row, 7),1fr)}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;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;--focus-inset: -3px}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
+
+function parseHexColor(input) {
+  if (!input) return null;
+  const hex = input.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{6}$/.test(hex)) return hex.toLowerCase();
+  return 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;
+};
+class SimpleColorPicker extends localized.Localized(
+  anchored.Anchored(formElement.FormElement(formAssociated.FormAssociated(vividElement.VividElement)))
+) {
+  constructor() {
+    super(...arguments);
+    /**
+     * @internal
+     */
+    this.proxy = document.createElement("input");
+    this.open = false;
+    this.placement = "top-start";
+    this.swatches = [];
+    this.swatchesPerRow = 7;
+    /**
+     * @internal
+     */
+    this._canvasColor = "";
+    /**
+     * @internal
+     */
+    this.#openPopup = () => {
+      if (!this.open) fastElement.DOM.queueUpdate(() => this.open = true);
+    };
+    /**
+     * @internal
+     */
+    this.#handleAnchorKeydown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        if (!this.open) {
+          fastElement.DOM.queueUpdate(() => this.open = true);
+        }
+        event.preventDefault();
+      }
+    };
+    /**
+     * @internal
+     */
+    this.#closeOnClickOutside = (e) => {
+      const clickedOutside = !this.contains(e.target);
+      const clickedOnAnchor = this._anchorEl?.contains(e.target);
+      if (clickedOutside || clickedOnAnchor) this.open = false;
+    };
+    /**
+     * @internal
+     */
+    this.#closeOnEscape = (e) => {
+      if (e.key === "Escape") {
+        this.open = false;
+      }
+    };
+    /**
+     * @internal
+     */
+    this._handleSwatchSelection = (swatch) => {
+      if (this.value === swatch.value) {
+        this.value = "";
+      } else {
+        this.value = swatch.value;
+      }
+      this.$emit("change");
+      this.open = false;
+    };
+    /**
+     * @internal
+     */
+    this._handleSwatchKeydown = (event, swatch, index) => {
+      const rowLength = this.swatchesPerRow;
+      const totalCells = this.swatches.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 " ":
+          this._handleSwatchSelection(swatch);
+          this.#returnFocusToAnchor();
+          return false;
+        case "Escape":
+          this.open = false;
+          this.#returnFocusToAnchor();
+          return false;
+        case "Tab":
+          this.open = false;
+          return true;
+        default:
+          return true;
+      }
+    };
+  }
+  /**
+   * @internal
+   */
+  openChanged() {
+    this.#updateListeners();
+    if (this._anchorEl) {
+      this.#updateAnchor(this._anchorEl);
+    }
+    if (this.open) {
+      this._refreshCanvasColor();
+      requestAnimationFrame(() => {
+        const selectedIndex = this.swatches.findIndex(
+          (swatch) => swatch.value === this.value
+        );
+        const targetIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        this.#focusSwatchByIndex(targetIndex);
+      });
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateListeners();
+    this._refreshCanvasColor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#updateListeners();
+  }
+  /**
+   * @internal
+   */
+  #updateListeners() {
+    document.removeEventListener("click", this.#closeOnClickOutside);
+    document.removeEventListener("keydown", this.#closeOnEscape);
+    if (this.open && this.isConnected) {
+      document.addEventListener("click", this.#closeOnClickOutside);
+      document.addEventListener("keydown", this.#closeOnEscape);
+    }
+  }
+  /**
+   * @internal
+   */
+  _refreshCanvasColor() {
+    this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
+  }
+  /**
+   * @internal
+   */
+  _applyContrastClass(swatchColor, threshold = 3) {
+    if (!swatchColor || !this._canvasColor) return false;
+    const ratio = getContrastRatio(swatchColor, this._canvasColor);
+    return ratio < threshold;
+  }
+  /**
+   * @internal
+   */
+  _anchorElChanged(oldValue, newValue) {
+    if (oldValue) this.#cleanupAnchor(oldValue);
+    if (newValue) this.#setupAnchor(newValue);
+  }
+  /**
+   * @internal
+   */
+  #updateAnchor(a) {
+    a.setAttribute("aria-expanded", this.open.toString());
+    a.setAttribute("data-expanded", this.open.toString());
+  }
+  /**
+   * @internal
+   */
+  #setupAnchor(a) {
+    this.#updateAnchor(a);
+    a.addEventListener("click", this.#openPopup, true);
+    a.addEventListener("keydown", this.#handleAnchorKeydown);
+    a.setAttribute("aria-haspopup", "true");
+  }
+  /**
+   * @internal
+   */
+  #cleanupAnchor(a) {
+    a.removeEventListener("click", this.#openPopup, true);
+    a.removeEventListener("keydown", this.#handleAnchorKeydown);
+    a.removeAttribute("aria-expanded");
+    a.removeAttribute("data-expanded");
+    a.removeAttribute("aria-haspopup");
+  }
+  #openPopup;
+  #handleAnchorKeydown;
+  #closeOnClickOutside;
+  #closeOnEscape;
+  /**
+   * @internal
+   */
+  #focusSwatchByIndex(index) {
+    if (index < 0 || index >= this.swatches.length) return;
+    const element = this.shadowRoot?.querySelectorAll('[role="gridcell"]')?.[index];
+    element?.focus();
+  }
+  /**
+   * @internal
+   */
+  #returnFocusToAnchor() {
+    fastElement.DOM.queueUpdate(() => this._anchorEl?.focus());
+  }
+}
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], SimpleColorPicker.prototype, "open");
+__decorateClass([
+  fastElement.attr({ mode: "fromView" })
+], SimpleColorPicker.prototype, "placement");
+__decorateClass([
+  fastElement.observable
+], SimpleColorPicker.prototype, "swatches");
+__decorateClass([
+  fastElement.attr({
+    attribute: "swatches-per-row",
+    mode: "fromView",
+    converter: fastElement.nullableNumberConverter
+  })
+], SimpleColorPicker.prototype, "swatchesPerRow");
+
+const getClasses = (_) => fastWebUtilities.classNames("control");
+const SimpleColorPickerTemplate = (context) => {
+  const popupTag = context.tagFor(popup_definition.Popup);
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
+  return fastElement.html`
+		${anchorSlotTemplate}
+		<${popupTag}
+			class="${getClasses}"
+			:anchor="${(x) => x._anchorEl}"
+			:open="${(x) => x.open}"
+			placement="${(x) => x.placement}"
+			offset="4"
+			@keydown="${(x, { event }) => {
+    if (x.open && index.handleEscapeKeyAndStopPropogation(event)) {
+      return false;
+    }
+    return true;
+  }}"
+		>
+			<div class="palette" role="grid" 
+				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x.swatchesPerRow)}"
+				aria-colcount="${(x) => x.swatchesPerRow}"
+				style="--swatches-per-row: ${(x) => x.swatchesPerRow};" 
+				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
+				${fastElement.repeat(
+    (x) => x.swatches,
+    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.simpleColorPicker.colorSwatchLabel(
+      x.value,
+      x.label,
+      c.parent.value === x.value
+    )}"
+							@click="${(x, c) => c.parent._handleSwatchSelection(x)}"
+							@keydown="${(x, c) => c.parent._handleSwatchKeydown(
+      c.event,
+      x,
+      c.index
+    )}"
+						>
+							${fastElement.when(
+      (x, c) => c.parent.value === x.value,
+      fastElement.html`<${iconTag} size="-6" name="check-solid" aria-hidden="true"></${iconTag}>`
+    )}
+						</button>
+					`,
+    { positioning: true }
+  )}
+			</div>
+		</${popupTag}>
+	`;
+};
+
+const simpleColorPickerDefinition = vividElement.defineVividComponent(
+  "simple-color-picker",
+  SimpleColorPicker,
+  SimpleColorPickerTemplate,
+  [popup_definition.popupDefinition, icon_definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerSimpleColorPicker = vividElement.createRegisterFunction(
+  simpleColorPickerDefinition
+);
+
+exports.VwcSimpleColorPickerElement = SimpleColorPicker;
+exports.registerSimpleColorPicker = registerSimpleColorPicker;
+exports.simpleColorPickerDefinition = simpleColorPickerDefinition;