@vonage/vivid 5.4.0 → 5.6.0

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}";
@@ -45,13 +44,12 @@ const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 </svg>`;
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const PLACEHOLDER_DELAY = 500;
@@ -66,24 +64,46 @@ 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;
   }
-  get iconUrl() {
-    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
-  }
+  #currentRequestId;
   #abortController;
   async nameChanged() {
+    const requestId = ++this.#currentRequestId;
     if (this.#abortController) {
       this.#abortController.abort();
     }
@@ -91,44 +111,53 @@ 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);
+      /* v8 ignore else -- @preserve */
+      if (this.#currentRequestId === requestId) {
+        this._svg = PLACEHOLDER_ICON;
+        timeout = setTimeout(() => {
+          /* v8 ignore else -- @preserve */
+          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);
+      /* v8 ignore else -- @preserve */
+      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([
   fastElement.attr
-], Icon.prototype, "connotation", 2);
+], Icon.prototype, "connotation");
 __decorateClass([
   fastElement.attr({ converter: numberConverter })
-], Icon.prototype, "size", 2);
+], Icon.prototype, "size");
 __decorateClass([
   fastElement.observable
-], Icon.prototype, "_svg", 2);
+], Icon.prototype, "_svg");
 __decorateClass([
   fastElement.observable
-], Icon.prototype, "iconLoaded", 2);
+], Icon.prototype, "iconLoaded");
 __decorateClass([
   fastElement.attr
-], Icon.prototype, "label", 2);
+], Icon.prototype, "label");
 __decorateClass([
   fastElement.attr
-], Icon.prototype, "name", 2);
-__decorateClass([
-  fastElement.volatile
-], Icon.prototype, "iconUrl", 1);
+], Icon.prototype, "name");
 
 const getClasses = ({ connotation, size }) => fastWebUtilities.classNames(
   "control",
@@ -146,10 +175,6 @@ const iconTemplate = (context) => {
 		>
 			<slot>
 				${fastElement.when(
-    (x) => !x?.iconLoaded,
-    fastElement.html`<img alt="${(x) => x?.name}" src="${(x) => x?.iconUrl}" />`
-  )}
-				${fastElement.when(
     (x) => x?.iconLoaded && x?._svg,
     (x) => fastElement.html`${fastElement.html.partial(x._svg)}`
   )}

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 { attr, observable, when, html } from '@microsoft/fast-element';
 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}";
@@ -41,13 +40,12 @@ const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 </svg>`;
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const PLACEHOLDER_DELAY = 500;
@@ -62,24 +60,46 @@ 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;
   }
-  get iconUrl() {
-    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
-  }
+  #currentRequestId;
   #abortController;
   async nameChanged() {
+    const requestId = ++this.#currentRequestId;
     if (this.#abortController) {
       this.#abortController.abort();
     }
@@ -87,44 +107,53 @@ 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);
+      /* v8 ignore else -- @preserve */
+      if (this.#currentRequestId === requestId) {
+        this._svg = PLACEHOLDER_ICON;
+        timeout = setTimeout(() => {
+          /* v8 ignore else -- @preserve */
+          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);
+      /* v8 ignore else -- @preserve */
+      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([
   attr
-], Icon.prototype, "connotation", 2);
+], Icon.prototype, "connotation");
 __decorateClass([
   attr({ converter: numberConverter })
-], Icon.prototype, "size", 2);
+], Icon.prototype, "size");
 __decorateClass([
   observable
-], Icon.prototype, "_svg", 2);
+], Icon.prototype, "_svg");
 __decorateClass([
   observable
-], Icon.prototype, "iconLoaded", 2);
+], Icon.prototype, "iconLoaded");
 __decorateClass([
   attr
-], Icon.prototype, "label", 2);
+], Icon.prototype, "label");
 __decorateClass([
   attr
-], Icon.prototype, "name", 2);
-__decorateClass([
-  volatile
-], Icon.prototype, "iconUrl", 1);
+], Icon.prototype, "name");
 
 const getClasses = ({ connotation, size }) => classNames(
   "control",
@@ -142,10 +171,6 @@ const iconTemplate = (context) => {
 		>
 			<slot>
 				${when(
-    (x) => !x?.iconLoaded,
-    html`<img alt="${(x) => x?.name}" src="${(x) => x?.iconUrl}" />`
-  )}
-				${when(
     (x) => x?.iconLoaded && x?._svg,
     (x) => html`${html.partial(x._svg)}`
   )}

package/index.cjs

@@ -228,6 +228,27 @@ exports.registerRadio = radio_definition.registerRadio;
 exports.VwcRangeSliderElement = rangeSlider_definition.VwcRangeSliderElement;
 exports.rangeSliderDefinition = rangeSlider_definition.rangeSliderDefinition;
 exports.registerRangeSlider = rangeSlider_definition.registerRangeSlider;
+exports.RteAlignmentFeature = richTextEditor_definition.RteAlignmentFeature;
+exports.RteBase = richTextEditor_definition.RteBase;
+exports.RteBoldFeature = richTextEditor_definition.RteBoldFeature;
+exports.RteConfig = richTextEditor_definition.RteConfig;
+exports.RteDropHandlerFeature = richTextEditor_definition.RteDropHandlerFeature;
+exports.RteFileHandlerFeature = richTextEditor_definition.RteFileHandlerFeature;
+exports.RteFontSizePickerFeature = richTextEditor_definition.RteFontSizePickerFeature;
+exports.RteHardBreakFeature = richTextEditor_definition.RteHardBreakFeature;
+exports.RteHtmlParser = richTextEditor_definition.RteHtmlParser;
+exports.RteHtmlSerializer = richTextEditor_definition.RteHtmlSerializer;
+exports.RteInlineImageFeature = richTextEditor_definition.RteInlineImageFeature;
+exports.RteItalicFeature = richTextEditor_definition.RteItalicFeature;
+exports.RteLinkFeature = richTextEditor_definition.RteLinkFeature;
+exports.RteListFeature = richTextEditor_definition.RteListFeature;
+exports.RteMonospaceFeature = richTextEditor_definition.RteMonospaceFeature;
+exports.RtePlaceholderFeature = richTextEditor_definition.RtePlaceholderFeature;
+exports.RteStrikethroughFeature = richTextEditor_definition.RteStrikethroughFeature;
+exports.RteTextBlockPickerFeature = richTextEditor_definition.RteTextBlockPickerFeature;
+exports.RteTextColorPickerFeature = richTextEditor_definition.RteTextColorPickerFeature;
+exports.RteToolbarFeature = richTextEditor_definition.RteToolbarFeature;
+exports.RteUnderlineFeature = richTextEditor_definition.RteUnderlineFeature;
 exports.VwcRichTextEditorElement = richTextEditor_definition.VwcRichTextEditorElement;
 exports.registerRichTextEditor = richTextEditor_definition.registerRichTextEditor;
 exports.richTextEditorDefinition = richTextEditor_definition.richTextEditorDefinition;

package/index.js

@@ -47,7 +47,7 @@ export { VwcProgressElement, progressDefinition, registerProgress } from './prog
 export { VwcRadioGroupElement, radioGroupDefinition, registerRadioGroup } from './radio-group/definition.js';
 export { VwcRadioElement, radioDefinition, registerRadio } from './radio/definition.js';
 export { VwcRangeSliderElement, rangeSliderDefinition, registerRangeSlider } from './range-slider/definition.js';
-export { VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition } from './rich-text-editor/definition.js';
+export { RteAlignmentFeature, RteBase, RteBoldFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteItalicFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarFeature, RteUnderlineFeature, VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition } from './rich-text-editor/definition.js';
 export { VwcSearchableSelectElement, registerSearchableSelect } from './searchable-select/definition.js';
 export { VwcSelectElement, registerSelect, selectDefinition } from './select/definition.js';
 export { VwcSelectableBoxElement, registerSelectableBox, selectableBoxDefinition } from './selectable-box/definition.js';