@pine-ds/icons 9.4.4 → 9.5.1

package/dist/cjs/pds-icon.cjs.entry.js

@@ -51,7 +51,7 @@ const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;
 const pdsIconContent = new Map();
 const requests = new Map(); // eslint-disable-line @typescript-eslint/no-explicit-any
 let parser;
-const getSvgContent = (url, sanitize = false) => {
+const getSvgContent = (url, sanitize = false, retryCount = 0) => {
     let req = requests.get(url);
     if (!req) {
         if (typeof fetch != 'undefined' && typeof document !== 'undefined') {
@@ -59,30 +59,74 @@ const getSvgContent = (url, sanitize = false) => {
                 if (!parser) {
                     parser = new DOMParser();
                 }
-                const doc = parser.parseFromString(url, 'text/html');
-                const svg = doc.querySelector('svg');
-                if (svg) {
-                    pdsIconContent.set(url, svg.outerHTML);
+                try {
+                    const doc = parser.parseFromString(url, 'text/html');
+                    const svg = doc.querySelector('svg');
+                    if (svg) {
+                        pdsIconContent.set(url, svg.outerHTML);
+                    }
+                    else {
+                        console.warn(`No SVG found in data URL: ${url}`);
+                        pdsIconContent.set(url, '');
+                    }
+                }
+                catch (error) {
+                    console.error(`Failed to parse SVG data URL: ${url}`, error);
+                    pdsIconContent.set(url, '');
                 }
                 return Promise.resolve();
             }
             else {
-                // we don't have a request
-                req = fetch(url).then((rsp) => {
+                // Add retry logic and better error handling
+                req = fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Accept': 'image/svg+xml,text/plain,*/*'
+                    },
+                    cache: 'force-cache' // Aggressive caching for icons
+                }).then((rsp) => {
                     if (rsp.ok) {
                         return rsp.text().then((svgContent) => {
                             if (svgContent && sanitize !== false) {
                                 svgContent = validateContent(svgContent);
                             }
-                            pdsIconContent.set(url, svgContent || '');
+                            if (svgContent) {
+                                pdsIconContent.set(url, svgContent);
+                            }
+                            else {
+                                console.warn(`Empty SVG content received for: ${url}`);
+                                pdsIconContent.set(url, '');
+                            }
                         });
                     }
-                    pdsIconContent.set(url, '');
+                    else {
+                        throw new Error(`HTTP ${rsp.status}: ${rsp.statusText}`);
+                    }
+                }).catch((error) => {
+                    console.error(`Failed to fetch icon ${url}:`, error);
+                    // Retry logic - attempt up to 3 times with exponential backoff
+                    if (retryCount < 3) {
+                        const delay = Math.pow(2, retryCount) * 1000; // 1s, 2s, 4s
+                        console.log(`Retrying icon load in ${delay}ms (attempt ${retryCount + 1}/3): ${url}`);
+                        return new Promise((resolve) => {
+                            setTimeout(() => {
+                                // Clear the failed request from cache to allow retry
+                                requests.delete(url);
+                                resolve(getSvgContent(url, sanitize, retryCount + 1));
+                            }, delay);
+                        });
+                    }
+                    else {
+                        // Final failure - set empty content to prevent infinite loading
+                        pdsIconContent.set(url, '');
+                        throw error;
+                    }
                 });
                 requests.set(url, req);
             }
         }
         else {
+            console.warn('Fetch or document not available, setting empty icon content');
             pdsIconContent.set(url, '');
             return Promise.resolve();
         }
@@ -128,9 +172,14 @@ const PdsIcon = class {
     }
     componentDidLoad() {
         this.setCSSVariables();
-        if (!this.didLoadIcon) {
-            this.loadIcon();
-        }
+        // Always attempt to load icon, but add delay for IntersectionObserver to complete
+        setTimeout(() => {
+            if (!this.didLoadIcon || !this.svgContent) {
+                console.warn('Icon not loaded after component mount, forcing load attempt');
+                this.isVisible = true; // Force visibility for fallback loading
+                this.loadIcon();
+            }
+        }, 50);
     }
     componentWillLoad() {
         this.inheritedAttributes = index.inheritAttributes(this.el, ['aria-label']);
@@ -142,7 +191,17 @@ const PdsIcon = class {
         this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');
     }
     connectedCallback() {
+        // Set a fallback timeout in case IntersectionObserver never fires
+        // This prevents icons from never loading due to intersection issues
+        const fallbackTimeout = setTimeout(() => {
+            if (!this.isVisible) {
+                console.warn('IntersectionObserver timeout, forcing icon visibility');
+                this.isVisible = true;
+                this.loadIcon();
+            }
+        }, 100); // 100ms fallback
         this.waitUntilVisible(this.el, '50px', () => {
+            clearTimeout(fallbackTimeout);
             this.isVisible = true;
             this.loadIcon();
         });
@@ -157,14 +216,31 @@ const PdsIcon = class {
         this.setCSSVariables();
     }
     loadIcon() {
-        if (this.isVisible) {
+        {
             const url = index.getUrl(this);
             if (url) {
                 if (pdsIconContent.has(url)) {
                     this.svgContent = pdsIconContent.get(url);
                 }
                 else {
-                    getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));
+                    // Add comprehensive error handling and timeout
+                    const timeoutPromise = new Promise((_, reject) => {
+                        setTimeout(() => reject(new Error('Icon loading timeout')), 10000); // 10 second timeout
+                    });
+                    Promise.race([getSvgContent(url), timeoutPromise])
+                        .then(() => {
+                        this.svgContent = pdsIconContent.get(url);
+                        // Force re-render if content was loaded after initial render
+                        if (!this.svgContent) {
+                            console.warn(`Icon content not found after successful load: ${url}`);
+                        }
+                    })
+                        .catch((error) => {
+                        console.error(`Failed to load icon: ${url}`, error);
+                        // Set empty content to prevent infinite loading state
+                        pdsIconContent.set(url, '');
+                        this.svgContent = '';
+                    });
                 }
                 this.didLoadIcon = true;
             }
@@ -180,21 +256,54 @@ const PdsIcon = class {
             ? index.shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false
             : false;
         const shouldFlip = flipRtl || shouldIconAutoFlip;
-        return (index$1.h(index$1.Host, Object.assign({ key: 'bc8e46daa75df27a8039e0e767bdb43164ad7d4c', "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, alt: "", role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && index.isRTL(this.el) }) }, inheritedAttributes), this.svgContent ? (index$1.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (index$1.h("div", { class: "icon-inner" }))));
+        // Debug information when enabled
+        this.debugIconState();
+        return (index$1.h(index$1.Host, Object.assign({ key: '82420f9d474c932c9ed82bbf61b075cbbc67b6db', "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, alt: "", role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && index.isRTL(this.el) }) }, inheritedAttributes), this.svgContent ? (index$1.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (index$1.h("div", { class: "icon-inner" }))));
     }
     /*****
      * Private Methods
      ****/
+    debugIconState() {
+        if (typeof window !== 'undefined' && window.__PDS_ICON_DEBUG__) {
+            console.log('PDS Icon Debug:', {
+                name: this.name,
+                src: this.src,
+                icon: this.icon,
+                isVisible: this.isVisible,
+                didLoadIcon: this.didLoadIcon,
+                svgContent: this.svgContent ? 'loaded' : 'empty',
+                url: index.getUrl(this),
+                hasIntersectionObserver: !!this.io,
+                element: this.el
+            });
+        }
+    }
     waitUntilVisible(el, rootMargin, cb) {
         if (typeof window !== 'undefined' && (window).IntersectionObserver) {
-            const io = (this.io = new (window).IntersectionObserver((data) => {
-                if (data[0].isIntersecting) {
-                    io.disconnect();
-                    this.io = undefined;
-                    cb();
-                }
-            }, { rootMargin }));
-            io.observe(el);
+            try {
+                const io = (this.io = new (window).IntersectionObserver((data) => {
+                    if (data[0].isIntersecting) {
+                        io.disconnect();
+                        this.io = undefined;
+                        cb();
+                    }
+                }, { rootMargin }));
+                io.observe(el);
+                // Add a safety timeout for IntersectionObserver
+                setTimeout(() => {
+                    if (this.io) {
+                        console.warn('IntersectionObserver did not trigger within 5 seconds, forcing callback');
+                        this.io.disconnect();
+                        this.io = undefined;
+                        cb();
+                    }
+                }, 5000);
+            }
+            catch (error) {
+                console.error('IntersectionObserver initialization failed:', error);
+                // Fall back to immediate execution
+                cb();
+            }
         }
         else {
             // browser doesn't support IntersectionObserver

package/dist/cjs/pds-icon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-icon.entry.cjs.js","mappings":"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","names":["isStr","inheritAttributes","getUrl","getName","shouldRtlFlipIcon","h","Host","isRTL"],"sources":["src/components/pds-icon/validate.ts","src/components/pds-icon/request.ts","src/components/pds-icon/pds-icon.scss?tag=pds-icon&encapsulation=shadow","src/components/pds-icon/pds-icon.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-pds-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const name = elm.attributes[i].name;\n      if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as HTMLElement)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\nexport const isEncodedDataUrl = (url: string) => url.indexOf(';utf8,') !== -1;\n","import { isEncodedDataUrl, isSvgDataUrl, validateContent } from './validate';\n\nexport const pdsIconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>(); // eslint-disable-line @typescript-eslint/no-explicit-any\n\nlet parser: DOMParser;\n\nexport const getSvgContent = (url: string, sanitize = false) => {\n  let req = requests.get(url);\n\n  if(!req) {\n    if (typeof fetch != 'undefined' && typeof document !== 'undefined') {\n      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {\n        if (!parser) {\n          parser = new DOMParser();\n        }\n\n        const doc = parser.parseFromString(url, 'text/html');\n        const svg = doc.querySelector('svg');\n\n        if (svg) {\n          pdsIconContent.set(url, svg.outerHTML);\n        }\n\n        return Promise.resolve();\n      } else {\n        // we don't have a request\n        req = fetch(url).then((rsp) => {\n          if (rsp.ok) {\n            return rsp.text().then((svgContent) => {\n              if (svgContent && sanitize !== false) {\n                svgContent = validateContent(svgContent);\n              }\n              pdsIconContent.set(url, svgContent || '');\n            });\n          }\n          pdsIconContent.set(url, '');\n        });\n\n        requests.set(url, req);\n      }\n    } else {\n      pdsIconContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n}\n",":host {\n  --dimension-icon-height: 16px;\n  --dimension-icon-width: 16px;\n  --color-icon-fill: currentColor;\n\n  contain: strict;\n  display: inline-block;\n  fill: var(--color-icon-fill);\n  flex-shrink: 0;\n  height: var(--dimension-icon-height);\n  width: var(--dimension-icon-width);\n\n  .pdsicon {\n    fill: var(--color-icon-fill);\n  }\n}\n\n.pds-icon-fill-none {\n  fill: none;\n}\n\n.icon-inner,\n.pds-icon,\nsvg {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n/* :host-context is supported in chromium; :dir is supported in safari & firefox */\n:host(.flip-rtl):host-context([dir='rtl']) .icon-inner {\n  transform: scaleX(-1);\n}\n\n:host(.flip-rtl:dir(rtl)) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/**\n  * This is needed for WebKit otherwise the fallback\n  * will always cause the icon to be flipped if the document\n  * loads in RTL.\n  */\n:host(.flip-rtl:dir(ltr)) .icon-inner {\n  transform: scaleX(1);\n}\n\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, pdsIconContent } from './request';\nimport { getName, getUrl, inheritAttributes, isRTL, shouldRtlFlipIcon } from './utils';\n\n@Component({\n  tag: 'pds-icon',\n  assetsDirs: ['svg'],\n  styleUrl: 'pds-icon.scss',\n  shadow: true,\n})\nexport class PdsIcon {\n  private didLoadIcon = false;\n  private iconName: string | null = null;\n  private io?: IntersectionObserver;\n  private inheritedAttributes: { [k: string]: any } = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  @Element() el!: HTMLPdsIconElement;\n\n  @State() private ariaLabel?: string;\n  @State() private isVisible = false;\n  @State() private svgContent?: string;\n\n  /**\n   *\n   * The color of the icon\n   *\n   */\n  @Prop() color?: string;\n\n  /**\n   * Determines if the icon should be flipped when the `dir` is right-to-left (`\"rtl\"`).\n   * This is automatically enabled for icons that are in the `ICONS_TO_FLIP` list and\n   * when the `dir` is `\"rtl\"`. If `flipRtl` is set to `false`, the icon will not be flipped\n   * even if the `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * This is a combination of both `name` and `src`. If a `src` URL is detected,\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and sets the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The name of the icon to use from\n   * the built-in set.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The size of the icon. This can be\n   * 'small', 'regular', 'medium', 'large', or a\n   * custom value (40px, 1rem, etc)\n   *\n   */\n  @Prop({ reflect: true }) size?:\n    | 'small'   // 12px\n    | 'regular'  // 16px\n    | 'medium'  // 20px\n    | 'large'   // 24px\n    | 'auto'\n    | string = 'regular'\n\n  /**\n   *\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  private iconSize() {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const sizes: { [key: string]: any } = {\n      small: '12px',\n      regular: '16px',\n      medium: '20px',\n      large: '24px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  componentDidLoad() {\n    this.setCSSVariables();\n\n    if (!this.didLoadIcon) {\n      this.loadIcon();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);\n    this.setCSSVariables();\n  }\n\n  setCSSVariables() {\n    this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());\n    this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());\n    this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');\n  }\n\n  connectedCallback() {\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    })\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  @Watch('size')\n  @Watch('color')\n  updateStyles() {\n    this.setCSSVariables();\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (pdsIconContent.has(url)) {\n          this.svgContent = pdsIconContent.get(url);\n        } else {\n          getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));\n        }\n        this.didLoadIcon = true;\n      }\n    }\n\n    this.iconName = getName(this.name, this.icon);\n\n    if (this.iconName) {\n      this.ariaLabel = this.iconName.replace(/\\-/g, ' ');\n    }\n  }\n\n  render() {\n    const { ariaLabel, flipRtl, iconName,inheritedAttributes } = this;\n    const shouldIconAutoFlip = iconName\n      ? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false\n      : false;\n    const shouldFlip = flipRtl || shouldIconAutoFlip;\n\n    return (\n\n      <Host\n        aria-label={ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null }\n        alt=\"\"\n        role=\"img\"\n        class={{\n          ...createColorClasses(this.color),\n          'flip-rtl': shouldFlip,\n          'icon-rtl': shouldFlip && isRTL(this.el)\n        }}\n        {...inheritedAttributes}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    )\n  }\n\n  /*****\n   * Private Methods\n   ****/\n\n  private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {\n    if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {\n      const io = (this.io = new (window).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin },\n      ));\n\n      io.observe(el);\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  private hasAriaHidden = () => {\n    const { el } = this;\n\n    return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';\n  }\n}\n\nconst createColorClasses = (color: string | undefined) => {\n  return color\n   ? {\n       'pds-color': true,\n       [`pds-color-${color}`]: true,\n     }\n   : null;\n };\n"],"version":3}
+{"file":"pds-icon.entry.cjs.js","mappings":"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","names":["isStr","inheritAttributes","getUrl","getName","shouldRtlFlipIcon","h","Host","isRTL"],"sources":["src/components/pds-icon/validate.ts","src/components/pds-icon/request.ts","src/components/pds-icon/pds-icon.scss?tag=pds-icon&encapsulation=shadow","src/components/pds-icon/pds-icon.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-pds-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const name = elm.attributes[i].name;\n      if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as HTMLElement)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\nexport const isEncodedDataUrl = (url: string) => url.indexOf(';utf8,') !== -1;\n","import { isEncodedDataUrl, isSvgDataUrl, validateContent } from './validate';\n\nexport const pdsIconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>(); // eslint-disable-line @typescript-eslint/no-explicit-any\n\nlet parser: DOMParser;\n\nexport const getSvgContent = (url: string, sanitize = false, retryCount = 0) => {\n  let req = requests.get(url);\n\n  if(!req) {\n    if (typeof fetch != 'undefined' && typeof document !== 'undefined') {\n      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {\n        if (!parser) {\n          parser = new DOMParser();\n        }\n\n        try {\n          const doc = parser.parseFromString(url, 'text/html');\n          const svg = doc.querySelector('svg');\n\n          if (svg) {\n            pdsIconContent.set(url, svg.outerHTML);\n          } else {\n            console.warn(`No SVG found in data URL: ${url}`);\n            pdsIconContent.set(url, '');\n          }\n        } catch (error) {\n          console.error(`Failed to parse SVG data URL: ${url}`, error);\n          pdsIconContent.set(url, '');\n        }\n\n        return Promise.resolve();\n      } else {\n        // Add retry logic and better error handling\n        req = fetch(url, {\n          method: 'GET',\n          headers: {\n            'Accept': 'image/svg+xml,text/plain,*/*'\n          },\n          cache: 'force-cache' // Aggressive caching for icons\n        }).then((rsp) => {\n          if (rsp.ok) {\n            return rsp.text().then((svgContent) => {\n              if (svgContent && sanitize !== false) {\n                svgContent = validateContent(svgContent);\n              }\n              if (svgContent) {\n                pdsIconContent.set(url, svgContent);\n              } else {\n                console.warn(`Empty SVG content received for: ${url}`);\n                pdsIconContent.set(url, '');\n              }\n            });\n          } else {\n            throw new Error(`HTTP ${rsp.status}: ${rsp.statusText}`);\n          }\n        }).catch((error) => {\n          console.error(`Failed to fetch icon ${url}:`, error);\n\n          // Retry logic - attempt up to 3 times with exponential backoff\n          if (retryCount < 3) {\n            const delay = Math.pow(2, retryCount) * 1000; // 1s, 2s, 4s\n            console.log(`Retrying icon load in ${delay}ms (attempt ${retryCount + 1}/3): ${url}`);\n\n            return new Promise((resolve) => {\n              setTimeout(() => {\n                // Clear the failed request from cache to allow retry\n                requests.delete(url);\n                resolve(getSvgContent(url, sanitize, retryCount + 1));\n              }, delay);\n            });\n          } else {\n            // Final failure - set empty content to prevent infinite loading\n            pdsIconContent.set(url, '');\n            throw error;\n          }\n        });\n\n        requests.set(url, req);\n      }\n    } else {\n      console.warn('Fetch or document not available, setting empty icon content');\n      pdsIconContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n}\n",":host {\n  --dimension-icon-height: 16px;\n  --dimension-icon-width: 16px;\n  --color-icon-fill: currentColor;\n\n  contain: strict;\n  display: inline-block;\n  fill: var(--color-icon-fill);\n  flex-shrink: 0;\n  height: var(--dimension-icon-height);\n  width: var(--dimension-icon-width);\n\n  .pdsicon {\n    fill: var(--color-icon-fill);\n  }\n}\n\n.pds-icon-fill-none {\n  fill: none;\n}\n\n.icon-inner,\n.pds-icon,\nsvg {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n/* :host-context is supported in chromium; :dir is supported in safari & firefox */\n:host(.flip-rtl):host-context([dir='rtl']) .icon-inner {\n  transform: scaleX(-1);\n}\n\n:host(.flip-rtl:dir(rtl)) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/**\n  * This is needed for WebKit otherwise the fallback\n  * will always cause the icon to be flipped if the document\n  * loads in RTL.\n  */\n:host(.flip-rtl:dir(ltr)) .icon-inner {\n  transform: scaleX(1);\n}\n\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, pdsIconContent } from './request';\nimport { getName, getUrl, inheritAttributes, isRTL, shouldRtlFlipIcon } from './utils';\n\n@Component({\n  tag: 'pds-icon',\n  assetsDirs: ['svg'],\n  styleUrl: 'pds-icon.scss',\n  shadow: true,\n})\nexport class PdsIcon {\n  private didLoadIcon = false;\n  private iconName: string | null = null;\n  private io?: IntersectionObserver;\n  private inheritedAttributes: { [k: string]: any } = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  @Element() el!: HTMLPdsIconElement;\n\n  @State() private ariaLabel?: string;\n  @State() private isVisible = false;\n  @State() private svgContent?: string;\n\n  /**\n   *\n   * The color of the icon\n   *\n   */\n  @Prop() color?: string;\n\n  /**\n   * Determines if the icon should be flipped when the `dir` is right-to-left (`\"rtl\"`).\n   * This is automatically enabled for icons that are in the `ICONS_TO_FLIP` list and\n   * when the `dir` is `\"rtl\"`. If `flipRtl` is set to `false`, the icon will not be flipped\n   * even if the `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * This is a combination of both `name` and `src`. If a `src` URL is detected,\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and sets the `name` property.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The name of the icon to use from\n   * the built-in set.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The size of the icon. This can be\n   * 'small', 'regular', 'medium', 'large', or a\n   * custom value (40px, 1rem, etc)\n   *\n   */\n  @Prop({ reflect: true }) size?:\n    | 'small'   // 12px\n    | 'regular'  // 16px\n    | 'medium'  // 20px\n    | 'large'   // 24px\n    | 'auto'\n    | string = 'regular'\n\n  /**\n   *\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  private iconSize() {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const sizes: { [key: string]: any } = {\n      small: '12px',\n      regular: '16px',\n      medium: '20px',\n      large: '24px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  componentDidLoad() {\n    this.setCSSVariables();\n\n    // Always attempt to load icon, but add delay for IntersectionObserver to complete\n    setTimeout(() => {\n      if (!this.didLoadIcon || !this.svgContent) {\n        console.warn('Icon not loaded after component mount, forcing load attempt');\n        this.isVisible = true; // Force visibility for fallback loading\n        this.loadIcon();\n      }\n    }, 50);\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);\n    this.setCSSVariables();\n  }\n\n  setCSSVariables() {\n    this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());\n    this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());\n    this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');\n  }\n\n  connectedCallback() {\n    // Set a fallback timeout in case IntersectionObserver never fires\n    // This prevents icons from never loading due to intersection issues\n    const fallbackTimeout = setTimeout(() => {\n      if (!this.isVisible) {\n        console.warn('IntersectionObserver timeout, forcing icon visibility');\n        this.isVisible = true;\n        this.loadIcon();\n      }\n    }, 100); // 100ms fallback\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      clearTimeout(fallbackTimeout);\n      this.isVisible = true;\n      this.loadIcon();\n    })\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  @Watch('size')\n  @Watch('color')\n  updateStyles() {\n    this.setCSSVariables();\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser) {\n      const url = getUrl(this);\n      if (url) {\n        if (pdsIconContent.has(url)) {\n          this.svgContent = pdsIconContent.get(url);\n        } else {\n          // Add comprehensive error handling and timeout\n          const timeoutPromise = new Promise((_, reject) => {\n            setTimeout(() => reject(new Error('Icon loading timeout')), 10000); // 10 second timeout\n          });\n\n          Promise.race([getSvgContent(url), timeoutPromise])\n            .then(() => {\n              this.svgContent = pdsIconContent.get(url);\n              // Force re-render if content was loaded after initial render\n              if (!this.svgContent) {\n                console.warn(`Icon content not found after successful load: ${url}`);\n              }\n            })\n            .catch((error) => {\n              console.error(`Failed to load icon: ${url}`, error);\n              // Set empty content to prevent infinite loading state\n              pdsIconContent.set(url, '');\n              this.svgContent = '';\n            });\n        }\n        this.didLoadIcon = true;\n      }\n    }\n\n    this.iconName = getName(this.name, this.icon);\n\n    if (this.iconName) {\n      this.ariaLabel = this.iconName.replace(/\\-/g, ' ');\n    }\n  }\n\n  render() {\n    const { ariaLabel, flipRtl, iconName,inheritedAttributes } = this;\n    const shouldIconAutoFlip = iconName\n      ? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false\n      : false;\n    const shouldFlip = flipRtl || shouldIconAutoFlip;\n\n    // Debug information when enabled\n    this.debugIconState();\n\n    return (\n\n      <Host\n        aria-label={ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null }\n        alt=\"\"\n        role=\"img\"\n        class={{\n          ...createColorClasses(this.color),\n          'flip-rtl': shouldFlip,\n          'icon-rtl': shouldFlip && isRTL(this.el)\n        }}\n        {...inheritedAttributes}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    )\n  }\n\n  /*****\n   * Private Methods\n   ****/\n\n  private debugIconState() {\n    if (typeof window !== 'undefined' && (window as Window & { __PDS_ICON_DEBUG__?: boolean }).__PDS_ICON_DEBUG__) {\n      console.log('PDS Icon Debug:', {\n        name: this.name,\n        src: this.src,\n        icon: this.icon,\n        isVisible: this.isVisible,\n        didLoadIcon: this.didLoadIcon,\n        svgContent: this.svgContent ? 'loaded' : 'empty',\n        url: getUrl(this),\n        hasIntersectionObserver: !!this.io,\n        element: this.el\n      });\n    }\n  }\n\n  private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {\n    if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {\n      try {\n        const io = (this.io = new (window).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].isIntersecting) {\n              io.disconnect();\n              this.io = undefined;\n              cb();\n            }\n          },\n          { rootMargin },\n        ));\n\n        io.observe(el);\n\n        // Add a safety timeout for IntersectionObserver\n        setTimeout(() => {\n          if (this.io) {\n            console.warn('IntersectionObserver did not trigger within 5 seconds, forcing callback');\n            this.io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        }, 5000);\n      } catch (error) {\n        console.error('IntersectionObserver initialization failed:', error);\n        // Fall back to immediate execution\n        cb();\n      }\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  private hasAriaHidden = () => {\n    const { el } = this;\n\n    return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';\n  }\n}\n\nconst createColorClasses = (color: string | undefined) => {\n  return color\n   ? {\n       'pds-color': true,\n       [`pds-color-${color}`]: true,\n     }\n   : null;\n };\n"],"version":3}

package/dist/cjs/pds-icon.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-icon.entry.cjs.js","sources":["src/components/pds-icon/validate.ts","src/components/pds-icon/request.ts","src/components/pds-icon/pds-icon.scss?tag=pds-icon&encapsulation=shadow","src/components/pds-icon/pds-icon.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-pds-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const name = elm.attributes[i].name;\n      if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as HTMLElement)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\nexport const isEncodedDataUrl = (url: string) => url.indexOf(';utf8,') !== -1;\n","import { isEncodedDataUrl, isSvgDataUrl, validateContent } from './validate';\n\nexport const pdsIconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>(); // eslint-disable-line @typescript-eslint/no-explicit-any\n\nlet parser: DOMParser;\n\nexport const getSvgContent = (url: string, sanitize = false) => {\n  let req = requests.get(url);\n\n  if(!req) {\n    if (typeof fetch != 'undefined' && typeof document !== 'undefined') {\n      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {\n        if (!parser) {\n          parser = new DOMParser();\n        }\n\n        const doc = parser.parseFromString(url, 'text/html');\n        const svg = doc.querySelector('svg');\n\n        if (svg) {\n          pdsIconContent.set(url, svg.outerHTML);\n        }\n\n        return Promise.resolve();\n      } else {\n        // we don't have a request\n        req = fetch(url).then((rsp) => {\n          if (rsp.ok) {\n            return rsp.text().then((svgContent) => {\n              if (svgContent && sanitize !== false) {\n                svgContent = validateContent(svgContent);\n              }\n              pdsIconContent.set(url, svgContent || '');\n            });\n          }\n          pdsIconContent.set(url, '');\n        });\n\n        requests.set(url, req);\n      }\n    } else {\n      pdsIconContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n}\n",":host {\n  --dimension-icon-height: 16px;\n  --dimension-icon-width: 16px;\n  --color-icon-fill: currentColor;\n\n  contain: strict;\n  display: inline-block;\n  fill: var(--color-icon-fill);\n  flex-shrink: 0;\n  height: var(--dimension-icon-height);\n  width: var(--dimension-icon-width);\n\n  .pdsicon {\n    fill: var(--color-icon-fill);\n  }\n}\n\n.pds-icon-fill-none {\n  fill: none;\n}\n\n.icon-inner,\n.pds-icon,\nsvg {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n/* :host-context is supported in chromium; :dir is supported in safari & firefox */\n:host(.flip-rtl):host-context([dir='rtl']) .icon-inner {\n  transform: scaleX(-1);\n}\n\n:host(.flip-rtl:dir(rtl)) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/**\n  * This is needed for WebKit otherwise the fallback\n  * will always cause the icon to be flipped if the document\n  * loads in RTL.\n  */\n:host(.flip-rtl:dir(ltr)) .icon-inner {\n  transform: scaleX(1);\n}\n\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, pdsIconContent } from './request';\nimport { getName, getUrl, inheritAttributes, isRTL, shouldRtlFlipIcon } from './utils';\n\n@Component({\n  tag: 'pds-icon',\n  assetsDirs: ['svg'],\n  styleUrl: 'pds-icon.scss',\n  shadow: true,\n})\nexport class PdsIcon {\n  private didLoadIcon = false;\n  private iconName: string | null = null;\n  private io?: IntersectionObserver;\n  private inheritedAttributes: { [k: string]: any } = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  @Element() el!: HTMLPdsIconElement;\n\n  @State() private ariaLabel?: string;\n  @State() private isVisible = false;\n  @State() private svgContent?: string;\n\n  /**\n   *\n   * The color of the icon\n   *\n   */\n  @Prop() color?: string;\n\n  /**\n   * Determines if the icon should be flipped when the `dir` is right-to-left (`\"rtl\"`).\n   * This is automatically enabled for icons that are in the `ICONS_TO_FLIP` list and\n   * when the `dir` is `\"rtl\"`. If `flipRtl` is set to `false`, the icon will not be flipped\n   * even if the `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * This is a combination of both `name` and `src`. If a `src` URL is detected,\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and sets the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The name of the icon to use from\n   * the built-in set.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The size of the icon. This can be\n   * 'small', 'regular', 'medium', 'large', or a\n   * custom value (40px, 1rem, etc)\n   *\n   */\n  @Prop({ reflect: true }) size?:\n    | 'small'   // 12px\n    | 'regular'  // 16px\n    | 'medium'  // 20px\n    | 'large'   // 24px\n    | 'auto'\n    | string = 'regular'\n\n  /**\n   *\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  private iconSize() {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const sizes: { [key: string]: any } = {\n      small: '12px',\n      regular: '16px',\n      medium: '20px',\n      large: '24px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  componentDidLoad() {\n    this.setCSSVariables();\n\n    if (!this.didLoadIcon) {\n      this.loadIcon();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);\n    this.setCSSVariables();\n  }\n\n  setCSSVariables() {\n    this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());\n    this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());\n    this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');\n  }\n\n  connectedCallback() {\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    })\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  @Watch('size')\n  @Watch('color')\n  updateStyles() {\n    this.setCSSVariables();\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (pdsIconContent.has(url)) {\n          this.svgContent = pdsIconContent.get(url);\n        } else {\n          getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));\n        }\n        this.didLoadIcon = true;\n      }\n    }\n\n    this.iconName = getName(this.name, this.icon);\n\n    if (this.iconName) {\n      this.ariaLabel = this.iconName.replace(/\\-/g, ' ');\n    }\n  }\n\n  render() {\n    const { ariaLabel, flipRtl, iconName,inheritedAttributes } = this;\n    const shouldIconAutoFlip = iconName\n      ? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false\n      : false;\n    const shouldFlip = flipRtl || shouldIconAutoFlip;\n\n    return (\n\n      <Host\n        aria-label={ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null }\n        alt=\"\"\n        role=\"img\"\n        class={{\n          ...createColorClasses(this.color),\n          'flip-rtl': shouldFlip,\n          'icon-rtl': shouldFlip && isRTL(this.el)\n        }}\n        {...inheritedAttributes}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    )\n  }\n\n  /*****\n   * Private Methods\n   ****/\n\n  private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {\n    if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {\n      const io = (this.io = new (window).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin },\n      ));\n\n      io.observe(el);\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  private hasAriaHidden = () => {\n    const { el } = this;\n\n    return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';\n  }\n}\n\nconst createColorClasses = (color: string | undefined) => {\n  return color\n   ? {\n       'pds-color': true,\n       [`pds-color-${color}`]: true,\n     }\n   : null;\n };\n"],"names":["isStr","inheritAttributes","getUrl","getName","shouldRtlFlipIcon","h","Host","isRTL"],"mappings":"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"}
+{"version":3,"file":"pds-icon.entry.cjs.js","sources":["src/components/pds-icon/validate.ts","src/components/pds-icon/request.ts","src/components/pds-icon/pds-icon.scss?tag=pds-icon&encapsulation=shadow","src/components/pds-icon/pds-icon.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-pds-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const name = elm.attributes[i].name;\n      if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as HTMLElement)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\nexport const isEncodedDataUrl = (url: string) => url.indexOf(';utf8,') !== -1;\n","import { isEncodedDataUrl, isSvgDataUrl, validateContent } from './validate';\n\nexport const pdsIconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>(); // eslint-disable-line @typescript-eslint/no-explicit-any\n\nlet parser: DOMParser;\n\nexport const getSvgContent = (url: string, sanitize = false, retryCount = 0) => {\n  let req = requests.get(url);\n\n  if(!req) {\n    if (typeof fetch != 'undefined' && typeof document !== 'undefined') {\n      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {\n        if (!parser) {\n          parser = new DOMParser();\n        }\n\n        try {\n          const doc = parser.parseFromString(url, 'text/html');\n          const svg = doc.querySelector('svg');\n\n          if (svg) {\n            pdsIconContent.set(url, svg.outerHTML);\n          } else {\n            console.warn(`No SVG found in data URL: ${url}`);\n            pdsIconContent.set(url, '');\n          }\n        } catch (error) {\n          console.error(`Failed to parse SVG data URL: ${url}`, error);\n          pdsIconContent.set(url, '');\n        }\n\n        return Promise.resolve();\n      } else {\n        // Add retry logic and better error handling\n        req = fetch(url, {\n          method: 'GET',\n          headers: {\n            'Accept': 'image/svg+xml,text/plain,*/*'\n          },\n          cache: 'force-cache' // Aggressive caching for icons\n        }).then((rsp) => {\n          if (rsp.ok) {\n            return rsp.text().then((svgContent) => {\n              if (svgContent && sanitize !== false) {\n                svgContent = validateContent(svgContent);\n              }\n              if (svgContent) {\n                pdsIconContent.set(url, svgContent);\n              } else {\n                console.warn(`Empty SVG content received for: ${url}`);\n                pdsIconContent.set(url, '');\n              }\n            });\n          } else {\n            throw new Error(`HTTP ${rsp.status}: ${rsp.statusText}`);\n          }\n        }).catch((error) => {\n          console.error(`Failed to fetch icon ${url}:`, error);\n\n          // Retry logic - attempt up to 3 times with exponential backoff\n          if (retryCount < 3) {\n            const delay = Math.pow(2, retryCount) * 1000; // 1s, 2s, 4s\n            console.log(`Retrying icon load in ${delay}ms (attempt ${retryCount + 1}/3): ${url}`);\n\n            return new Promise((resolve) => {\n              setTimeout(() => {\n                // Clear the failed request from cache to allow retry\n                requests.delete(url);\n                resolve(getSvgContent(url, sanitize, retryCount + 1));\n              }, delay);\n            });\n          } else {\n            // Final failure - set empty content to prevent infinite loading\n            pdsIconContent.set(url, '');\n            throw error;\n          }\n        });\n\n        requests.set(url, req);\n      }\n    } else {\n      console.warn('Fetch or document not available, setting empty icon content');\n      pdsIconContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n}\n",":host {\n  --dimension-icon-height: 16px;\n  --dimension-icon-width: 16px;\n  --color-icon-fill: currentColor;\n\n  contain: strict;\n  display: inline-block;\n  fill: var(--color-icon-fill);\n  flex-shrink: 0;\n  height: var(--dimension-icon-height);\n  width: var(--dimension-icon-width);\n\n  .pdsicon {\n    fill: var(--color-icon-fill);\n  }\n}\n\n.pds-icon-fill-none {\n  fill: none;\n}\n\n.icon-inner,\n.pds-icon,\nsvg {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n/* :host-context is supported in chromium; :dir is supported in safari & firefox */\n:host(.flip-rtl):host-context([dir='rtl']) .icon-inner {\n  transform: scaleX(-1);\n}\n\n:host(.flip-rtl:dir(rtl)) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/**\n  * This is needed for WebKit otherwise the fallback\n  * will always cause the icon to be flipped if the document\n  * loads in RTL.\n  */\n:host(.flip-rtl:dir(ltr)) .icon-inner {\n  transform: scaleX(1);\n}\n\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, pdsIconContent } from './request';\nimport { getName, getUrl, inheritAttributes, isRTL, shouldRtlFlipIcon } from './utils';\n\n@Component({\n  tag: 'pds-icon',\n  assetsDirs: ['svg'],\n  styleUrl: 'pds-icon.scss',\n  shadow: true,\n})\nexport class PdsIcon {\n  private didLoadIcon = false;\n  private iconName: string | null = null;\n  private io?: IntersectionObserver;\n  private inheritedAttributes: { [k: string]: any } = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  @Element() el!: HTMLPdsIconElement;\n\n  @State() private ariaLabel?: string;\n  @State() private isVisible = false;\n  @State() private svgContent?: string;\n\n  /**\n   *\n   * The color of the icon\n   *\n   */\n  @Prop() color?: string;\n\n  /**\n   * Determines if the icon should be flipped when the `dir` is right-to-left (`\"rtl\"`).\n   * This is automatically enabled for icons that are in the `ICONS_TO_FLIP` list and\n   * when the `dir` is `\"rtl\"`. If `flipRtl` is set to `false`, the icon will not be flipped\n   * even if the `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * This is a combination of both `name` and `src`. If a `src` URL is detected,\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and sets the `name` property.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The name of the icon to use from\n   * the built-in set.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The size of the icon. This can be\n   * 'small', 'regular', 'medium', 'large', or a\n   * custom value (40px, 1rem, etc)\n   *\n   */\n  @Prop({ reflect: true }) size?:\n    | 'small'   // 12px\n    | 'regular'  // 16px\n    | 'medium'  // 20px\n    | 'large'   // 24px\n    | 'auto'\n    | string = 'regular'\n\n  /**\n   *\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  private iconSize() {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const sizes: { [key: string]: any } = {\n      small: '12px',\n      regular: '16px',\n      medium: '20px',\n      large: '24px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  componentDidLoad() {\n    this.setCSSVariables();\n\n    // Always attempt to load icon, but add delay for IntersectionObserver to complete\n    setTimeout(() => {\n      if (!this.didLoadIcon || !this.svgContent) {\n        console.warn('Icon not loaded after component mount, forcing load attempt');\n        this.isVisible = true; // Force visibility for fallback loading\n        this.loadIcon();\n      }\n    }, 50);\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);\n    this.setCSSVariables();\n  }\n\n  setCSSVariables() {\n    this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());\n    this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());\n    this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');\n  }\n\n  connectedCallback() {\n    // Set a fallback timeout in case IntersectionObserver never fires\n    // This prevents icons from never loading due to intersection issues\n    const fallbackTimeout = setTimeout(() => {\n      if (!this.isVisible) {\n        console.warn('IntersectionObserver timeout, forcing icon visibility');\n        this.isVisible = true;\n        this.loadIcon();\n      }\n    }, 100); // 100ms fallback\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      clearTimeout(fallbackTimeout);\n      this.isVisible = true;\n      this.loadIcon();\n    })\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  @Watch('size')\n  @Watch('color')\n  updateStyles() {\n    this.setCSSVariables();\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser) {\n      const url = getUrl(this);\n      if (url) {\n        if (pdsIconContent.has(url)) {\n          this.svgContent = pdsIconContent.get(url);\n        } else {\n          // Add comprehensive error handling and timeout\n          const timeoutPromise = new Promise((_, reject) => {\n            setTimeout(() => reject(new Error('Icon loading timeout')), 10000); // 10 second timeout\n          });\n\n          Promise.race([getSvgContent(url), timeoutPromise])\n            .then(() => {\n              this.svgContent = pdsIconContent.get(url);\n              // Force re-render if content was loaded after initial render\n              if (!this.svgContent) {\n                console.warn(`Icon content not found after successful load: ${url}`);\n              }\n            })\n            .catch((error) => {\n              console.error(`Failed to load icon: ${url}`, error);\n              // Set empty content to prevent infinite loading state\n              pdsIconContent.set(url, '');\n              this.svgContent = '';\n            });\n        }\n        this.didLoadIcon = true;\n      }\n    }\n\n    this.iconName = getName(this.name, this.icon);\n\n    if (this.iconName) {\n      this.ariaLabel = this.iconName.replace(/\\-/g, ' ');\n    }\n  }\n\n  render() {\n    const { ariaLabel, flipRtl, iconName,inheritedAttributes } = this;\n    const shouldIconAutoFlip = iconName\n      ? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false\n      : false;\n    const shouldFlip = flipRtl || shouldIconAutoFlip;\n\n    // Debug information when enabled\n    this.debugIconState();\n\n    return (\n\n      <Host\n        aria-label={ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null }\n        alt=\"\"\n        role=\"img\"\n        class={{\n          ...createColorClasses(this.color),\n          'flip-rtl': shouldFlip,\n          'icon-rtl': shouldFlip && isRTL(this.el)\n        }}\n        {...inheritedAttributes}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    )\n  }\n\n  /*****\n   * Private Methods\n   ****/\n\n  private debugIconState() {\n    if (typeof window !== 'undefined' && (window as Window & { __PDS_ICON_DEBUG__?: boolean }).__PDS_ICON_DEBUG__) {\n      console.log('PDS Icon Debug:', {\n        name: this.name,\n        src: this.src,\n        icon: this.icon,\n        isVisible: this.isVisible,\n        didLoadIcon: this.didLoadIcon,\n        svgContent: this.svgContent ? 'loaded' : 'empty',\n        url: getUrl(this),\n        hasIntersectionObserver: !!this.io,\n        element: this.el\n      });\n    }\n  }\n\n  private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {\n    if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {\n      try {\n        const io = (this.io = new (window).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].isIntersecting) {\n              io.disconnect();\n              this.io = undefined;\n              cb();\n            }\n          },\n          { rootMargin },\n        ));\n\n        io.observe(el);\n\n        // Add a safety timeout for IntersectionObserver\n        setTimeout(() => {\n          if (this.io) {\n            console.warn('IntersectionObserver did not trigger within 5 seconds, forcing callback');\n            this.io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        }, 5000);\n      } catch (error) {\n        console.error('IntersectionObserver initialization failed:', error);\n        // Fall back to immediate execution\n        cb();\n      }\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  private hasAriaHidden = () => {\n    const { el } = this;\n\n    return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';\n  }\n}\n\nconst createColorClasses = (color: string | undefined) => {\n  return color\n   ? {\n       'pds-color': true,\n       [`pds-color-${color}`]: true,\n     }\n   : null;\n };\n"],"names":["isStr","inheritAttributes","getUrl","getName","shouldRtlFlipIcon","h","Host","isRTL"],"mappings":"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"}

package/dist/cjs/pds-icons.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"flipRtl":[4,"flip-rtl"],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]]], options);
+  return index.bootstrapLazy([["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"flipRtl":[4,"flip-rtl"],"icon":[1],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/pds-icon/pds-icon.js

@@ -36,9 +36,14 @@ export class PdsIcon {
     }
     componentDidLoad() {
         this.setCSSVariables();
-        if (!this.didLoadIcon) {
-            this.loadIcon();
-        }
+        // Always attempt to load icon, but add delay for IntersectionObserver to complete
+        setTimeout(() => {
+            if (!this.didLoadIcon || !this.svgContent) {
+                console.warn('Icon not loaded after component mount, forcing load attempt');
+                this.isVisible = true; // Force visibility for fallback loading
+                this.loadIcon();
+            }
+        }, 50);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
@@ -50,7 +55,17 @@ export class PdsIcon {
         this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');
     }
     connectedCallback() {
+        // Set a fallback timeout in case IntersectionObserver never fires
+        // This prevents icons from never loading due to intersection issues
+        const fallbackTimeout = setTimeout(() => {
+            if (!this.isVisible) {
+                console.warn('IntersectionObserver timeout, forcing icon visibility');
+                this.isVisible = true;
+                this.loadIcon();
+            }
+        }, 100); // 100ms fallback
         this.waitUntilVisible(this.el, '50px', () => {
+            clearTimeout(fallbackTimeout);
             this.isVisible = true;
             this.loadIcon();
         });
@@ -65,14 +80,31 @@ export class PdsIcon {
         this.setCSSVariables();
     }
     loadIcon() {
-        if (Build.isBrowser && this.isVisible) {
+        if (Build.isBrowser) {
             const url = getUrl(this);
             if (url) {
                 if (pdsIconContent.has(url)) {
                     this.svgContent = pdsIconContent.get(url);
                 }
                 else {
-                    getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));
+                    // Add comprehensive error handling and timeout
+                    const timeoutPromise = new Promise((_, reject) => {
+                        setTimeout(() => reject(new Error('Icon loading timeout')), 10000); // 10 second timeout
+                    });
+                    Promise.race([getSvgContent(url), timeoutPromise])
+                        .then(() => {
+                        this.svgContent = pdsIconContent.get(url);
+                        // Force re-render if content was loaded after initial render
+                        if (!this.svgContent) {
+                            console.warn(`Icon content not found after successful load: ${url}`);
+                        }
+                    })
+                        .catch((error) => {
+                        console.error(`Failed to load icon: ${url}`, error);
+                        // Set empty content to prevent infinite loading state
+                        pdsIconContent.set(url, '');
+                        this.svgContent = '';
+                    });
                 }
                 this.didLoadIcon = true;
             }
@@ -88,21 +120,54 @@ export class PdsIcon {
             ? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false
             : false;
         const shouldFlip = flipRtl || shouldIconAutoFlip;
-        return (h(Host, Object.assign({ key: 'bc8e46daa75df27a8039e0e767bdb43164ad7d4c', "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, alt: "", role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && isRTL(this.el) }) }, inheritedAttributes), Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+        // Debug information when enabled
+        this.debugIconState();
+        return (h(Host, Object.assign({ key: '82420f9d474c932c9ed82bbf61b075cbbc67b6db', "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, alt: "", role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && isRTL(this.el) }) }, inheritedAttributes), Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
     }
     /*****
      * Private Methods
      ****/
+    debugIconState() {
+        if (typeof window !== 'undefined' && window.__PDS_ICON_DEBUG__) {
+            console.log('PDS Icon Debug:', {
+                name: this.name,
+                src: this.src,
+                icon: this.icon,
+                isVisible: this.isVisible,
+                didLoadIcon: this.didLoadIcon,
+                svgContent: this.svgContent ? 'loaded' : 'empty',
+                url: getUrl(this),
+                hasIntersectionObserver: !!this.io,
+                element: this.el
+            });
+        }
+    }
     waitUntilVisible(el, rootMargin, cb) {
         if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {
-            const io = (this.io = new (window).IntersectionObserver((data) => {
-                if (data[0].isIntersecting) {
-                    io.disconnect();
-                    this.io = undefined;
-                    cb();
-                }
-            }, { rootMargin }));
-            io.observe(el);
+            try {
+                const io = (this.io = new (window).IntersectionObserver((data) => {
+                    if (data[0].isIntersecting) {
+                        io.disconnect();
+                        this.io = undefined;
+                        cb();
+                    }
+                }, { rootMargin }));
+                io.observe(el);
+                // Add a safety timeout for IntersectionObserver
+                setTimeout(() => {
+                    if (this.io) {
+                        console.warn('IntersectionObserver did not trigger within 5 seconds, forcing callback');
+                        this.io.disconnect();
+                        this.io = undefined;
+                        cb();
+                    }
+                }, 5000);
+            }
+            catch (error) {
+                console.error('IntersectionObserver initialization failed:', error);
+                // Fall back to immediate execution
+                cb();
+            }
         }
         else {
             // browser doesn't support IntersectionObserver
@@ -164,11 +229,11 @@ export class PdsIcon {
                 "reflect": false
             },
             "icon": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,