@vonage/vivid 4.13.0 → 4.14.1

package/shared/definition39.js

@@ -1,9 +1,11 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
-import { B as BaseProgress } from './base-progress.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { R as Radio, r as radioDefinition } from './definition40.js';
+import { i as keyArrowRight, h as keyArrowLeft, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
+import { O as Orientation } from './aria.js';
+import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
 
-const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
+const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,71 +16,273 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Progress extends BaseProgress {
+class RadioGroup extends VividElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.reverse = false;
+    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    Orientation.horizontal;
+    this.slottedRadioButtons = [];
+    this.radioChangeHandler = (e) => {
+      const changedRadio = e.target;
+      if (changedRadio.checked) {
+        this.slottedRadioButtons.forEach((radio) => {
+          if (radio !== changedRadio) {
+            radio.checked = false;
+          }
+        });
+        this.value = changedRadio.value;
+        this.#setTabRovingTarget(changedRadio);
+      }
+      e.stopPropagation();
+    };
+    this.moveToRadioByIndex = (group, index) => {
+      const radio = group[index];
+      if (!this.isInsideToolbar && !radio.readOnly) {
+        radio.checked = true;
+      }
+      radio.focus();
+    };
+    this.moveRightOffGroup = () => {
+      this.nextElementSibling?.focus();
+    };
+    this.moveLeftOffGroup = () => {
+      this.previousElementSibling?.focus();
+    };
+    this.moveRight = (e) => {
+      const radio = e.target;
+      const group = this.#focusableRadioButtons;
+      let index = 0;
+      index = group.indexOf(radio) + 1;
+      if (index === group.length && this.isInsideToolbar && e.key === keyArrowRight) {
+        this.moveRightOffGroup();
+        return;
+      }
+      if (index === group.length) {
+        index = 0;
+      }
+      this.moveToRadioByIndex(group, index);
+    };
+    this.moveLeft = (e) => {
+      const radio = e.target;
+      const group = this.#focusableRadioButtons;
+      let index = group.indexOf(radio) - 1;
+      if (this.isInsideToolbar && e.key === keyArrowLeft && index < 0) {
+        this.moveLeftOffGroup();
+        return;
+      }
+      index = index < 0 ? group.length - 1 : index;
+      this.moveToRadioByIndex(group, index);
+    };
+    /**
+     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+     * navigation is different when there is an ancestor with role='toolbar'
+     *
+     * @internal
+     */
+    this.keydownHandler = (e) => {
+      switch (e.key) {
+        case keyEnter:
+          this.checkFocusedRadio(e.target);
+          break;
+        case keyArrowRight:
+        case keyArrowDown:
+          this.moveRight(e);
+          break;
+        case keyArrowLeft:
+        case keyArrowUp:
+          this.moveLeft(e);
+          break;
+        default:
+          return true;
+      }
+    };
+  }
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    this.slottedRadioButtons.forEach((radio) => {
+      if (this.readOnly) {
+        radio.readOnly = true;
+      } else {
+        radio.readOnly = false;
+      }
+    });
+  }
+  /**
+   * @internal
+   */
+  disabledChanged() {
+    this.slottedRadioButtons.forEach((radio) => {
+      if (this.disabled) {
+        radio.disabled = true;
+      } else {
+        radio.disabled = false;
+      }
+    });
+  }
+  nameChanged() {
+    this.slottedRadioButtons.forEach((radio) => {
+      radio.setAttribute("name", this.name);
+    });
+  }
+  /**
+   * @internal
+   */
+  valueChanged() {
+    this.slottedRadioButtons.forEach((radio) => {
+      if (radio.value === this.value) {
+        radio.checked = true;
+      }
+    });
+    this.$emit("change");
+  }
+  get #focusableRadioButtons() {
+    return this.slottedRadioButtons.filter((radio) => !radio.disabled);
+  }
+  /**
+   * @internal
+   */
+  slottedRadioButtonsChanged() {
+    if (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((radio) => {
+      radio.removeEventListener(
+        "change",
+        this.radioChangeHandler
+      );
+    });
+  }
+  setupRadioButtons() {
+    let foundMatchingVal = false;
+    for (const radio of this.slottedRadioButtons) {
+      if (this.name !== void 0) {
+        radio.setAttribute("name", this.name);
+      }
+      if (this.disabled) {
+        radio.disabled = true;
+      }
+      if (this.readOnly) {
+        radio.readOnly = true;
+      }
+      if (this.value && this.value === radio.value) {
+        radio.checked = true;
+        this.#setTabRovingTarget(radio);
+        foundMatchingVal = true;
+      } else {
+        radio.checked = false;
+      }
+      radio.addEventListener(
+        "change",
+        this.radioChangeHandler
+      );
+    }
+    if (this.value === void 0 && this.slottedRadioButtons.length > 0) {
+      const checkedRadios = this.slottedRadioButtons.filter(
+        (radio) => radio.hasAttribute("checked")
+      );
+      if (checkedRadios.length > 0 && !foundMatchingVal) {
+        const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
+        lastCheckedRadio.checked = true;
+        this.#setTabRovingTarget(lastCheckedRadio);
+      } else {
+        this.#setTabRovingTarget(this.slottedRadioButtons[0]);
+      }
+    }
+  }
+  /**
+   * @internal
+   */
+  focusInHandler(e) {
+    this.#setTabRovingTarget(e.target);
+  }
+  #setTabRovingTarget(radio) {
+    radio.setAttribute("tabindex", "0");
+    for (const slottedRadio of this.slottedRadioButtons) {
+      if (slottedRadio !== radio) {
+        slottedRadio.setAttribute("tabindex", "-1");
+      }
+    }
+  }
+  checkFocusedRadio(target) {
+    if (!target.readOnly) {
+      target.checked = true;
+    }
   }
 }
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], Progress.prototype, "ariaLabel");
+  attr
+], RadioGroup.prototype, "label");
+__decorateClass([
+  attr({ attribute: "readonly", mode: "boolean" })
+], RadioGroup.prototype, "readOnly");
+__decorateClass([
+  attr({ attribute: "disabled", mode: "boolean" })
+], RadioGroup.prototype, "disabled");
 __decorateClass([
-  attr()
-], Progress.prototype, "shape");
+  attr
+], RadioGroup.prototype, "name");
 __decorateClass([
-  attr()
-], Progress.prototype, "connotation");
+  attr
+], RadioGroup.prototype, "value");
 __decorateClass([
-  attr({ mode: "boolean" })
-], Progress.prototype, "reverse");
+  attr
+], RadioGroup.prototype, "orientation");
+__decorateClass([
+  observable
+], RadioGroup.prototype, "slottedRadioButtons");
 
-const getClasses = ({ connotation, shape, reverse, paused }) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["reverse", Boolean(reverse)],
-  ["paused", Boolean(paused)]
-);
-function determinate() {
-  return html` <span
-		class="determinate"
-		style="width: ${(x) => x.percentComplete}%"
-	></span>`;
-}
-function indeterminate() {
-  return html` <span class="indeterminate" name="indeterminate">
-		<span class="indicator-1"></span>
-		<span class="indicator-2"></span>
-	</span>`;
-}
-const ProgressTemplate = (_) => {
-  return html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
-		<div
-			role="progressbar"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-valuenow="${(x) => x.value}"
-			aria-valuemin="${(x) => x.min}"
-			aria-valuemax="${(x) => x.max}"
-			class="${getClasses}"
+const RadioGroupTemplate = (context) => {
+  return html`
+		<template
+			role="radiogroup"
+			aria-disabled="${(x) => x.disabled}"
+			aria-readonly="${(x) => x.readOnly}"
+			aria-orientation="${(x) => x.orientation}"
+			@keydown="${(x, c) => x.keydownHandler(c.event)}"
+			@focusin="${(x, c) => x.focusInHandler(c.event)}"
 		>
-			<div class="progress">
-				${when((x) => typeof x.value === "number", determinate())}
-				${when((x) => typeof x.value !== "number", indeterminate())}
+			${when(
+    (x) => x.label,
+    html`<label>${(x) => x.label}</label>`
+  )}
+
+			<div
+				class="positioning-region ${(x) => x.orientation === Orientation.horizontal ? "horizontal" : "vertical"}"
+			>
+				<slot
+					${slotted({
+    property: "slottedRadioButtons",
+    filter: elements(context.tagFor(Radio))
+  })}
+				></slot>
 			</div>
-		</div>
-	</template>`;
+		</template>
+	`;
 };
 
-const progressDefinition = Progress.compose(
+const radioGroupDefinition = defineVividComponent(
+  "radio-group",
+  RadioGroup,
+  RadioGroupTemplate,
+  [radioDefinition],
   {
-    baseName: "progress",
-    template: ProgressTemplate,
     styles
   }
 );
-const progressRegistries = [progressDefinition()];
-const registerProgress = registerFactory(progressRegistries);
+const registerRadioGroup = createRegisterFunction(radioGroupDefinition);
 
-export { progressRegistries as a, progressDefinition as p, registerProgress as r };
+export { registerRadioGroup as a, radioGroupDefinition as r };

package/shared/definition4.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition$1 = require('./definition11.cjs');
-const definition = require('./definition63.cjs');
+const definition = require('./definition62.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition$2 = require('./definition27.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
-const index$1 = require('./index2.cjs');
-const localized = require('./localized.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const index = require('./index.cjs');
+const localized = require('./localized.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -31,7 +31,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [enums.Connotation.Announcement, "sparkles-line"],
   [enums.Connotation.Alert, "error-line"]
 ]);
-class Alert extends index.FoundationElement {
+class Alert extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
@@ -40,7 +40,7 @@ class Alert extends index.FoundationElement {
     this.timeoutms = 0;
     this.open = false;
     this.#closeOnEscape = (e) => {
-      if (this.open && this.removable && index$1.handleEscapeKeyAndStopPropogation(e)) {
+      if (this.open && this.removable && index.handleEscapeKeyAndStopPropogation(e)) {
         this.open = false;
       }
     };
@@ -105,37 +105,37 @@ class Alert extends index.FoundationElement {
   #onTransitionEnd;
 }
 __decorateClass([
-  index.attr({ attribute: "dismiss-button-aria-label" })
+  vividElement.attr({ attribute: "dismiss-button-aria-label" })
 ], Alert.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Alert.prototype, "removable");
 __decorateClass([
-  index.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], Alert.prototype, "placement");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Alert.prototype, "headline");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Alert.prototype, "text");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Alert.prototype, "icon");
 __decorateClass([
-  index.attr({
+  vividElement.attr({
     mode: "fromView",
-    converter: index.nullableNumberConverter
+    converter: vividElement.nullableNumberConverter
   })
 ], Alert.prototype, "timeoutms");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Alert.prototype, "connotation");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Alert.prototype, "strategy");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Alert.prototype, "open");
 applyMixins.applyMixins(Alert, affix.AffixIcon);
 applyMixins.applyMixins(Alert, localized.Localized);
@@ -149,10 +149,10 @@ const getControlClasses = ({ open, placement, strategy }) => classNames.classNam
 );
 function renderIcon(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
+  return vividElement.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
 }
 function renderDismissButton(buttonTag) {
-  return index.html`
+  return vividElement.html`
 		<${buttonTag}
 			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
 			size="condensed"
@@ -164,7 +164,7 @@ function renderDismissButton(buttonTag) {
 const AlertTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   const buttonTag = context.tagFor(definition$1.Button);
-  return index.html`
+  return vividElement.html`
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div
 			class="${getControlClasses}"
@@ -176,9 +176,9 @@ const AlertTemplate = (context) => {
 				<div class="alert-text">
 					${when.when(
     (x) => x.headline,
-    index.html`<header class="headline">${(x) => x.headline}</header>`
+    vividElement.html`<header class="headline">${(x) => x.headline}</header>`
   )}
-					${when.when((x) => x.text, index.html`<div class="main-text">${(x) => x.text}</div>`)}
+					${when.when((x) => x.text, vividElement.html`<div class="main-text">${(x) => x.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
@@ -189,19 +189,16 @@ const AlertTemplate = (context) => {
 	`;
 };
 
-const alertDefinition = Alert.compose({
-  baseName: "alert",
-  template: AlertTemplate,
-  styles
-});
-const alertRegistries = [
-  alertDefinition(),
-  ...definition$2.iconRegistries,
-  ...definition$1.buttonRegistries,
-  ...definition.elevationRegistries
-];
-const registerAlert = index.registerFactory(alertRegistries);
+const alertDefinition = vividElement.defineVividComponent(
+  "alert",
+  Alert,
+  AlertTemplate,
+  [definition$2.iconDefinition, definition$1.buttonDefinition, definition.elevationDefinition],
+  {
+    styles
+  }
+);
+const registerAlert = vividElement.createRegisterFunction(alertDefinition);
 
 exports.alertDefinition = alertDefinition;
-exports.alertRegistries = alertRegistries;
 exports.registerAlert = registerAlert;

package/shared/definition4.js

@@ -1,12 +1,12 @@
-import { F as FoundationElement, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
-import { B as Button$1, a as buttonRegistries } from './definition11.js';
-import { E as Elevation, e as elevationRegistries } from './definition63.js';
-import { a as iconRegistries } from './definition27.js';
+import { B as Button, b as buttonDefinition } from './definition11.js';
+import { E as Elevation, e as elevationDefinition } from './definition62.js';
+import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { i as iconDefinition } from './definition27.js';
 import { C as Connotation } from './enums.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
-import { L as Localized } from './localized.js';
 import { a as applyMixins } from './apply-mixins.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
+import { L as Localized } from './localized.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
@@ -29,7 +29,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [Connotation.Announcement, "sparkles-line"],
   [Connotation.Alert, "error-line"]
 ]);
-class Alert extends FoundationElement {
+class Alert extends VividElement {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
@@ -161,7 +161,7 @@ function renderDismissButton(buttonTag) {
 }
 const AlertTemplate = (context) => {
   const elevationTag = context.tagFor(Elevation);
-  const buttonTag = context.tagFor(Button$1);
+  const buttonTag = context.tagFor(Button);
   return html`
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div
@@ -187,17 +187,15 @@ const AlertTemplate = (context) => {
 	`;
 };
 
-const alertDefinition = Alert.compose({
-  baseName: "alert",
-  template: AlertTemplate,
-  styles
-});
-const alertRegistries = [
-  alertDefinition(),
-  ...iconRegistries,
-  ...buttonRegistries,
-  ...elevationRegistries
-];
-const registerAlert = registerFactory(alertRegistries);
+const alertDefinition = defineVividComponent(
+  "alert",
+  Alert,
+  AlertTemplate,
+  [iconDefinition, buttonDefinition, elevationDefinition],
+  {
+    styles
+  }
+);
+const registerAlert = createRegisterFunction(alertDefinition);
 
-export { alertDefinition as a, alertRegistries as b, registerAlert as r };
+export { alertDefinition as a, registerAlert as r };