@vonage/vivid 5.15.1 → 5.16.0

package/icon/definition.js

@@ -1,196 +1,2 @@
-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, 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}";
-
-//#region package.json
-var version = "4.9.0";
-
-//#endregion
-//#region src/icons.legacy.ts
-const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = version;
-
-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 __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  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);
-  return result;
-};
-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`, 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;
-  #abortController;
-  async nameChanged() {
-    const requestId = ++this.#currentRequestId;
-    if (this.#abortController) {
-      this.#abortController.abort();
-    }
-    this.#abortController = new AbortController();
-    this._svg = void 0;
-    this.iconLoaded = false;
-    let timeout = setTimeout(() => {
-      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);
-    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([
-  attr
-], Icon.prototype, "connotation");
-__decorateClass([
-  attr({ converter: numberConverter })
-], Icon.prototype, "size");
-__decorateClass([
-  observable
-], Icon.prototype, "_svg");
-__decorateClass([
-  observable
-], Icon.prototype, "iconLoaded");
-__decorateClass([
-  attr
-], Icon.prototype, "label");
-__decorateClass([
-  attr
-], Icon.prototype, "name");
-
-const getClasses = ({ connotation, size }) => classNames(
-  "control",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`size-${size}`, typeof size === "number"]
-);
-const iconTemplate = (context) => {
-  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
-  const isDecorative = (x) => !x.label || x.label.trim().length === 0;
-  return html`
-		<figure
-			class="${getClasses}"
-			?aria-hidden="${(x) => isDecorative(x)}"
-			?aria-busy="${(x) => !x?.iconLoaded}"
-		>
-			<slot>
-				${when(
-    (x) => x?.iconLoaded && x?._svg,
-    (x) => html`${html.partial(x._svg)}`
-  )}
-			</slot>
-			<${visuallyHiddenTag} class="label">${(x) => x?.label}</${visuallyHiddenTag}>
-		</figure>
-	`;
-};
-
-const iconDefinition = defineVividComponent(
-  "icon",
-  Icon,
-  iconTemplate,
-  [visuallyHiddenDefinition],
-  {
-    styles
-  }
-);
-const registerIcon = createRegisterFunction(iconDefinition);
-
+import { n as registerIcon, r as Icon, t as iconDefinition } from "../unbundled/definition2.js";
 export { Icon as VwcIconElement, iconDefinition, registerIcon };

package/icon/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition2.cjs");e.registerIcon();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`).n();

package/icon/index.js

@@ -1,2 +1,5 @@
-import { r } from "../bundled/definition2.js";
-r();
+import "../bundled/vivid-element.js";
+import { n as e } from "../bundled/definition2.js";
+//#region src/lib/icon/index.ts
+e();
+//#endregion