@ds-mo/ui 2.9.0 → 2.10.1

package/src/wc/components/Icon/flag-icon-catalog.ts

@@ -1,68 +1,36 @@
 /** Auto-generated by scripts/generate-icon-catalog.mjs — do not edit. */
-import { FlagAustria } from '@ds-mo/icons/svg/flags/FlagAustria';
-import { FlagBelgium } from '@ds-mo/icons/svg/flags/FlagBelgium';
-import { FlagBulgaria } from '@ds-mo/icons/svg/flags/FlagBulgaria';
-import { FlagCanada } from '@ds-mo/icons/svg/flags/FlagCanada';
-import { FlagCroatia } from '@ds-mo/icons/svg/flags/FlagCroatia';
-import { FlagCyprus } from '@ds-mo/icons/svg/flags/FlagCyprus';
-import { FlagCzechRepublic } from '@ds-mo/icons/svg/flags/FlagCzechRepublic';
-import { FlagDenmark } from '@ds-mo/icons/svg/flags/FlagDenmark';
-import { FlagEU } from '@ds-mo/icons/svg/flags/FlagEU';
-import { FlagEstonia } from '@ds-mo/icons/svg/flags/FlagEstonia';
-import { FlagFinland } from '@ds-mo/icons/svg/flags/FlagFinland';
-import { FlagFrance } from '@ds-mo/icons/svg/flags/FlagFrance';
-import { FlagGermany } from '@ds-mo/icons/svg/flags/FlagGermany';
-import { FlagGreece } from '@ds-mo/icons/svg/flags/FlagGreece';
-import { FlagHungary } from '@ds-mo/icons/svg/flags/FlagHungary';
-import { FlagIreland } from '@ds-mo/icons/svg/flags/FlagIreland';
-import { FlagItaly } from '@ds-mo/icons/svg/flags/FlagItaly';
-import { FlagLatvia } from '@ds-mo/icons/svg/flags/FlagLatvia';
-import { FlagLithuania } from '@ds-mo/icons/svg/flags/FlagLithuania';
-import { FlagLuxembourg } from '@ds-mo/icons/svg/flags/FlagLuxembourg';
-import { FlagMalta } from '@ds-mo/icons/svg/flags/FlagMalta';
-import { FlagMexico } from '@ds-mo/icons/svg/flags/FlagMexico';
-import { FlagNetherlands } from '@ds-mo/icons/svg/flags/FlagNetherlands';
-import { FlagPoland } from '@ds-mo/icons/svg/flags/FlagPoland';
-import { FlagPortugal } from '@ds-mo/icons/svg/flags/FlagPortugal';
-import { FlagRomania } from '@ds-mo/icons/svg/flags/FlagRomania';
-import { FlagSlovakia } from '@ds-mo/icons/svg/flags/FlagSlovakia';
-import { FlagSlovenia } from '@ds-mo/icons/svg/flags/FlagSlovenia';
-import { FlagSpain } from '@ds-mo/icons/svg/flags/FlagSpain';
-import { FlagSweden } from '@ds-mo/icons/svg/flags/FlagSweden';
-import { FlagUnitedKingdom } from '@ds-mo/icons/svg/flags/FlagUnitedKingdom';
-import { FlagUnitedStates } from '@ds-mo/icons/svg/flags/FlagUnitedStates';
 
-export const flagIconCatalog: Record<string, string> = {
-  FlagAustria,
-  FlagBelgium,
-  FlagBulgaria,
-  FlagCanada,
-  FlagCroatia,
-  FlagCyprus,
-  FlagCzechRepublic,
-  FlagDenmark,
-  FlagEU,
-  FlagEstonia,
-  FlagFinland,
-  FlagFrance,
-  FlagGermany,
-  FlagGreece,
-  FlagHungary,
-  FlagIreland,
-  FlagItaly,
-  FlagLatvia,
-  FlagLithuania,
-  FlagLuxembourg,
-  FlagMalta,
-  FlagMexico,
-  FlagNetherlands,
-  FlagPoland,
-  FlagPortugal,
-  FlagRomania,
-  FlagSlovakia,
-  FlagSlovenia,
-  FlagSpain,
-  FlagSweden,
-  FlagUnitedKingdom,
-  FlagUnitedStates,
+export const flagIconLoaders: Record<string, () => Promise<string>> = {
+  FlagAustria: () => import('@ds-mo/icons/svg/flags/FlagAustria').then(m => m.FlagAustria),
+  FlagBelgium: () => import('@ds-mo/icons/svg/flags/FlagBelgium').then(m => m.FlagBelgium),
+  FlagBulgaria: () => import('@ds-mo/icons/svg/flags/FlagBulgaria').then(m => m.FlagBulgaria),
+  FlagCanada: () => import('@ds-mo/icons/svg/flags/FlagCanada').then(m => m.FlagCanada),
+  FlagCroatia: () => import('@ds-mo/icons/svg/flags/FlagCroatia').then(m => m.FlagCroatia),
+  FlagCyprus: () => import('@ds-mo/icons/svg/flags/FlagCyprus').then(m => m.FlagCyprus),
+  FlagCzechRepublic: () => import('@ds-mo/icons/svg/flags/FlagCzechRepublic').then(m => m.FlagCzechRepublic),
+  FlagDenmark: () => import('@ds-mo/icons/svg/flags/FlagDenmark').then(m => m.FlagDenmark),
+  FlagEU: () => import('@ds-mo/icons/svg/flags/FlagEU').then(m => m.FlagEU),
+  FlagEstonia: () => import('@ds-mo/icons/svg/flags/FlagEstonia').then(m => m.FlagEstonia),
+  FlagFinland: () => import('@ds-mo/icons/svg/flags/FlagFinland').then(m => m.FlagFinland),
+  FlagFrance: () => import('@ds-mo/icons/svg/flags/FlagFrance').then(m => m.FlagFrance),
+  FlagGermany: () => import('@ds-mo/icons/svg/flags/FlagGermany').then(m => m.FlagGermany),
+  FlagGreece: () => import('@ds-mo/icons/svg/flags/FlagGreece').then(m => m.FlagGreece),
+  FlagHungary: () => import('@ds-mo/icons/svg/flags/FlagHungary').then(m => m.FlagHungary),
+  FlagIreland: () => import('@ds-mo/icons/svg/flags/FlagIreland').then(m => m.FlagIreland),
+  FlagItaly: () => import('@ds-mo/icons/svg/flags/FlagItaly').then(m => m.FlagItaly),
+  FlagLatvia: () => import('@ds-mo/icons/svg/flags/FlagLatvia').then(m => m.FlagLatvia),
+  FlagLithuania: () => import('@ds-mo/icons/svg/flags/FlagLithuania').then(m => m.FlagLithuania),
+  FlagLuxembourg: () => import('@ds-mo/icons/svg/flags/FlagLuxembourg').then(m => m.FlagLuxembourg),
+  FlagMalta: () => import('@ds-mo/icons/svg/flags/FlagMalta').then(m => m.FlagMalta),
+  FlagMexico: () => import('@ds-mo/icons/svg/flags/FlagMexico').then(m => m.FlagMexico),
+  FlagNetherlands: () => import('@ds-mo/icons/svg/flags/FlagNetherlands').then(m => m.FlagNetherlands),
+  FlagPoland: () => import('@ds-mo/icons/svg/flags/FlagPoland').then(m => m.FlagPoland),
+  FlagPortugal: () => import('@ds-mo/icons/svg/flags/FlagPortugal').then(m => m.FlagPortugal),
+  FlagRomania: () => import('@ds-mo/icons/svg/flags/FlagRomania').then(m => m.FlagRomania),
+  FlagSlovakia: () => import('@ds-mo/icons/svg/flags/FlagSlovakia').then(m => m.FlagSlovakia),
+  FlagSlovenia: () => import('@ds-mo/icons/svg/flags/FlagSlovenia').then(m => m.FlagSlovenia),
+  FlagSpain: () => import('@ds-mo/icons/svg/flags/FlagSpain').then(m => m.FlagSpain),
+  FlagSweden: () => import('@ds-mo/icons/svg/flags/FlagSweden').then(m => m.FlagSweden),
+  FlagUnitedKingdom: () => import('@ds-mo/icons/svg/flags/FlagUnitedKingdom').then(m => m.FlagUnitedKingdom),
+  FlagUnitedStates: () => import('@ds-mo/icons/svg/flags/FlagUnitedStates').then(m => m.FlagUnitedStates),
 };

package/src/wc/components/Icon/icon-cache.ts

@@ -0,0 +1,47 @@
+/**
+ * Shared SVG glyph cache for ds-icon.
+ *
+ * Keyed on a global symbol so every module instance (the compiled Stencil chunk
+ * inside dist/components and any direct source import, e.g. via `@ds-mo/ui/utils`)
+ * reads and writes the same cache. Without this, `registerIcons` called from an
+ * app would fill a different Map than the one ds-icon resolves from.
+ */
+const CACHE_KEY = Symbol.for('ds-mo.icon-svg-cache');
+
+type IconCacheMap = Map<string, string>;
+
+type GlobalWithIconCache = { [CACHE_KEY]?: IconCacheMap };
+
+export function iconCacheKey(name: string, flag: boolean): string {
+  return flag ? `flag:${name}` : `system:${name}`;
+}
+
+export function iconCache(): IconCacheMap {
+  const g = globalThis as GlobalWithIconCache;
+  return (g[CACHE_KEY] ??= new Map());
+}
+
+/**
+ * Pre-register glyphs so ds-icon renders them synchronously — no lazy-chunk
+ * fetch, no first-paint pop-in. Import the SVG strings from `@ds-mo/icons`
+ * in the app (statically, so they ship in the app's own bundle):
+ *
+ * ```ts
+ * import { Bell } from '@ds-mo/icons/svg/Bell';
+ * import { US } from '@ds-mo/icons/svg/flags/US';
+ * import { registerIcons } from '@ds-mo/ui/utils';
+ *
+ * registerIcons({ Bell });
+ * registerIcons({ US }, { flag: true });
+ * ```
+ *
+ * Icons that are not registered still work — they lazy-load on first render
+ * and stay cached afterwards.
+ */
+export function registerIcons(icons: Record<string, string>, options?: { flag?: boolean }): void {
+  const cache = iconCache();
+  const flag = options?.flag === true;
+  for (const [name, svg] of Object.entries(icons)) {
+    cache.set(iconCacheKey(name, flag), svg);
+  }
+}

package/src/wc/components/Icon/icon-svg.ts

@@ -0,0 +1,73 @@
+/**
+ * Glyph markup validation + Trusted-Types-safe parsing for ds-icon.
+ *
+ * Glyphs normally come from the trusted @ds-mo/icons build pipeline, but
+ * `registerIcons` accepts arbitrary app-provided strings and injection is a
+ * sink — so every glyph is validated at the render boundary. Injection uses
+ * parsed DOM nodes (never innerHTML), which keeps ds-icon working under a
+ * strict CSP with `require-trusted-types-for 'script'`.
+ */
+
+/** Structural view of an element so the walk is unit-testable without a DOM. */
+export interface IconSvgElementLike {
+  localName: string;
+  getAttributeNames(): string[];
+  getAttribute(name: string): string | null;
+  children: ArrayLike<IconSvgElementLike>;
+}
+
+/** Elements that can execute or embed foreign content — never valid in a glyph. */
+const FORBIDDEN_ELEMENTS = new Set([
+  'script',
+  'foreignobject',
+  'iframe',
+  'object',
+  'embed',
+  'animation', // SVG 1.2 external-content element (distinct from animate/animateTransform)
+]);
+
+function isValidIconSvgElement(el: IconSvgElementLike): boolean {
+  if (FORBIDDEN_ELEMENTS.has(el.localName.toLowerCase())) return false;
+
+  for (const attr of el.getAttributeNames()) {
+    const lower = attr.toLowerCase();
+    // Event handler attributes (onclick, onload, …) — any casing.
+    if (lower.startsWith('on')) return false;
+    // References must stay internal (#gradient-id); rejects javascript:, data:,
+    // and external URLs on <use>, <a>, <image>, …
+    if (lower === 'href' || lower === 'xlink:href') {
+      const value = el.getAttribute(attr) ?? '';
+      if (!value.startsWith('#')) return false;
+    }
+  }
+
+  for (let i = 0; i < el.children.length; i++) {
+    if (!isValidIconSvgElement(el.children[i])) return false;
+  }
+
+  return true;
+}
+
+/** True when `root` is an `<svg>` whose whole tree passes validation. */
+export function isValidIconSvgRoot(root: IconSvgElementLike | null): boolean {
+  return root != null && root.localName === 'svg' && isValidIconSvgElement(root);
+}
+
+/**
+ * Parse + validate glyph markup. Returns a detached `<svg>` element ready to
+ * append (appending adopts it into the document), or `null` when the markup
+ * is not well-formed XML, not rooted at `<svg>`, or fails validation —
+ * ds-icon renders an empty fixed-size box in that case.
+ */
+export function parseIconSvg(svg: string): SVGElement | null {
+  if (typeof DOMParser === 'undefined') return null;
+
+  const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
+  // Malformed XML yields a parsererror document (root or nested, per browser).
+  if (doc.querySelector('parsererror')) return null;
+
+  const root = doc.documentElement as unknown as IconSvgElementLike;
+  if (!isValidIconSvgRoot(root)) return null;
+
+  return doc.documentElement as unknown as SVGElement;
+}