@vonage/vivid 4.17.0 → 4.19.0-preview.0

package/shared/definition28.js

@@ -1,65 +1,287 @@
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+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 { _ 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';
+
+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);
+
+/**
+ * Creates a new function that, when invoked, caches the result of calling `fn`
+ * for a given argument set and returns the result. Subsequent calls to the
+ * memoized `fn` with the same argument set will not result in an additional
+ * call to `fn`; instead, the cached result for that set of arguments will be
+ * returned.
+ *
+ * Care must be taken when implementing key generation 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} fn The function to generate the cache key.
+ * @param {Function} fn The function to memoize.
+ * @return {Function} Memoized version of `fn`.
+ * @example
+ *
+ *      let count = 0;
+ *      const factorial = R.memoizeWith(Number, n => {
+ *        count += 1;
+ *        return R.product(R.range(1, n + 1));
+ *      });
+ *      factorial(5); //=> 120
+ *      factorial(5); //=> 120
+ *      factorial(5); //=> 120
+ *      count; //=> 1
+ */
+
+var memoizeWith =
+/*#__PURE__*/
+_curry2(function memoizeWith(mFn, fn) {
+  var cache = {};
+  return _arity(fn.length, function () {
+    var key = mFn.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.4";
+
+const numberConverter = {
+  toView(value) {
+    if (value === void 0) {
+      return null;
+    }
+    return value.toString();
+  },
+  fromView(value) {
+    if (typeof value === "string") {
+      value = parseFloat(value.toString());
+    }
+    if (typeof value !== "number") {
+      return void 0;
+    }
+    return isNaN(value) || !isFinite(value) ? void 0 : value;
+  }
+};
+
+const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
+    <g>
+        <g stroke-width="6" stroke-linecap="round" fill="none">
+            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
+            </path>
+            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
+            </path>
+            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
+            </animateTransform>
+        </g>
+    </g>
+</svg>`;
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class Layout extends VividElement {
+const PLACEHOLDER_DELAY = 500;
+const PLACEHOLDER_TIMEOUT = 2e3;
+const baseUrlTemplate = (resource, version) => [ICONS_BASE_URL, `v${version}`, resource].join("/");
+const assertIsValidResponse = ({ ok, headers }) => {
+  if (!ok || headers.get("content-type") !== "image/svg+xml") {
+    throw new Error("Something went wrong");
+  }
+};
+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("")
+);
+class Icon extends VividElement {
+  constructor() {
+    super(...arguments);
+    this.iconLoaded = false;
+    this.#abortController = null;
+  }
+  get iconUrl() {
+    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
+  }
+  #abortController;
+  async nameChanged() {
+    if (this.#abortController) {
+      this.#abortController.abort();
+    }
+    this.#abortController = new AbortController();
+    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);
+    }, 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;
+    });
+  }
 }
 __decorateClass([
   attr
-], Layout.prototype, "gutters");
+], Icon.prototype, "connotation", 2);
+__decorateClass([
+  attr({ converter: numberConverter })
+], Icon.prototype, "size", 2);
 __decorateClass([
-  attr({ attribute: "column-basis" })
-], Layout.prototype, "columnBasis");
+  observable
+], Icon.prototype, "_svg", 2);
 __decorateClass([
-  attr({ attribute: "column-spacing" })
-], Layout.prototype, "columnSpacing");
+  observable
+], Icon.prototype, "iconLoaded", 2);
 __decorateClass([
-  attr({ attribute: "row-spacing" })
-], Layout.prototype, "rowSpacing");
+  attr
+], Icon.prototype, "name", 2);
 __decorateClass([
-  attr({ attribute: "auto-sizing" })
-], Layout.prototype, "autoSizing");
-
-const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}@media not all and (width >= 600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width >= 600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.auto-sizing-fill{--_auto-sizing: auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing: auto-fit}";
-
-const getClasses = ({
-  columnBasis,
-  gutters,
-  columnSpacing,
-  autoSizing,
-  rowSpacing
-}) => classNames(
+  volatile
+], Icon.prototype, "iconUrl", 1);
+
+const getClasses = ({ connotation, size }) => classNames(
   "control",
-  [`column-basis-${columnBasis}`, Boolean(columnBasis)],
-  [`gutters-${gutters}`, Boolean(gutters)],
-  [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)],
-  [
-    `row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`,
-    Boolean(rowSpacing) || Boolean(columnSpacing)
-  ],
-  [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`size-${size}`, typeof size === "number"]
 );
-const layoutTemplate = html` <div class="${getClasses}">
-	<slot></slot>
-</div>`;
-
-const layoutDefinition = defineVividComponent(
-  "layout",
-  Layout,
-  layoutTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerLayout = createRegisterFunction(layoutDefinition);
+const iconTemplate = html`
+	<figure class="${getClasses}" ?aria-busy="${(x) => !x.iconLoaded}">
+		<slot>
+			${when(
+  (x) => !x.iconLoaded,
+  html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+)}
+			${when(
+  (x) => x.iconLoaded && x._svg,
+  (x) => html`${x._svg}`
+)}
+		</slot>
+	</figure>
+`;
+
+const iconDefinition = defineVividComponent("icon", Icon, iconTemplate, [], {
+  styles
+});
+const registerIcon = createRegisterFunction(iconDefinition);
 
-export { Layout as L, layoutDefinition as l, registerLayout as r };
+export { Icon as I, iconDefinition as i, memoizeWith as m, registerIcon as r };