@vonage/vivid 5.15.0 → 5.16.0

package/simple-color-picker/index.js

@@ -1,141 +1,104 @@
-import { U as c, V as h, a as l, n as d, h as u, c as m, d as v } from "../bundled/vivid-element.js";
-import { P as f, p as g } from "../bundled/definition9.js";
-import { I as w, i as _ } from "../bundled/definition2.js";
-import { T as k, t as b } from "../bundled/definition11.js";
-import { A as x, a as C } from "../bundled/anchored.js";
-import { B as E } from "../bundled/base-color-picker.js";
-import { h as y } from "../bundled/index.js";
-import { r as L } from "../bundled/repeat.js";
-import { c as P } from "../bundled/class-names.js";
-const A = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;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:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::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)}";
-var z = Object.defineProperty, p = (r, e, o, i) => {
-  for (var s = void 0, t = r.length - 1, n; t >= 0; t--)
-    (n = r[t]) && (s = n(e, o, s) || s);
-  return s && z(e, o, s), s;
+import { O as e, d as t, l as n, o as r, s as i, t as a, u as o } from "../bundled/vivid-element.js";
+import { n as s } from "../bundled/repeat.js";
+import { r as c, t as l } from "../bundled/definition2.js";
+import { t as u } from "../bundled/decorate.js";
+import { t as d } from "../bundled/class-names.js";
+import { t as f } from "../bundled/dialog.js";
+import { i as p, t as m } from "../bundled/definition8.js";
+import { n as h, t as g } from "../bundled/anchored.js";
+import { n as _, r as v } from "../bundled/definition18.js";
+import { t as y } from "../bundled/base-color-picker.js";
+//#region src/lib/simple-color-picker/simple-color-picker.scss?inline
+var b = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{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);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:none;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}:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.palette{padding:var(--_color-palette-spacing,16px);gap:var(--_color-palette-gap,12px)}::part(popup-base){block-size:max-content;max-block-size:100vh;inline-size:max-content;max-inline-size:100vw;min-block-size:var(--_color-swatch-size,24px);min-inline-size:var(--_color-swatch-size,24px)}", x = class extends g(y(a)) {
+	constructor(...e) {
+		super(...e), this.placement = "top-start", this.swatchesPerRow = 7, this._closeOnClickOutside = (e) => {
+			let t = !this.contains(e.target), n = this._anchorEl?.contains(e.target);
+			/* v8 ignore else -- @preserve */
+			(t || n) && (this.open = !1);
+		}, this._closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			e.key === "Escape" && (this.open = !1);
+		};
+	}
+	openChanged(e, t) {
+		this._updateListeners(), this._anchorEl && this.#e(this._anchorEl), t && this.isConnected && requestAnimationFrame(() => {
+			if (this._refreshCanvasColor(), this.#r) {
+				let e = this.swatches.findIndex((e) => e.value === this.value), t = e >= 0 ? e : 0;
+				this._focusSwatchByIndex(t);
+			}
+			this.#r = !1;
+		});
+	}
+	_getRowLength() {
+		return this.swatchesPerRow;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._updateListeners();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._updateListeners();
+	}
+	_updateListeners() {
+		document.removeEventListener("click", this._closeOnClickOutside), document.removeEventListener("keydown", this._closeOnEscape), this.open && this.isConnected && (document.addEventListener("click", this._closeOnClickOutside), document.addEventListener("keydown", this._closeOnEscape));
+	}
+	_getFocusReturnEl() {
+		return this._anchorEl ?? null;
+	}
+	_anchorElChanged(e, t) {
+		e && this.#n(e), t && this.#t(t);
+	}
+	#e(e) {
+		e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
+	}
+	#t(e) {
+		this.#e(e), e.addEventListener("click", this.#i, !0), e.addEventListener("keydown", this.#a), e.setAttribute("aria-haspopup", "true");
+	}
+	#n(e) {
+		e.removeEventListener("click", this.#i, !0), e.removeEventListener("keydown", this.#a), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.removeAttribute("aria-haspopup");
+	}
+	#r = !1;
+	#i = () => {
+		this.open || (this.#r = !1, e.enqueue(() => this.open = !0));
+	};
+	#a = (t) => {
+		/* v8 ignore next -- @preserve */
+		(t.key === "Enter" || t.key === " ") && (this.open || (this.#r = !0, e.enqueue(() => this.open = !0)), t.preventDefault());
+	};
 };
-class a extends x(E(h)) {
-  constructor() {
-    super(...arguments), this.placement = "top-start", this.swatchesPerRow = 7, this.#e = () => {
-      this.open || c.enqueue(() => this.open = !0);
-    }, this.#t = (e) => {
-      /* v8 ignore next -- @preserve */
-      (e.key === "Enter" || e.key === " ") && (this.open || c.enqueue(() => this.open = !0), e.preventDefault());
-    }, this._closeOnClickOutside = (e) => {
-      const o = !this.contains(e.target), i = this._anchorEl?.contains(e.target);
-      /* v8 ignore else -- @preserve */
-      (o || i) && (this.open = !1);
-    }, this._closeOnEscape = (e) => {
-      /* v8 ignore else -- @preserve */
-      e.key === "Escape" && (this.open = !1);
-    };
-  }
-  /**
-   * @internal
-   */
-  openChanged(e, o) {
-    this._updateListeners(), this._anchorEl && this.#o(this._anchorEl), o && this.isConnected && requestAnimationFrame(() => {
-      this._refreshCanvasColor();
-      const i = this.swatches.findIndex(
-        (t) => t.value === this.value
-      ), s = i >= 0 ? i : 0;
-      this._focusSwatchByIndex(s);
-    });
-  }
-  /**
-   * @internal
-   */
-  _getRowLength() {
-    return this.swatchesPerRow;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._updateListeners();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._updateListeners();
-  }
-  /**
-   * @internal
-   */
-  _updateListeners() {
-    document.removeEventListener("click", this._closeOnClickOutside), document.removeEventListener("keydown", this._closeOnEscape), this.open && this.isConnected && (document.addEventListener("click", this._closeOnClickOutside), document.addEventListener("keydown", this._closeOnEscape));
-  }
-  /**
-   * @internal
-   */
-  _getFocusReturnEl() {
-    return this._anchorEl ?? null;
-  }
-  /**
-   * @internal
-   */
-  _anchorElChanged(e, o) {
-    e && this.#r(e), o && this.#s(o);
-  }
-  /**
-   * @internal
-   */
-  #o(e) {
-    e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
-  }
-  /**
-   * @internal
-   */
-  #s(e) {
-    this.#o(e), e.addEventListener("click", this.#e, !0), e.addEventListener("keydown", this.#t), e.setAttribute("aria-haspopup", "true");
-  }
-  /**
-   * @internal
-   */
-  #r(e) {
-    e.removeEventListener("click", this.#e, !0), e.removeEventListener("keydown", this.#t), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.removeAttribute("aria-haspopup");
-  }
-  #e;
-  #t;
-}
-p([
-  l({ mode: "fromView" })
-], a.prototype, "placement");
-p([
-  l({
-    attribute: "swatches-per-row",
-    mode: "fromView",
-    converter: d
-  })
-], a.prototype, "swatchesPerRow");
-const $ = (r) => P("control"), O = (r) => {
-  const e = r.tagFor(f), o = r.tagFor(w), i = r.tagFor(k), s = C();
-  return u`
-		${s}
-		<${e}
-			class="${$}"
-			:anchor="${(t) => t._anchorEl}"
-			:open="${(t) => t.open}"
-			placement="${(t) => t.placement}"
+u([n({ mode: "fromView" })], x.prototype, "placement", void 0), u([n({
+	attribute: "swatches-per-row",
+	mode: "fromView",
+	converter: o
+})], x.prototype, "swatchesPerRow", void 0);
+//#endregion
+//#region src/lib/simple-color-picker/simple-color-picker.template.ts
+var S = (e) => d("control");
+//#endregion
+//#region src/lib/simple-color-picker/index.ts
+i(r("simple-color-picker", x, (e) => {
+	let n = e.tagFor(p), r = e.tagFor(c), i = e.tagFor(v);
+	return t`
+		${h()}
+		<${n}
+			class="${S}"
+			:anchor="${(e) => e._anchorEl}"
+			:open="${(e) => e.open}"
+			placement="${(e) => e.placement}"
 			offset="4"
-			@keydown="${(t, { event: n }) => !(t.open && y(n))}"
+			@keydown="${(e, { event: t }) => !(e.open && f(t))}"
 		>
 			<div class="palette" role="grid" 
-				aria-rowcount="${(t) => Math.ceil(t.swatches.length / t._getRowLength())}"
-				aria-colcount="${(t) => t._getRowLength()}"
-				style="--swatches-per-row: ${(t) => t._getRowLength()};"
-				aria-label="${(t) => t.locale.simpleColorPicker.colorPaletteLabel}">
-				${L(
-    (t) => t.swatches,
-    (t) => t._renderColorSwatch(o, i),
-    { positioning: !0 }
-  )}
+				aria-rowcount="${(e) => Math.ceil(e.swatches.length / e._getRowLength())}"
+				aria-colcount="${(e) => e._getRowLength()}"
+				style="--swatches-per-row: ${(e) => e._getRowLength()};"
+				aria-label="${(e) => e.locale.simpleColorPicker.colorPaletteLabel}">
+				${s((e) => e.swatches, (e) => e._renderColorSwatch(r, i), { positioning: !0 })}
 			</div>
-		</${e}>
+		</${n}>
 	`;
-}, S = v(
-  "simple-color-picker",
-  a,
-  O,
-  [g, _, b],
-  {
-    styles: A
-  }
-), R = m(
-  S
-);
-R();
+}, [
+	m,
+	l,
+	_
+], { styles: b }))();
+//#endregion