@vonage/vivid 5.3.0 → 5.5.0

package/fab/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, ref, html } from '@microsoft/fast-element';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { V as VividFoundationButton } from '../unbundled/button.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { d as delegateAria } from '../unbundled/delegates-aria.js';

package/header/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const elevation_definition = require('../unbundled/definition5.cjs');
+const elevation_definition = require('../unbundled/definition6.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const delegatesAria = require('../unbundled/delegates-aria.cjs');

package/header/definition.js

@@ -1,4 +1,4 @@
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, html } from '@microsoft/fast-element';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';

package/icon/definition.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const vividElement = require('../unbundled/vivid-element.cjs');
 const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
-const ramda = require('ramda');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
@@ -66,24 +65,50 @@ const extractSvg = (response) => {
   assertIsValidResponse(response);
   return response.text();
 };
-const loadSvg = (iconId, signal) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION), {
-  signal
-}).then(extractSvg);
-const resolveIcon = ramda.memoizeWith(
-  ramda.identity,
-  (iconId, signal) => iconId.trim() ? loadSvg(iconId, signal) : Promise.resolve("")
+const loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(
+  extractSvg
 );
+const normalizeKey = (iconId) => (iconId ?? "").trim();
+const iconCache = /* @__PURE__ */ new Map();
+const resolveIcon = (iconId, signal) => {
+  const key = normalizeKey(iconId);
+  if (!key) return Promise.resolve("");
+  const cached = iconCache.get(key);
+  if (cached && !cached.signal?.aborted) {
+    return cached.promise;
+  }
+  const promise = loadSvg(key, signal).then((svg) => {
+    const entry = iconCache.get(key);
+    if (entry && entry.promise === promise && signal.aborted) {
+      iconCache.delete(key);
+      throw signal.reason ?? new DOMException("Aborted", "AbortError");
+    }
+    return svg;
+  }).catch((err) => {
+    const entry = iconCache.get(key);
+    if (entry && entry.promise === promise) {
+      iconCache.delete(key);
+    }
+    throw err;
+  });
+  iconCache.set(key, { promise, signal });
+  return promise;
+};
 class Icon extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.iconLoaded = false;
+    this.#currentRequestId = 0;
     this.#abortController = null;
   }
+  #currentRequestId;
   get iconUrl() {
-    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
+    const key = normalizeKey(this.name);
+    return key ? baseUrlTemplate(`${key}.svg`, ICONS_VERSION) : this._svg;
   }
   #abortController;
   async nameChanged() {
+    const requestId = ++this.#currentRequestId;
     if (this.#abortController) {
       this.#abortController.abort();
     }
@@ -91,21 +116,30 @@ class Icon extends vividElement.VividElement {
     this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
-      this._svg = PLACEHOLDER_ICON;
-      timeout = setTimeout(() => {
-        if (this._svg === PLACEHOLDER_ICON) {
-          this._svg = void 0;
-        }
-      }, PLACEHOLDER_TIMEOUT);
+      if (this.#currentRequestId === requestId) {
+        this._svg = PLACEHOLDER_ICON;
+        timeout = setTimeout(() => {
+          if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) {
+            this._svg = void 0;
+          }
+        }, PLACEHOLDER_TIMEOUT);
+      }
     }, PLACEHOLDER_DELAY);
-    await resolveIcon(this.name ? this.name : "", this.#abortController.signal).then((svg) => {
-      this._svg = svg;
-    }).catch(() => {
-      this._svg = void 0;
-    }).finally(() => {
-      clearTimeout(timeout);
-      this.iconLoaded = true;
-    });
+    try {
+      const svg = await resolveIcon(this.name, this.#abortController.signal);
+      if (this.#currentRequestId === requestId) {
+        this._svg = svg;
+      }
+    } catch {
+      if (this.#currentRequestId === requestId) {
+        this._svg = void 0;
+      }
+    } finally {
+      if (this.#currentRequestId === requestId) {
+        clearTimeout(timeout);
+        this.iconLoaded = true;
+      }
+    }
   }
 }
 __decorateClass([

package/icon/definition.js

@@ -1,7 +1,6 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { VwcVisuallyHiddenElement as VisuallyHidden, visuallyHiddenDefinition } from '../visually-hidden/definition.js';
 import { attr, observable, volatile, when, html } from '@microsoft/fast-element';
-import { memoizeWith, identity } from 'ramda';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
@@ -62,24 +61,50 @@ const extractSvg = (response) => {
   assertIsValidResponse(response);
   return response.text();
 };
-const loadSvg = (iconId, signal) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION), {
-  signal
-}).then(extractSvg);
-const resolveIcon = memoizeWith(
-  identity,
-  (iconId, signal) => iconId.trim() ? loadSvg(iconId, signal) : Promise.resolve("")
+const loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(
+  extractSvg
 );
+const normalizeKey = (iconId) => (iconId ?? "").trim();
+const iconCache = /* @__PURE__ */ new Map();
+const resolveIcon = (iconId, signal) => {
+  const key = normalizeKey(iconId);
+  if (!key) return Promise.resolve("");
+  const cached = iconCache.get(key);
+  if (cached && !cached.signal?.aborted) {
+    return cached.promise;
+  }
+  const promise = loadSvg(key, signal).then((svg) => {
+    const entry = iconCache.get(key);
+    if (entry && entry.promise === promise && signal.aborted) {
+      iconCache.delete(key);
+      throw signal.reason ?? new DOMException("Aborted", "AbortError");
+    }
+    return svg;
+  }).catch((err) => {
+    const entry = iconCache.get(key);
+    if (entry && entry.promise === promise) {
+      iconCache.delete(key);
+    }
+    throw err;
+  });
+  iconCache.set(key, { promise, signal });
+  return promise;
+};
 class Icon extends VividElement {
   constructor() {
     super(...arguments);
     this.iconLoaded = false;
+    this.#currentRequestId = 0;
     this.#abortController = null;
   }
+  #currentRequestId;
   get iconUrl() {
-    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
+    const key = normalizeKey(this.name);
+    return key ? baseUrlTemplate(`${key}.svg`, ICONS_VERSION) : this._svg;
   }
   #abortController;
   async nameChanged() {
+    const requestId = ++this.#currentRequestId;
     if (this.#abortController) {
       this.#abortController.abort();
     }
@@ -87,21 +112,30 @@ class Icon extends VividElement {
     this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
-      this._svg = PLACEHOLDER_ICON;
-      timeout = setTimeout(() => {
-        if (this._svg === PLACEHOLDER_ICON) {
-          this._svg = void 0;
-        }
-      }, PLACEHOLDER_TIMEOUT);
+      if (this.#currentRequestId === requestId) {
+        this._svg = PLACEHOLDER_ICON;
+        timeout = setTimeout(() => {
+          if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) {
+            this._svg = void 0;
+          }
+        }, PLACEHOLDER_TIMEOUT);
+      }
     }, PLACEHOLDER_DELAY);
-    await resolveIcon(this.name ? this.name : "", this.#abortController.signal).then((svg) => {
-      this._svg = svg;
-    }).catch(() => {
-      this._svg = void 0;
-    }).finally(() => {
-      clearTimeout(timeout);
-      this.iconLoaded = true;
-    });
+    try {
+      const svg = await resolveIcon(this.name, this.#abortController.signal);
+      if (this.#currentRequestId === requestId) {
+        this._svg = svg;
+      }
+    } catch {
+      if (this.#currentRequestId === requestId) {
+        this._svg = void 0;
+      }
+    } finally {
+      if (this.#currentRequestId === requestId) {
+        clearTimeout(timeout);
+        this.iconLoaded = true;
+      }
+    }
   }
 }
 __decorateClass([

package/index.cjs

@@ -44,8 +44,7 @@ const navItem_definition = require('./nav-item/definition.cjs');
 const nav_definition = require('./nav/definition.cjs');
 const note_definition = require('./note/definition.cjs');
 const numberField_definition = require('./number-field/definition.cjs');
-const option_definition = require('./option/definition.cjs');
-const option = require('./unbundled/option.cjs');
+const option_definition = require('./unbundled/definition3.cjs');
 const pagination_definition = require('./pagination/definition.cjs');
 const progressRing_definition = require('./progress-ring/definition.cjs');
 const progress_definition = require('./progress/definition.cjs');
@@ -72,7 +71,7 @@ const timePicker_definition = require('./time-picker/definition.cjs');
 const timeSelectionPicker_template = require('./unbundled/time-selection-picker.template.cjs');
 const toggletip_definition = require('./toggletip/definition.cjs');
 const tooltip_definition = require('./tooltip/definition.cjs');
-const treeItem_definition = require('./unbundled/definition3.cjs');
+const treeItem_definition = require('./unbundled/definition4.cjs');
 const treeView_definition = require('./tree-view/definition.cjs');
 const videoPlayer_definition = require('./video-player/definition.cjs');
 
@@ -208,9 +207,9 @@ exports.registerNote = note_definition.registerNote;
 exports.VwcNumberFieldElement = numberField_definition.VwcNumberFieldElement;
 exports.numberFieldDefinition = numberField_definition.numberFieldDefinition;
 exports.registerNumberField = numberField_definition.registerNumberField;
+exports.VwcOptionElement = option_definition.ListboxOption;
 exports.listboxOptionDefinition = option_definition.listboxOptionDefinition;
 exports.registerOption = option_definition.registerOption;
-exports.VwcOptionElement = option.ListboxOption;
 exports.VwcPaginationElement = pagination_definition.VwcPaginationElement;
 exports.paginationDefinition = pagination_definition.paginationDefinition;
 exports.registerPagination = pagination_definition.registerPagination;

package/index.js

@@ -40,8 +40,7 @@ export { VwcNavItemElement, navItemDefinition, registerNavItem } from './nav-ite
 export { VwcNavElement, navDefinition, registerNav } from './nav/definition.js';
 export { VwcNoteElement, noteDefinition, registerNote } from './note/definition.js';
 export { VwcNumberFieldElement, numberFieldDefinition, registerNumberField } from './number-field/definition.js';
-export { listboxOptionDefinition, registerOption } from './option/definition.js';
-export { L as VwcOptionElement } from './unbundled/option.js';
+export { L as VwcOptionElement, l as listboxOptionDefinition, r as registerOption } from './unbundled/definition3.js';
 export { VwcPaginationElement, paginationDefinition, registerPagination } from './pagination/definition.js';
 export { VwcProgressRingElement, progressRingDefinition, registerProgressRing } from './progress-ring/definition.js';
 export { VwcProgressElement, progressDefinition, registerProgress } from './progress/definition.js';
@@ -68,6 +67,6 @@ export { registerTimePicker, timePickerDefinition } from './time-picker/definiti
 export { T as VwcTimePickerElement } from './unbundled/time-selection-picker.template.js';
 export { VwcToggletipElement, registerToggletip, toggletipDefinition } from './toggletip/definition.js';
 export { VwcTooltipElement, registerTooltip, tooltipDefinition } from './tooltip/definition.js';
-export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from './unbundled/definition3.js';
+export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from './unbundled/definition4.js';
 export { VwcTreeViewElement, registerTreeView, treeViewDefinition } from './tree-view/definition.js';
 export { VwcVideoPlayerElement, registerVideoPlayer, videoPlayerDefinition } from './video-player/definition.js';

package/lib/accordion/accordion.d.ts

@@ -3,7 +3,7 @@ export declare const AccordionExpandMode: {
     readonly single: "single";
     readonly multi: "multi";
 };
-export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
+export type AccordionExpandMode = (typeof AccordionExpandMode)[keyof typeof AccordionExpandMode];
 export declare class Accordion extends VividElement {
     expandmode: AccordionExpandMode;
     activeid: string | null;

package/lib/accordion/definition.d.ts

@@ -3,6 +3,6 @@ export declare const AccordionExpandMode: {
     readonly single: "single";
     readonly multi: "multi";
 };
-export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
+export type AccordionExpandMode = (typeof AccordionExpandMode)[keyof typeof AccordionExpandMode];
 export declare const registerAccordion: (prefix?: string) => void;
 export { Accordion as VwcAccordionElement };

package/lib/audio-player/audio-player.d.ts

@@ -8,7 +8,7 @@ export declare const SKIP_DIRECTIONS: {
     FORWARD: number;
     BACKWARD: number;
 };
-export type SKIP_DIRECTIONS_TYPE = typeof SKIP_DIRECTIONS[keyof typeof SKIP_DIRECTIONS];
+export type SKIP_DIRECTIONS_TYPE = (typeof SKIP_DIRECTIONS)[keyof typeof SKIP_DIRECTIONS];
 export declare function formatTime(time: number): string;
 declare const AudioPlayer_base: {
     new (...args: any[]): {