@vonage/vivid 5.15.1 → 5.16.0

package/radio-group/index.js

@@ -1,258 +1,176 @@
-import { V as p, a as r, o as f, h, c as b, d as v } from "../bundled/vivid-element.js";
-import { R as m, a as y } from "../bundled/definition18.js";
-import { W as R, f as k } from "../bundled/mixins.js";
-import { g as u, h as c, c as B, b as x, f as O } from "../bundled/key-codes.js";
-import { O as g } from "../bundled/aria.js";
-import { d as C } from "../bundled/delegates-aria.js";
-import { w as E } from "../bundled/when.js";
-import { s as T, e as w } from "../bundled/slotted.js";
-const $ = ".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";
-var A = Object.defineProperty, s = (d, t, e, o) => {
-  for (var i = void 0, n = d.length - 1, l; n >= 0; n--)
-    (l = d[n]) && (i = l(t, e, i) || i);
-  return i && A(t, e, i), i;
+import { T as e, d as t, l as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/when.js";
+import { r as s, t as c } from "../bundled/slotted.js";
+import "../bundled/definition2.js";
+import { t as l } from "../bundled/decorate.js";
+import { t as u } from "../bundled/aria.js";
+import { a as d, i as f, n as p, r as m, t as h } from "../bundled/key-codes.js";
+import { n as g } from "../bundled/delegates-aria.js";
+import { a as _, t as v } from "../bundled/mixins.js";
+import { r as y, t as b } from "../bundled/definition17.js";
+//#region src/lib/radio-group/radio-group.scss?inline
+var x = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:8px;display:flex}.positioning-region{flex-wrap:wrap;gap:8px;display:flex}.positioning-region.vertical{flex-direction:column}fieldset{border:none;margin:0;padding:0;display:block}legend{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px;padding:0}", S = class extends v(a) {
+	constructor(...e) {
+		super(...e), this.errorValidationMessage = "", this.orientation = u.horizontal, this.slottedRadioButtons = [], this.radioErrorHandler = (e) => {
+			this.errorValidationMessage = e.target.errorValidationMessage || "";
+		}, this.radioChangeHandler = (e) => {
+			let t = e.target;
+			t.checked && (this.slottedRadioButtons?.forEach((e) => {
+				e !== t && (e.checked = !1);
+			}), this.value = t.value, this.#t(t)), e.stopPropagation();
+		}, this.moveToRadioByIndex = (e, t) => {
+			let n = e[t];
+			!this.isInsideToolbar && !n.readOnly && (n.checked = !0), n.focus();
+		}, this.moveRightOffGroup = () => {
+			this.nextElementSibling?.focus();
+		}, this.moveLeftOffGroup = () => {
+			this.previousElementSibling?.focus();
+		}, this.moveRight = (e) => {
+			let t = e.target, n = this.#e, r = 0;
+			if (r = n.indexOf(t) + 1, r === n.length && this.isInsideToolbar && e.key === "ArrowRight") {
+				this.moveRightOffGroup();
+				return;
+			}
+			r === n.length && (r = 0), this.moveToRadioByIndex(n, r);
+		}, this.moveLeft = (e) => {
+			let t = e.target, n = this.#e, r = n.indexOf(t) - 1;
+			if (this.isInsideToolbar && e.key === "ArrowLeft" && r < 0) {
+				this.moveLeftOffGroup();
+				return;
+			}
+			r = r < 0 ? n.length - 1 : r, this.moveToRadioByIndex(n, r);
+		}, this.keydownHandler = (e) => {
+			switch (e.key) {
+				case d:
+					this.checkFocusedRadio(e.target);
+					break;
+				case m:
+				case h:
+					this.moveRight(e);
+					break;
+				case p:
+				case f:
+					this.moveLeft(e);
+					break;
+				default: return !0;
+			}
+		};
+	}
+	requiredChanged() {
+		this.slottedRadioButtons?.forEach((e) => {
+			this.required ? e.required = !0 : e.required = !1;
+		});
+	}
+	readOnlyChanged() {
+		this.slottedRadioButtons?.forEach((e) => {
+			this.readOnly ? e.readOnly = !0 : e.readOnly = !1;
+		});
+	}
+	disabledChanged() {
+		this.slottedRadioButtons?.forEach((e) => {
+			this.disabled ? e.disabled = !0 : e.disabled = !1;
+		});
+	}
+	nameChanged() {
+		this.slottedRadioButtons?.forEach((e) => {
+			e.setAttribute("name", this.name);
+		});
+	}
+	valueChanged() {
+		this.slottedRadioButtons?.forEach((e) => {
+			e.value === this.value && (e.checked = !0);
+		}), this.$emit("change");
+	}
+	handleSlotChange() {
+		this.errorText && this.slottedRadioButtons?.forEach((e) => {
+			e.errorText = this.errorText;
+		});
+	}
+	errorTextChanged(e, t) {
+		t ? this.errorValidationMessage = t : this.errorValidationMessage = "";
+	}
+	get #e() {
+		return this.slottedRadioButtons?.filter((e) => !e.disabled);
+	}
+	slottedRadioButtonsChanged() {
+		this.slottedRadioButtons && this.slottedRadioButtons.length > 0 && this.setupRadioButtons();
+	}
+	get isInsideToolbar() {
+		return !!this.closest("[role=\"toolbar\"]");
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setupRadioButtons();
+	}
+	disconnectedCallback() {
+		this.slottedRadioButtons?.forEach((e) => {
+			e.removeEventListener("change", this.radioChangeHandler), e.removeEventListener("invalid", this.radioErrorHandler);
+		});
+	}
+	setupRadioButtons() {
+		let e = !1;
+		for (let t of this.slottedRadioButtons) this.name !== void 0 && t.setAttribute("name", this.name), this.disabled && (t.disabled = !0), this.readOnly && (t.readOnly = !0), this.required && (t.required = !0), this.value && this.value === t.value ? (t.checked = !0, this.#t(t), e = !0) : t.checked = !1, t.addEventListener("change", this.radioChangeHandler), t.addEventListener("invalid", this.radioErrorHandler);
+		if (this.value === void 0 && this.slottedRadioButtons?.length > 0) {
+			let t = this.slottedRadioButtons?.filter((e) => e.hasAttribute("checked"));
+			if (t.length > 0 && !e) {
+				let e = t[t.length - 1];
+				e.checked = !0, this.#t(e);
+			} else this.#t(this.slottedRadioButtons[0]);
+		}
+	}
+	focusInHandler(e) {
+		this.#t(e.target);
+	}
+	#t(e) {
+		e.setAttribute("tabindex", "0");
+		for (let t of this.slottedRadioButtons) t !== e && t.setAttribute("tabindex", "-1");
+	}
+	checkFocusedRadio(e) {
+		e.readOnly || (e.checked = !0);
+	}
 };
-class a extends R(p) {
-  constructor() {
-    super(...arguments), this.errorValidationMessage = "", this.orientation = // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    g.horizontal, this.slottedRadioButtons = [], this.radioErrorHandler = (t) => {
-      const e = t.target;
-      this.errorValidationMessage = e.errorValidationMessage || "";
-    }, this.radioChangeHandler = (t) => {
-      const e = t.target;
-      e.checked && (this.slottedRadioButtons?.forEach((o) => {
-        o !== e && (o.checked = !1);
-      }), this.value = e.value, this.#e(e)), t.stopPropagation();
-    }, this.moveToRadioByIndex = (t, e) => {
-      const o = t[e];
-      !this.isInsideToolbar && !o.readOnly && (o.checked = !0), o.focus();
-    }, this.moveRightOffGroup = () => {
-      this.nextElementSibling?.focus();
-    }, this.moveLeftOffGroup = () => {
-      this.previousElementSibling?.focus();
-    }, this.moveRight = (t) => {
-      const e = t.target, o = this.#t;
-      let i = 0;
-      if (i = o.indexOf(e) + 1, i === o.length && this.isInsideToolbar && t.key === u) {
-        this.moveRightOffGroup();
-        return;
-      }
-      i === o.length && (i = 0), this.moveToRadioByIndex(o, i);
-    }, this.moveLeft = (t) => {
-      const e = t.target, o = this.#t;
-      let i = o.indexOf(e) - 1;
-      if (this.isInsideToolbar && t.key === c && i < 0) {
-        this.moveLeftOffGroup();
-        return;
-      }
-      i = i < 0 ? o.length - 1 : i, this.moveToRadioByIndex(o, i);
-    }, this.keydownHandler = (t) => {
-      switch (t.key) {
-        case O:
-          this.checkFocusedRadio(t.target);
-          break;
-        case u:
-        case x:
-          this.moveRight(t);
-          break;
-        case c:
-        case B:
-          this.moveLeft(t);
-          break;
-        default:
-          return !0;
-      }
-    };
-  }
-  /**
-   * @internal
-   */
-  requiredChanged() {
-    this.slottedRadioButtons?.forEach((t) => {
-      this.required ? t.required = !0 : t.required = !1;
-    });
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.slottedRadioButtons?.forEach((t) => {
-      this.readOnly ? t.readOnly = !0 : t.readOnly = !1;
-    });
-  }
-  /**
-   * @internal
-   */
-  disabledChanged() {
-    this.slottedRadioButtons?.forEach((t) => {
-      this.disabled ? t.disabled = !0 : t.disabled = !1;
-    });
-  }
-  nameChanged() {
-    this.slottedRadioButtons?.forEach((t) => {
-      t.setAttribute("name", this.name);
-    });
-  }
-  /**
-   * @internal
-   */
-  valueChanged() {
-    this.slottedRadioButtons?.forEach((t) => {
-      t.value === this.value && (t.checked = !0);
-    }), this.$emit("change");
-  }
-  /**
-   * @internal
-   */
-  handleSlotChange() {
-    this.errorText && this.slottedRadioButtons?.forEach((t) => {
-      t.errorText = this.errorText;
-    });
-  }
-  /**
-   * @internal
-   */
-  errorTextChanged(t, e) {
-    e ? this.errorValidationMessage = e : this.errorValidationMessage = "";
-  }
-  get #t() {
-    return this.slottedRadioButtons?.filter((t) => !t.disabled);
-  }
-  /**
-   * @internal
-   */
-  slottedRadioButtonsChanged() {
-    this.slottedRadioButtons && this.slottedRadioButtons.length > 0 && this.setupRadioButtons();
-  }
-  get isInsideToolbar() {
-    return !!this.closest('[role="toolbar"]');
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback(), this.setupRadioButtons();
-  }
-  disconnectedCallback() {
-    this.slottedRadioButtons?.forEach((t) => {
-      t.removeEventListener(
-        "change",
-        this.radioChangeHandler
-      ), t.removeEventListener(
-        "invalid",
-        this.radioErrorHandler
-      );
-    });
-  }
-  setupRadioButtons() {
-    let t = !1;
-    for (const e of this.slottedRadioButtons)
-      this.name !== void 0 && e.setAttribute("name", this.name), this.disabled && (e.disabled = !0), this.readOnly && (e.readOnly = !0), this.required && (e.required = !0), this.value && this.value === e.value ? (e.checked = !0, this.#e(e), t = !0) : e.checked = !1, e.addEventListener(
-        "change",
-        this.radioChangeHandler
-      ), e.addEventListener(
-        "invalid",
-        this.radioErrorHandler
-      );
-    if (this.value === void 0 && this.slottedRadioButtons?.length > 0) {
-      const e = this.slottedRadioButtons?.filter(
-        (o) => o.hasAttribute("checked")
-      );
-      if (e.length > 0 && !t) {
-        const o = e[e.length - 1];
-        o.checked = !0, this.#e(o);
-      } else
-        this.#e(this.slottedRadioButtons[0]);
-    }
-  }
-  /**
-   * @internal
-   */
-  focusInHandler(t) {
-    this.#e(t.target);
-  }
-  #e(t) {
-    t.setAttribute("tabindex", "0");
-    for (const e of this.slottedRadioButtons)
-      e !== t && e.setAttribute("tabindex", "-1");
-  }
-  checkFocusedRadio(t) {
-    t.readOnly || (t.checked = !0);
-  }
-}
-s([
-  r
-], a.prototype, "label");
-s([
-  r({ attribute: "required", mode: "boolean" })
-], a.prototype, "required");
-s([
-  r({ attribute: "readonly", mode: "boolean" })
-], a.prototype, "readOnly");
-s([
-  r({ attribute: "disabled", mode: "boolean" })
-], a.prototype, "disabled");
-s([
-  r
-], a.prototype, "name");
-s([
-  r
-], a.prototype, "value");
-s([
-  f
-], a.prototype, "errorValidationMessage");
-s([
-  r({ attribute: "error-text" })
-], a.prototype, "errorText");
-s([
-  r
-], a.prototype, "orientation");
-s([
-  f
-], a.prototype, "slottedRadioButtons");
-const H = (d) => {
-  const t = d.tagFor(m, !0);
-  return h`
+//#endregion
+//#region src/lib/radio-group/index.ts
+l([n], S.prototype, "label", void 0), l([n({
+	attribute: "required",
+	mode: "boolean"
+})], S.prototype, "required", void 0), l([n({
+	attribute: "readonly",
+	mode: "boolean"
+})], S.prototype, "readOnly", void 0), l([n({
+	attribute: "disabled",
+	mode: "boolean"
+})], S.prototype, "disabled", void 0), l([n], S.prototype, "name", void 0), l([n], S.prototype, "value", void 0), l([e], S.prototype, "errorValidationMessage", void 0), l([n({ attribute: "error-text" })], S.prototype, "errorText", void 0), l([n], S.prototype, "orientation", void 0), l([e], S.prototype, "slottedRadioButtons", void 0), i(r("radio-group", S, (e) => {
+	let n = e.tagFor(y, !0);
+	return t`
 		<template
-			@keydown="${(e, o) => e.keydownHandler(o.event)}"
-			@focusin="${(e, o) => e.focusInHandler(o.event)}"
+			@keydown="${(e, t) => e.keydownHandler(t.event)}"
+			@focusin="${(e, t) => e.focusInHandler(t.event)}"
 		>
 			<div class="base">
 				<fieldset
-					${C({
-    role: "radiogroup",
-    ariaDisabled: (e) => e.disabled,
-    ariaReadOnly: (e) => e.readOnly,
-    ariaOrientation: (e) => e.orientation
-  })}
+					${g({
+		role: "radiogroup",
+		ariaDisabled: (e) => e.disabled,
+		ariaReadOnly: (e) => e.readOnly,
+		ariaOrientation: (e) => e.orientation
+	})}
 					aria-labelledby="label"
 					aria-describedby="${(e) => e._feedbackDescribedBy}"
 					aria-invalid="${(e) => e.errorText ? "true" : "false"}"
-					class="control positioning-region ${(e) => e.orientation === g.horizontal ? "horizontal" : "vertical"}"
+					class="control positioning-region ${(e) => e.orientation === u.horizontal ? "horizontal" : "vertical"}"
 				>
-					${E(
-    (e) => e.label,
-    h`<legend id="label">${(e) => e.label}</legend>`
-  )}
+					${o((e) => e.label, t`<legend id="label">${(e) => e.label}</legend>`)}
 					<slot
-						${T({
-    property: "slottedRadioButtons",
-    filter: w(t)
-  })}
+						${c({
+		property: "slottedRadioButtons",
+		filter: s(n)
+	})}
 						@slotchange="${(e) => e.handleSlotChange()}"
 					></slot>
 				</fieldset>
-				${(e) => e._getFeedbackTemplate(d)}
+				${(t) => t._getFeedbackTemplate(e)}
 			</div>
 		</template>
 	`;
-}, V = v(
-  "radio-group",
-  a,
-  H,
-  [y, k],
-  {
-    styles: $
-  }
-), I = b(V);
-I();
+}, [b, _], { styles: x }))();
+//#endregion