@vonage/vivid 5.2.0 → 5.4.0

package/bundled/attribute-binding-behaviour.js

@@ -1,27 +1,29 @@
 import { O as n, D as r } from "./vivid-element.js";
-class a {
-  constructor(i, t, s, e) {
-    this.target = i, this.binding = t, this.isBindingVolatile = s, this.attributeName = e, this.source = null, this.context = null;
+class b {
+  constructor(t, i, e, s) {
+    this.target = t, this.binding = i, this.isBindingVolatile = e, this.attributeName = s, this.source = null, this.context = null;
   }
-  bind(i, t) {
-    this.source = i, this.context = t, this.bindingObserver || (this.bindingObserver = n.binding(
-      this.binding,
+  bind(t) {
+    this.source = t.source, this.context = t.context, this.bindingObserver || (this.bindingObserver = n.binding(
+      this.binding.evaluate,
       this,
       this.isBindingVolatile
-    )), this.updateTarget(this.bindingObserver.observe(i, t));
-  }
-  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)
     );
   }
-  updateTarget(i) {
-    r.setAttribute(this.target, this.attributeName, i);
+  updateTarget(t) {
+    r.setAttribute(this.target, this.attributeName, t);
   }
 }
 export {
-  a as A
+  b as A
 };

package/bundled/base-color-picker.cjs

@@ -0,0 +1,13 @@
+"use strict";const m=require("./form-associated.cjs"),u=require("./vivid-element.cjs"),v=require("./when.cjs"),g=require("./localized.cjs"),y=require("./form-element.cjs"),S=require("./class-names.cjs");function C(o){if(!o)return null;const s=o.trim().replace(/^#/,"");return/^[0-9a-fA-F]{3}$/.test(s)?s.split("").map(a=>a+a).join("").toLowerCase():/^[0-9a-fA-F]{6}$/.test(s)?s.toLowerCase():null}function b(o){return C(o)!==null}function p(o){const s=C(o);if(!s)return 0;const a=parseInt(s.slice(0,2),16)/255,r=parseInt(s.slice(2,4),16)/255,e=parseInt(s.slice(4,6),16)/255,t=a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4),l=r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4),n=e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4);return .2126*t+.7152*l+.0722*n}function I(o,s){const a=p(o),r=p(s),e=Math.max(a,r),t=Math.min(a,r);return(e+.05)/(t+.05)}function B(o,s){return s||(s=document.querySelector(".vvd-root")||document.documentElement),getComputedStyle(s).getPropertyValue(o).trim()}var A=Object.defineProperty,_=(o,s,a,r)=>{for(var e=void 0,t=o.length-1,l;t>=0;t--)(l=o[t])&&(e=l(s,a,e)||e);return e&&A(s,a,e),e};const E=o=>{class s extends g.Localized(y.FormElement(m.FormAssociated(o))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.open=!1,this.swatches=[],this._canvasColor=""}connectedCallback(){super.connectedCallback(),this._refreshCanvasColor()}_refreshCanvasColor(){this._canvasColor=B("--vvd-color-canvas",this)}_applyContrastClass(r,e=3){return!r||!this._canvasColor?!1:I(r,this._canvasColor)<e}_getRowLength(){return 7}_handleSwatchSelection(r){this.value===r?this.value="":this.value=r,this.$emit("change"),this.open=!1}_handleColorSaving(){}_getFocusReturnEl(){return null}_returnFocusToAnchor(){const r=this._getFocusReturnEl();r&&u.Updates.enqueue(()=>r.focus())}_getGridCells(){const r=this.shadowRoot?.querySelector('[role="grid"]');return r?Array.from(r.querySelectorAll('[role="gridcell"], [data-vvd-role="gridcell"]')):[]}_handleCellKeydown(r,e,t,l){const n=this._getRowLength(),c=this._getGridCells().length,h=Math.floor(t/n),f=t%n,d=Math.ceil(c/n);switch(r.key){case"ArrowRight":return f<n-1&&t+1<c&&this._focusSwatchByIndex(t+1),!1;case"ArrowLeft":return f>0&&this._focusSwatchByIndex(t-1),!1;case"ArrowDown":return h<d-1&&t+n<c&&this._focusSwatchByIndex(t+n),!1;case"ArrowUp":return h>0&&this._focusSwatchByIndex(t-n),!1;case"PageDown":{const i=(d-1)*n,w=Math.min(i+f,c-1);return t!==w&&this._focusSwatchByIndex(w),!1}case"PageUp":{const i=Math.min(f,c-1);return t!==i&&this._focusSwatchByIndex(i),!1}case"Home":return r.ctrlKey?this._focusSwatchByIndex(0):this._focusSwatchByIndex(h*n),!1;case"End":if(r.ctrlKey)this._focusSwatchByIndex(c-1);else{const i=Math.min((h+1)*n-1,c-1);this._focusSwatchByIndex(i)}return!1;case"Enter":case" ":return l&&this._handleColorSaving(),e&&!l&&(this._handleSwatchSelection(e),this._returnFocusToAnchor()),!1;case"Escape":return this.open=!1,this._returnFocusToAnchor(),!1;case"Tab":return this.open=!1,!0;default:return!0}}_focusSwatchByIndex(r){const e=this._getGridCells();r<0||r>=e.length||e[r]?.focus()}_renderColorSwatch(r){return u.html`
+				<button
+					class="swatch ${(e,t)=>S.classNames(t.parent.value===e.value?"selected":"",t.parent._applyContrastClass(e.value)?"contrast":"")}"
+					role="gridcell"
+					style="--swatch-color: ${e=>e.value};"
+					tabindex="${(e,t)=>t.index===0?"0":"-1"}"
+					aria-label="${(e,t)=>t.parent.locale.baseColorPicker.colorSwatchLabel(e.value,e.label,t.parent.value===e.value)}"
+					@click="${(e,t)=>t.parent._handleSwatchSelection(e.value)}"
+					@keydown="${(e,t)=>t.parent._handleCellKeydown(t.event,e.value,t.index)}"
+				>
+					${v.when((e,t)=>t.parent.value===e.value,u.html`<${r} size="-6" name="check-solid" aria-hidden="true"></${r}>`)}
+				</button>
+			`}}return _([u.attr({mode:"boolean"})],s.prototype,"open"),_([u.observable],s.prototype,"swatches"),s};exports.BaseColorPicker=E;exports.isValidHexColor=b;

package/bundled/base-color-picker.js

@@ -0,0 +1,194 @@
+import { F as C } from "./form-associated.js";
+import { U as g, h as p, a as v, o as y } from "./vivid-element.js";
+import { w as S } from "./when.js";
+import { L as b } from "./localized.js";
+import { F as I } from "./form-element.js";
+import { c as B } from "./class-names.js";
+function _(o) {
+  if (!o) return null;
+  const s = o.trim().replace(/^#/, "");
+  return /^[0-9a-fA-F]{3}$/.test(s) ? s.split("").map((a) => a + a).join("").toLowerCase() : /^[0-9a-fA-F]{6}$/.test(s) ? s.toLowerCase() : null;
+}
+function P(o) {
+  return _(o) !== null;
+}
+function w(o) {
+  const s = _(o);
+  if (!s) return 0;
+  const a = parseInt(s.slice(0, 2), 16) / 255, r = parseInt(s.slice(2, 4), 16) / 255, e = parseInt(s.slice(4, 6), 16) / 255, t = a <= 0.03928 ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4), l = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4), n = e <= 0.03928 ? e / 12.92 : Math.pow((e + 0.055) / 1.055, 2.4);
+  return 0.2126 * t + 0.7152 * l + 0.0722 * n;
+}
+function A(o, s) {
+  const a = w(o), r = w(s), e = Math.max(a, r), t = Math.min(a, r);
+  return (e + 0.05) / (t + 0.05);
+}
+function $(o, s) {
+  return s || (s = document.querySelector(".vvd-root") || document.documentElement), getComputedStyle(s).getPropertyValue(o).trim();
+}
+var x = Object.defineProperty, m = (o, s, a, r) => {
+  for (var e = void 0, t = o.length - 1, l; t >= 0; t--)
+    (l = o[t]) && (e = l(s, a, e) || e);
+  return e && x(s, a, e), e;
+};
+const q = (o) => {
+  class s extends b(
+    I(C(o))
+  ) {
+    constructor() {
+      super(...arguments), this.proxy = document.createElement("input"), this.open = !1, this.swatches = [], this._canvasColor = "";
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._refreshCanvasColor();
+    }
+    /**
+     * @internal
+     */
+    _refreshCanvasColor() {
+      this._canvasColor = $("--vvd-color-canvas", this);
+    }
+    /**
+     * @internal
+     */
+    _applyContrastClass(r, e = 3) {
+      return !r || !this._canvasColor ? !1 : A(r, this._canvasColor) < e;
+    }
+    /**
+     * @internal
+     */
+    _getRowLength() {
+      return 7;
+    }
+    /**
+     * @internal
+     */
+    _handleSwatchSelection(r) {
+      this.value === r ? this.value = "" : this.value = r, this.$emit("change"), this.open = !1;
+    }
+    /**
+     * @internal
+     */
+    _handleColorSaving() {
+    }
+    /**
+     * @internal
+     */
+    _getFocusReturnEl() {
+      return null;
+    }
+    /**
+     * @internal
+     */
+    _returnFocusToAnchor() {
+      const r = this._getFocusReturnEl();
+      r && g.enqueue(() => r.focus());
+    }
+    /**
+     * @internal
+     */
+    _getGridCells() {
+      const r = this.shadowRoot?.querySelector('[role="grid"]');
+      return r ? Array.from(
+        r.querySelectorAll(
+          '[role="gridcell"], [data-vvd-role="gridcell"]'
+        )
+      ) : [];
+    }
+    /**
+     * @internal
+     */
+    _handleCellKeydown(r, e, t, l) {
+      const n = this._getRowLength(), c = this._getGridCells().length, u = Math.floor(t / n), h = t % n, f = Math.ceil(c / n);
+      switch (r.key) {
+        case "ArrowRight":
+          return h < n - 1 && t + 1 < c && this._focusSwatchByIndex(t + 1), !1;
+        case "ArrowLeft":
+          return h > 0 && this._focusSwatchByIndex(t - 1), !1;
+        case "ArrowDown":
+          return u < f - 1 && t + n < c && this._focusSwatchByIndex(t + n), !1;
+        case "ArrowUp":
+          return u > 0 && this._focusSwatchByIndex(t - n), !1;
+        case "PageDown": {
+          const i = (f - 1) * n, d = Math.min(
+            i + h,
+            c - 1
+          );
+          return t !== d && this._focusSwatchByIndex(d), !1;
+        }
+        case "PageUp": {
+          const i = Math.min(h, c - 1);
+          return t !== i && this._focusSwatchByIndex(i), !1;
+        }
+        case "Home":
+          return r.ctrlKey ? this._focusSwatchByIndex(0) : this._focusSwatchByIndex(u * n), !1;
+        case "End":
+          if (r.ctrlKey)
+            this._focusSwatchByIndex(c - 1);
+          else {
+            const i = Math.min(
+              (u + 1) * n - 1,
+              c - 1
+            );
+            this._focusSwatchByIndex(i);
+          }
+          return !1;
+        case "Enter":
+        case " ":
+          return l && this._handleColorSaving(), e && !l && (this._handleSwatchSelection(e), this._returnFocusToAnchor()), !1;
+        case "Escape":
+          return this.open = !1, this._returnFocusToAnchor(), !1;
+        case "Tab":
+          return this.open = !1, !0;
+        default:
+          return !0;
+      }
+    }
+    /**
+     * @internal
+     */
+    _focusSwatchByIndex(r) {
+      const e = this._getGridCells();
+      r < 0 || r >= e.length || e[r]?.focus();
+    }
+    /**
+     * @internal
+     */
+    _renderColorSwatch(r) {
+      return p`
+				<button
+					class="swatch ${(e, t) => B(
+        t.parent.value === e.value ? "selected" : "",
+        t.parent._applyContrastClass(e.value) ? "contrast" : ""
+      )}"
+					role="gridcell"
+					style="--swatch-color: ${(e) => e.value};"
+					tabindex="${(e, t) => t.index === 0 ? "0" : "-1"}"
+					aria-label="${(e, t) => t.parent.locale.baseColorPicker.colorSwatchLabel(
+        e.value,
+        e.label,
+        t.parent.value === e.value
+      )}"
+					@click="${(e, t) => t.parent._handleSwatchSelection(e.value)}"
+					@keydown="${(e, t) => t.parent._handleCellKeydown(
+        t.event,
+        e.value,
+        t.index
+      )}"
+				>
+					${S(
+        (e, t) => t.parent.value === e.value,
+        p`<${r} size="-6" name="check-solid" aria-hidden="true"></${r}>`
+      )}
+				</button>
+			`;
+    }
+  }
+  return m([
+    v({ mode: "boolean" })
+  ], s.prototype, "open"), m([
+    y
+  ], s.prototype, "swatches"), s;
+};
+export {
+  q as B,
+  P as i
+};

package/bundled/button.cjs

@@ -1 +1 @@
-"use strict";const c=require("./delegates-aria.cjs"),e=require("./vivid-element.cjs"),d=require("./form-associated.cjs");var l=Object.defineProperty,r=(n,t,o,p)=>{for(var s=void 0,a=n.length-1,h;a>=0;a--)(h=n[a])&&(s=h(t,o,s)||s);return s&&l(t,o,s),s};class i extends c.DelegatesAria(d.FormAssociated(e.VividElement)){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.handleClick=t=>{this.disabled&&t.stopPropagation()},this.handleSubmission=()=>{this.form&&(this.attachProxy(),this.form.requestSubmit(this.proxy),this.detachProxy())},this.handleFormReset=()=>{this.form?.reset()},this.handleUnsupportedDelegatesFocus=()=>{this.$fastController.definition.shadowOptions&&window.ShadowRoot&&!window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus")&&this.$fastController.definition.shadowOptions.delegatesFocus&&Object.defineProperty(this,"focus",{value:()=>{this.control.focus()},configurable:!0})}}formactionChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formAction=this.formaction)}formenctypeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formEnctype=this.formenctype)}formmethodChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formMethod=this.formmethod)}formnovalidateChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formNoValidate=this.formnovalidate)}formtargetChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formTarget=this.formtarget)}typeChanged(t,o){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type),o==="submit"&&this.addEventListener("click",this.handleSubmission),t==="submit"&&this.removeEventListener("click",this.handleSubmission),o==="reset"&&this.addEventListener("click",this.handleFormReset),t==="reset"&&this.removeEventListener("click",this.handleFormReset)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type",this.type),this.handleUnsupportedDelegatesFocus(),this.autofocus&&e.DOM.queueUpdate(()=>{this.focus()});const t=Array.from(this.control.children);t&&t.forEach(o=>{o.addEventListener("click",this.handleClick)})}disconnectedCallback(){super.disconnectedCallback();const t=Array.from(this.control.children);t&&t.forEach(o=>{o.removeEventListener("click",this.handleClick)})}}r([e.attr({mode:"boolean"})],i.prototype,"autofocus");r([e.attr({attribute:"form"})],i.prototype,"formId");r([e.attr],i.prototype,"formaction");r([e.attr],i.prototype,"formenctype");r([e.attr],i.prototype,"formmethod");r([e.attr({mode:"boolean"})],i.prototype,"formnovalidate");r([e.attr],i.prototype,"formtarget");r([e.attr],i.prototype,"type");exports.VividFoundationButton=i;
+"use strict";const c=require("./delegates-aria.cjs"),e=require("./vivid-element.cjs"),d=require("./form-associated.cjs");var l=Object.defineProperty,r=(n,t,o,p)=>{for(var s=void 0,a=n.length-1,h;a>=0;a--)(h=n[a])&&(s=h(t,o,s)||s);return s&&l(t,o,s),s};class i extends c.DelegatesAria(d.FormAssociated(e.VividElement)){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.handleClick=t=>{this.disabled&&t.stopPropagation()},this.handleSubmission=()=>{this.form&&(this.attachProxy(),this.form.requestSubmit(this.proxy),this.detachProxy())},this.handleFormReset=()=>{this.form?.reset()},this.handleUnsupportedDelegatesFocus=()=>{this.$fastController.definition.shadowOptions&&window.ShadowRoot&&!window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus")&&this.$fastController.definition.shadowOptions.delegatesFocus&&Object.defineProperty(this,"focus",{value:()=>{this.control.focus()},configurable:!0})}}formactionChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formAction=this.formaction)}formenctypeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formEnctype=this.formenctype)}formmethodChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formMethod=this.formmethod)}formnovalidateChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formNoValidate=this.formnovalidate)}formtargetChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.formTarget=this.formtarget)}typeChanged(t,o){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type),o==="submit"&&this.addEventListener("click",this.handleSubmission),t==="submit"&&this.removeEventListener("click",this.handleSubmission),o==="reset"&&this.addEventListener("click",this.handleFormReset),t==="reset"&&this.removeEventListener("click",this.handleFormReset)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type",this.type),this.handleUnsupportedDelegatesFocus(),this.autofocus&&e.Updates.enqueue(()=>{this.focus()});const t=Array.from(this.control.children);t&&t.forEach(o=>{o.addEventListener("click",this.handleClick)})}disconnectedCallback(){super.disconnectedCallback();const t=Array.from(this.control.children);t&&t.forEach(o=>{o.removeEventListener("click",this.handleClick)})}}r([e.attr({mode:"boolean"})],i.prototype,"autofocus");r([e.attr({attribute:"form"})],i.prototype,"formId");r([e.attr],i.prototype,"formaction");r([e.attr],i.prototype,"formenctype");r([e.attr],i.prototype,"formmethod");r([e.attr({mode:"boolean"})],i.prototype,"formnovalidate");r([e.attr],i.prototype,"formtarget");r([e.attr],i.prototype,"type");exports.VividFoundationButton=i;

package/bundled/button.js

@@ -1,5 +1,5 @@
 import { D as c } from "./delegates-aria.js";
-import { V as d, D as p, a as o } from "./vivid-element.js";
+import { V as d, U as p, a as o } from "./vivid-element.js";
 import { F as l } from "./form-associated.js";
 var f = Object.defineProperty, i = (n, t, e, m) => {
   for (var r = void 0, a = n.length - 1, h; a >= 0; a--)
@@ -58,7 +58,7 @@ class s extends c(
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.handleUnsupportedDelegatesFocus(), this.autofocus && p.queueUpdate(() => {
+    super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.handleUnsupportedDelegatesFocus(), this.autofocus && p.enqueue(() => {
       this.focus();
     });
     const t = Array.from(this.control.children);