@nice2dev/icons 1.3.14 → 1.3.16

package/dist/esm/iconHtml.js

@@ -1,100 +1,82 @@
-/**
- * An icon — or a stack of icons — kept as HTML (1.3.9): the `<svg>` NiceIconPicker draws, ready to
- * store in a database and to show anywhere, even without React. What it was drawn from rides along
- * in data attributes on the root, so the picker reads its own value back.
- */
-const ATTR_ICON = 'data-ntd-icon';
-const ATTR_VARIANT = 'data-ntd-variant';
-const ATTR_STACK = 'data-ntd-stack';
+const ATTR_ICON = "data-ntd-icon";
+const ATTR_VARIANT = "data-ntd-variant";
+const ATTR_STACK = "data-ntd-stack";
 const ENTITIES = {
-    amp: '&',
-    quot: '"',
-    apos: "'",
-    '#39': "'",
-    lt: '<',
-    gt: '>',
+  amp: "&",
+  quot: '"',
+  apos: "'",
+  "#39": "'",
+  lt: "<",
+  gt: ">"
 };
-/** The value of a data attribute of the root element (the first one in the markup). */
 function readAttr(html, name) {
-    const hit = new RegExp(`\\s${name}="([^"]*)"`).exec(html);
-    return hit
-        ? hit[1].replace(/&(amp|quot|apos|#39|lt|gt);/g, (_, e) => ENTITIES[e])
-        : undefined;
+  const hit = new RegExp(`\\s${name}="([^"]*)"`).exec(html);
+  return hit ? hit[1].replace(/&(amp|quot|apos|#39|lt|gt);/g, (_, e) => ENTITIES[e]) : void 0;
 }
 function isLayer(value) {
-    const layer = value;
-    return (!!layer &&
-        typeof layer === 'object' &&
-        typeof layer.id === 'string' &&
-        typeof layer.icon === 'string');
+  const layer = value;
+  return !!layer && typeof layer === "object" && typeof layer.id === "string" && typeof layer.icon === "string";
 }
-/**
- * Reads back what an icon's HTML was drawn from — the base icon and the stack. `null` for anything
- * else: empty, plain text or HTML the picker did not write.
- */
 function parseIconHtml(html) {
-    if (!html) {
-        return null;
+  if (!html) {
+    return null;
+  }
+  const icon = readAttr(html, ATTR_ICON);
+  if (!icon) {
+    return null;
+  }
+  const stack = readAttr(html, ATTR_STACK);
+  if (stack) {
+    try {
+      const parsed = JSON.parse(stack);
+      const layers = Array.isArray(parsed) ? parsed.filter(isLayer) : [];
+      if (layers.length > 0) {
+        return { icon: layers[0].icon, layers };
+      }
+    } catch {
     }
-    const icon = readAttr(html, ATTR_ICON);
-    if (!icon) {
-        return null;
-    }
-    const stack = readAttr(html, ATTR_STACK);
-    if (stack) {
-        try {
-            const parsed = JSON.parse(stack);
-            const layers = Array.isArray(parsed) ? parsed.filter(isLayer) : [];
-            if (layers.length > 0) {
-                return { icon: layers[0].icon, layers };
-            }
-        }
-        catch (_a) {
-            // a damaged stack still shows its base
-        }
-    }
-    const variant = readAttr(html, ATTR_VARIANT);
-    return { icon, layers: [{ id: '1', icon, ...(variant ? { variant } : {}) }] };
+  }
+  const variant = readAttr(html, ATTR_VARIANT);
+  return { icon, layers: [{ id: "1", icon, ...variant ? { variant } : {} }] };
 }
-/** The data attributes that let the HTML of a stack be read back: the base, and the stack unless it is a plain icon. */
 function iconHtmlAttributes(layers) {
-    const base = layers[0];
-    if (!base) {
-        return {};
-    }
-    const plain = layers.length === 1 &&
-        Object.entries(base).every(([key, value]) => value === undefined || key === 'id' || key === 'icon' || key === 'variant');
-    if (plain) {
-        return { [ATTR_ICON]: base.icon, ...(base.variant ? { [ATTR_VARIANT]: base.variant } : {}) };
-    }
-    return { [ATTR_ICON]: base.icon, [ATTR_STACK]: JSON.stringify(layers) };
+  const base = layers[0];
+  if (!base) {
+    return {};
+  }
+  const plain = layers.length === 1 && Object.entries(base).every(
+    ([key, value]) => value === void 0 || key === "id" || key === "icon" || key === "variant"
+  );
+  if (plain) {
+    return { [ATTR_ICON]: base.icon, ...base.variant ? { [ATTR_VARIANT]: base.variant } : {} };
+  }
+  return { [ATTR_ICON]: base.icon, [ATTR_STACK]: JSON.stringify(layers) };
 }
-/** djb2, base 36 — a short, stable name for a drawing. */
 function hash(text) {
-    let h = 5381;
-    for (let i = 0; i < text.length; i++) {
-        h = ((h << 5) + h + text.charCodeAt(i)) | 0;
-    }
-    return (h >>> 0).toString(36);
+  let h = 5381;
+  for (let i = 0; i < text.length; i++) {
+    h = (h << 5) + h + text.charCodeAt(i) | 0;
+  }
+  return (h >>> 0).toString(36);
 }
-/**
- * Renames the ids inside an icon's markup (masks, gradients, clip paths) after the drawing itself.
- * React's ids (`_r_3_`) are unique only within the page that drew them; pasted into another page they
- * could hit an element of its own and borrow the wrong mask. Named after the drawing, two copies of
- * one icon share ids that point at identical definitions.
- */
 function scopeIconHtmlIds(markup) {
-    const ids = [...new Set([...markup.matchAll(/\sid="([^"]+)"/g)].map((m) => m[1]))];
-    if (ids.length === 0) {
-        return markup;
-    }
-    const index = new Map(ids.map((id, i) => [id, i]));
-    const rename = (fn) => markup
-        .replace(/(\sid=")([^"]+)(")/g, (all, a, id, b) => index.has(id) ? a + fn(id) + b : all)
-        .replace(/url\(#([^)]+)\)/g, (all, id) => (index.has(id) ? `url(#${fn(id)})` : all))
-        .replace(/(href=")#([^"]+)(")/g, (all, a, id, b) => index.has(id) ? `${a}#${fn(id)}${b}` : all);
-    const name = hash(rename((id) => `#${index.get(id)}`));
-    return rename((id) => `ntd-${name}-${index.get(id)}`);
+  const ids = [...new Set([...markup.matchAll(/\sid="([^"]+)"/g)].map((m) => m[1]))];
+  if (ids.length === 0) {
+    return markup;
+  }
+  const index = new Map(ids.map((id, i) => [id, i]));
+  const rename = (fn) => markup.replace(
+    /(\sid=")([^"]+)(")/g,
+    (all, a, id, b) => index.has(id) ? a + fn(id) + b : all
+  ).replace(/url\(#([^)]+)\)/g, (all, id) => index.has(id) ? `url(#${fn(id)})` : all).replace(
+    /(href=")#([^"]+)(")/g,
+    (all, a, id, b) => index.has(id) ? `${a}#${fn(id)}${b}` : all
+  );
+  const name = hash(rename((id) => `#${index.get(id)}`));
+  return rename((id) => `ntd-${name}-${index.get(id)}`);
 }
-
-export { iconHtmlAttributes, parseIconHtml, scopeIconHtmlIds };
+export {
+  iconHtmlAttributes,
+  parseIconHtml,
+  scopeIconHtmlIds
+};