@vonage/vivid 4.31.0 → 5.1.0

package/{shared/definition28.cjs → icon/definition.cjs}

@@ -1,138 +1,14 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition66.cjs');
-const _has = require('./_has.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-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}";
+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');
 
-function _arity(n, fn) {
-  /* eslint-disable no-unused-vars */
-  switch (n) {
-    case 0:
-      return function () {
-        return fn.apply(this, arguments);
-      };
-    case 1:
-      return function (a0) {
-        return fn.apply(this, arguments);
-      };
-    case 2:
-      return function (a0, a1) {
-        return fn.apply(this, arguments);
-      };
-    case 3:
-      return function (a0, a1, a2) {
-        return fn.apply(this, arguments);
-      };
-    case 4:
-      return function (a0, a1, a2, a3) {
-        return fn.apply(this, arguments);
-      };
-    case 5:
-      return function (a0, a1, a2, a3, a4) {
-        return fn.apply(this, arguments);
-      };
-    case 6:
-      return function (a0, a1, a2, a3, a4, a5) {
-        return fn.apply(this, arguments);
-      };
-    case 7:
-      return function (a0, a1, a2, a3, a4, a5, a6) {
-        return fn.apply(this, arguments);
-      };
-    case 8:
-      return function (a0, a1, a2, a3, a4, a5, a6, a7) {
-        return fn.apply(this, arguments);
-      };
-    case 9:
-      return function (a0, a1, a2, a3, a4, a5, a6, a7, a8) {
-        return fn.apply(this, arguments);
-      };
-    case 10:
-      return function (a0, a1, a2, a3, a4, a5, a6, a7, a8, a9) {
-        return fn.apply(this, arguments);
-      };
-    default:
-      throw new Error('First argument to _arity must be a non-negative integer no greater than ten');
-  }
-}
-
-function _identity(x) {
-  return x;
-}
-
-/**
- * A function that does nothing but return the parameter supplied to it. Good
- * as a default or placeholder function.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Function
- * @sig a -> a
- * @param {*} x The value to return.
- * @return {*} The input value, `x`.
- * @example
- *
- *      R.identity(1); //=> 1
- *
- *      const obj = {};
- *      R.identity(obj) === obj; //=> true
- * @symb R.identity(a) = a
- */
-var identity = /*#__PURE__*/_has._curry1(_identity);
-
-/**
- * Takes a string-returning function `keyGen` and a function `fn` and returns
- * a new function that returns cached results for subsequent
- * calls with the same arguments.
- *
- * When the function is invoked, `keyGen` is applied to the same arguments
- * and its result becomes the cache key. If the cache contains something
- * under that key, the function simply returns it and does not invoke `fn` at all.
- *
- * Otherwise `fn` is applied to the same arguments and its return value
- * is cached under that key and returned by the function.
- *
- * Care must be taken when implementing `keyGen` to avoid key collision,
- * or if tracking references, memory leaks and mutating arguments.
- *
- * @func
- * @memberOf R
- * @since v0.24.0
- * @category Function
- * @sig (*... -> String) -> (*... -> a) -> (*... -> a)
- * @param {Function} keyGen The function to generate the cache key.
- * @param {Function} fn The function to memoize.
- * @return {Function} Memoized version of `fn`.
- * @example
- *      const withAge = memoizeWith(o => `${o.birth}/${o.death}`, ({birth, death}) => {
- *      //                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^^
- *      //                          keyGen                        fn
- *        console.log(`computing age for ${birth}/${death}`);
- *        return ({birth, death, age: death - birth});
- *      });
- *
- *      withAge({birth: 1921, death: 1999});
- *      //=> LOG: computing age for 1921/1999
- *      //=> {birth: 1921, death: 1999, age: 78} (returned from fn)
- *
- *      withAge({birth: 1921, death: 1999});
- *      //=> {birth: 1921, death: 1999, age: 78} (returned from cache)
- */
-var memoizeWith = /*#__PURE__*/_has._curry2(function memoizeWith(keyGen, fn) {
-  var cache = {};
-  return _arity(fn.length, function () {
-    var key = keyGen.apply(this, arguments);
-    if (!_has._has(key, cache)) {
-      cache[key] = fn.apply(this, arguments);
-    }
-    return cache[key];
-  });
-});
+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}";
 
 const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
 const ICONS_VERSION = '4.6.9';
@@ -193,8 +69,8 @@ const extractSvg = (response) => {
 const loadSvg = (iconId, signal) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION), {
   signal
 }).then(extractSvg);
-const resolveIcon = memoizeWith(
-  identity,
+const resolveIcon = ramda.memoizeWith(
+  ramda.identity,
   (iconId, signal) => iconId.trim() ? loadSvg(iconId, signal) : Promise.resolve("")
 );
 class Icon extends vividElement.VividElement {
@@ -233,45 +109,45 @@ class Icon extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Icon.prototype, "connotation", 2);
 __decorateClass([
-  vividElement.attr({ converter: numberConverter })
+  fastElement.attr({ converter: numberConverter })
 ], Icon.prototype, "size", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Icon.prototype, "_svg", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Icon.prototype, "iconLoaded", 2);
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Icon.prototype, "label", 2);
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Icon.prototype, "name", 2);
 __decorateClass([
-  vividElement.volatile
+  fastElement.volatile
 ], Icon.prototype, "iconUrl", 1);
 
-const getClasses = ({ connotation, size }) => classNames.classNames(
+const getClasses = ({ connotation, size }) => fastWebUtilities.classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, typeof size === "number"]
 );
 const iconTemplate = (context) => {
-  const visuallyHiddenTag = context.tagFor(definition.VisuallyHidden);
+  const visuallyHiddenTag = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
   const isDecorative = (x) => !x.label || x.label.trim().length === 0;
-  return vividElement.html`
+  return fastElement.html`
 		<figure class="${getClasses}" ?aria-hidden="${(x) => isDecorative(x)}" ?aria-busy="${(x) => !x.iconLoaded}">
 			<slot>
-				${when.when(
+				${fastElement.when(
     (x) => !x.iconLoaded,
-    vividElement.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+    fastElement.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
   )}
-				${when.when(
+				${fastElement.when(
     (x) => x.iconLoaded && x._svg,
-    (x) => vividElement.html`${x._svg}`
+    (x) => fastElement.html`${x._svg}`
   )}
 			</slot>
 			<${visuallyHiddenTag} class="label">${(x) => x.label}</${visuallyHiddenTag}>
@@ -283,13 +159,13 @@ const iconDefinition = vividElement.defineVividComponent(
   "icon",
   Icon,
   iconTemplate,
-  [definition.visuallyHiddenDefinition],
+  [visuallyHidden_definition.visuallyHiddenDefinition],
   {
     styles
   }
 );
 const registerIcon = vividElement.createRegisterFunction(iconDefinition);
 
-exports.Icon = Icon;
+exports.VwcIconElement = Icon;
 exports.iconDefinition = iconDefinition;
 exports.registerIcon = registerIcon;

package/{shared/definition28.js → icon/definition.js}

@@ -1,137 +1,11 @@
-import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { V as VisuallyHidden, v as visuallyHiddenDefinition } from './definition66.js';
-import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+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}";
 
-function _arity(n, fn) {
-  /* eslint-disable no-unused-vars */
-  switch (n) {
-    case 0:
-      return function () {
-        return fn.apply(this, arguments);
-      };
-    case 1:
-      return function (a0) {
-        return fn.apply(this, arguments);
-      };
-    case 2:
-      return function (a0, a1) {
-        return fn.apply(this, arguments);
-      };
-    case 3:
-      return function (a0, a1, a2) {
-        return fn.apply(this, arguments);
-      };
-    case 4:
-      return function (a0, a1, a2, a3) {
-        return fn.apply(this, arguments);
-      };
-    case 5:
-      return function (a0, a1, a2, a3, a4) {
-        return fn.apply(this, arguments);
-      };
-    case 6:
-      return function (a0, a1, a2, a3, a4, a5) {
-        return fn.apply(this, arguments);
-      };
-    case 7:
-      return function (a0, a1, a2, a3, a4, a5, a6) {
-        return fn.apply(this, arguments);
-      };
-    case 8:
-      return function (a0, a1, a2, a3, a4, a5, a6, a7) {
-        return fn.apply(this, arguments);
-      };
-    case 9:
-      return function (a0, a1, a2, a3, a4, a5, a6, a7, a8) {
-        return fn.apply(this, arguments);
-      };
-    case 10:
-      return function (a0, a1, a2, a3, a4, a5, a6, a7, a8, a9) {
-        return fn.apply(this, arguments);
-      };
-    default:
-      throw new Error('First argument to _arity must be a non-negative integer no greater than ten');
-  }
-}
-
-function _identity(x) {
-  return x;
-}
-
-/**
- * A function that does nothing but return the parameter supplied to it. Good
- * as a default or placeholder function.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Function
- * @sig a -> a
- * @param {*} x The value to return.
- * @return {*} The input value, `x`.
- * @example
- *
- *      R.identity(1); //=> 1
- *
- *      const obj = {};
- *      R.identity(obj) === obj; //=> true
- * @symb R.identity(a) = a
- */
-var identity = /*#__PURE__*/_curry1(_identity);
-
-/**
- * Takes a string-returning function `keyGen` and a function `fn` and returns
- * a new function that returns cached results for subsequent
- * calls with the same arguments.
- *
- * When the function is invoked, `keyGen` is applied to the same arguments
- * and its result becomes the cache key. If the cache contains something
- * under that key, the function simply returns it and does not invoke `fn` at all.
- *
- * Otherwise `fn` is applied to the same arguments and its return value
- * is cached under that key and returned by the function.
- *
- * Care must be taken when implementing `keyGen` to avoid key collision,
- * or if tracking references, memory leaks and mutating arguments.
- *
- * @func
- * @memberOf R
- * @since v0.24.0
- * @category Function
- * @sig (*... -> String) -> (*... -> a) -> (*... -> a)
- * @param {Function} keyGen The function to generate the cache key.
- * @param {Function} fn The function to memoize.
- * @return {Function} Memoized version of `fn`.
- * @example
- *      const withAge = memoizeWith(o => `${o.birth}/${o.death}`, ({birth, death}) => {
- *      //                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^^
- *      //                          keyGen                        fn
- *        console.log(`computing age for ${birth}/${death}`);
- *        return ({birth, death, age: death - birth});
- *      });
- *
- *      withAge({birth: 1921, death: 1999});
- *      //=> LOG: computing age for 1921/1999
- *      //=> {birth: 1921, death: 1999, age: 78} (returned from fn)
- *
- *      withAge({birth: 1921, death: 1999});
- *      //=> {birth: 1921, death: 1999, age: 78} (returned from cache)
- */
-var memoizeWith = /*#__PURE__*/_curry2(function memoizeWith(keyGen, fn) {
-  var cache = {};
-  return _arity(fn.length, function () {
-    var key = keyGen.apply(this, arguments);
-    if (!_has(key, cache)) {
-      cache[key] = fn.apply(this, arguments);
-    }
-    return cache[key];
-  });
-});
-
 const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
 const ICONS_VERSION = '4.6.9';
 
@@ -288,4 +162,4 @@ const iconDefinition = defineVividComponent(
 );
 const registerIcon = createRegisterFunction(iconDefinition);
 
-export { Icon as I, iconDefinition as i, registerIcon as r };
+export { Icon as VwcIconElement, iconDefinition, registerIcon };

package/icon/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition28.cjs');
-
-definition.registerIcon();
+"use strict";const e=require("../bundled/definition2.cjs");e.registerIcon();

package/icon/index.js

@@ -1,3 +1,2 @@
-import { r as registerIcon } from '../shared/definition28.js';
-
-registerIcon();
+import { r } from "../bundled/definition2.js";
+r();