@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-2a33b470.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
 
 let missingAssetPathWarning = false;
 /**
@@ -16,13 +16,13 @@ const getAssetPath = (path) => {
     // Get the asset path from the window object if available
     const windowAssetPath = window.__PINE_ASSET_PATH__;
     // Set the CDN Asset path using the latest version
-    const cdnAssetPath = 'https://cdn.jsdelivr.net/npm/@pine-ds/icons/dist/pds-icons/';
-    const assetBasePath = metaPineAssetPath || windowAssetPath || cdnAssetPath || '/';
+    const cdnAssetPath = 'https://cdn.jsdelivr.net/npm/@pine-ds/icons/dist/';
+    const assetBasePath = metaPineAssetPath || windowAssetPath || cdnAssetPath;
     // Display a warning if the assets are fetched from the CDN.
     if (assetBasePath.startsWith('https://cdn.jsdelivr.net/npm/') && !missingAssetPathWarning) {
         missingAssetPathWarning = true;
         console.warn(`
-      Fetching Pine asssets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and setting the path accordingly.\n\nFor more information you read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/resources-assets--docs
+      Fetching Pine assets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and set the path accordingly.\n\nFor more information, read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/resources-assets--docs
     `);
     }
     let assetPath = path;
@@ -98,13 +98,26 @@ const getUrl = (pdsIcon) => {
     }
     return null;
 };
+/**
+ * Returns `true` if the document or host element
+ * has a `dir` set to `rtl`. The host value will always
+ * take priority over the root document value.
+ */
+const isRTL = (hostEl) => {
+    if (hostEl) {
+        if (hostEl.dir !== '') {
+            return hostEl.dir.toLowerCase() === 'rtl';
+        }
+    }
+    return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
+};
 const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
 const isStr = (val) => typeof val === 'string'; // eslint-disable-line @typescript-eslint/no-explicit-any
 const toLower = (val) => val.toLowerCase();
 /**
  * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `ion-input` should inherit
- * the `title` attribute that developers set directly on `ion-input`. This
+ * set on the host. For example, the inner input in `pds-input` should inherit
+ * the `title` attribute that developers set directly on `pds-input`. This
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
  *
@@ -124,6 +137,78 @@ const inheritAttributes = (el, attributes = []) => {
     });
     return attributeObject;
 };
+/**
+ * Determines if an icon should be flipped when RTL is enabled
+ * @param iconName - The name of the icon to check
+ * @param hostEl - Optional host element to check for RTL direction
+ * @returns {boolean} - True if the icon should be flipped in RTL mode, false otherwise
+ */
+const shouldRtlFlipIcon = (iconName, hostEl) => {
+    // First check if we're in RTL mode
+    const rtlEnabled = isRTL(hostEl);
+    // Only flip if we're in RTL mode and the icon is in the flip list
+    return rtlEnabled && ICONS_TO_FLIP.includes(iconName);
+};
+/**
+ * Array of available icon names
+ */
+const ICONS_TO_FLIP = [
+    'align-horizontal-bottom',
+    'align-horizontal-center',
+    'align-horizontal-top',
+    'align-left',
+    'align-right',
+    'align-vertical-left',
+    'align-vertical-right',
+    'arrow-corner',
+    'arrow-left',
+    'arrow-right',
+    'calendar-schedule',
+    'caret-left',
+    'caret-right',
+    'cart',
+    'cart-add',
+    'comment',
+    'comment-no',
+    'conversation',
+    'copy',
+    'copy-07',
+    'delete-key',
+    'delete-x',
+    'downsell',
+    'drawer-collapse',
+    'drawer-expand',
+    'duplicate',
+    'feedback',
+    'file-lock',
+    'file-search',
+    'form-field',
+    'form-filled',
+    'left-small',
+    'launch',
+    'list-bullet',
+    'list-numbers',
+    'margin-left',
+    'margin-right',
+    'move-left',
+    'move-right',
+    'newsletter-2',
+    'one-off-session',
+    'quote',
+    'redo',
+    'reset-password',
+    'right-small',
+    'send-message',
+    'share',
+    'super-admin',
+    'tablet-landscape',
+    'undo',
+    'user-star',
+    'user-star-filled',
+    'users',
+    'users-filled',
+    'users-tone'
+];
 
 const validateContent = (svgContent) => {
     const div = document.createElement('div');
@@ -181,10 +266,18 @@ 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 {
+                        pdsIconContent.set(url, '');
+                    }
+                }
+                catch (error) {
+                    pdsIconContent.set(url, '');
                 }
                 return Promise.resolve();
             }
@@ -194,12 +287,25 @@ const getSvgContent = (url, sanitize = false) => {
                     if (rsp.ok) {
                         return rsp.text().then((svgContent) => {
                             if (svgContent && sanitize !== false) {
-                                svgContent = validateContent(svgContent);
+                                try {
+                                    svgContent = validateContent(svgContent);
+                                }
+                                catch (validationError) {
+                                    svgContent = '';
+                                }
                             }
                             pdsIconContent.set(url, svgContent || '');
                         });
                     }
+                    else {
+                        // Handle HTTP errors
+                        throw new Error(`Failed to load SVG: ${rsp.status} ${rsp.statusText}`);
+                    }
+                }).catch((error) => {
+                    // Handle all fetch errors gracefully
+                    console.warn('Failed to load SVG:', url, error);
                     pdsIconContent.set(url, '');
+                    // Don't re-throw to prevent unhandled promise rejections
                 });
                 requests.set(url, req);
             }
@@ -212,25 +318,26 @@ const getSvgContent = (url, sanitize = false) => {
     return req;
 };
 
-const pdsIconCss = ":host{--dimension-icon-height:16px;--dimension-icon-width:16px;--color-icon-fill:currentColor;contain:strict;display:inline-block;fill:var(--color-icon-fill);height:var(--dimension-icon-height);width:var(--dimension-icon-width)}:host .pdsicon{fill:var(--color-icon-fill)}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}";
-const PdsIconStyle0 = pdsIconCss;
+const pdsIconCss = () => `:host{--dimension-icon-height:16px;--dimension-icon-width:16px;--color-icon-fill:currentColor;contain:strict;display:inline-block;fill:var(--color-icon-fill);-ms-flex-negative:0;flex-shrink:0;height:var(--dimension-icon-height);width:var(--dimension-icon-width)}:host .pdsicon{fill:var(--color-icon-fill)}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}:host(.flip-rtl):host-context([dir=rtl]) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(rtl)) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}`;
 
 const PdsIcon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.didLoadIcon = false;
+        this.iconName = null;
         this.inheritedAttributes = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
+        this.isVisible = false;
+        /**
+         * The size of the icon. This can be
+         * 'small', 'regular', 'medium', 'large', or a
+         * custom value (40px, 1rem, etc)
+         *
+         */
+        this.size = 'regular';
         this.hasAriaHidden = () => {
             const { el } = this;
             return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
         };
-        this.ariaLabel = undefined;
-        this.isVisible = false;
-        this.svgContent = undefined;
-        this.color = undefined;
-        this.icon = undefined;
-        this.name = undefined;
-        this.size = 'regular';
-        this.src = undefined;
     }
     iconSize() {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -249,10 +356,29 @@ const PdsIcon = class {
     }
     componentDidLoad() {
         this.setCSSVariables();
+        if (!this.didLoadIcon) {
+            this.loadIcon();
+        }
+        // Fallback: Ensure icon loads even if IntersectionObserver doesn't fire
+        setTimeout(() => {
+            if (!this.svgContent && !this.isVisible) {
+                this.isVisible = true;
+                this.loadIcon();
+            }
+        }, 100);
+        // Additional fallback for client-side navigation (React Router, etc.)
+        // React's useLayoutEffect and rendering cycles can delay visibility detection
+        setTimeout(() => {
+            if (!this.svgContent && !this.isVisible) {
+                this.isVisible = true;
+                this.loadIcon();
+            }
+        }, 500);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
         this.setCSSVariables();
+        this.setupInitialAriaLabel();
     }
     setCSSVariables() {
         this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());
@@ -260,10 +386,18 @@ const PdsIcon = class {
         this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');
     }
     connectedCallback() {
-        this.waitUntilVisible(this.el, '50px', () => {
+        // Handle re-connection during client-side navigation
+        if (!this.isVisible && !this.svgContent) {
+            this.waitUntilVisible(this.el, '50px', () => {
+                this.isVisible = true;
+                this.loadIcon();
+            });
+        }
+        // Immediate load attempt if already visible (e.g., during React navigation)
+        if (this.isElementInViewport(this.el)) {
             this.isVisible = true;
             this.loadIcon();
-        });
+        }
     }
     disconnectedCallback() {
         if (this.io) {
@@ -274,7 +408,16 @@ const PdsIcon = class {
     updateStyles() {
         this.setCSSVariables();
     }
+    onIconPropertyChange() {
+        this.loadIcon();
+        // Update aria-label when icon properties change
+        this.setupInitialAriaLabel();
+    }
     loadIcon() {
+        // Reset load state when URL changes
+        this.didLoadIcon = false;
+        // Clear existing content to prevent stale content when switching icons
+        this.svgContent = undefined;
         if (this.isVisible) {
             const url = getUrl(this);
             if (url) {
@@ -282,22 +425,46 @@ const PdsIcon = class {
                     this.svgContent = pdsIconContent.get(url);
                 }
                 else {
-                    getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));
+                    // Fix: Ensure promise callback triggers re-render and handle errors
+                    getSvgContent(url)
+                        .then(() => {
+                        // Force re-render by setting state in next tick
+                        setTimeout(() => {
+                            this.svgContent = pdsIconContent.get(url);
+                        }, 0);
+                    })
+                        .catch(() => {
+                        // Handle fetch errors gracefully
+                        this.svgContent = '';
+                    });
                 }
+                this.didLoadIcon = true;
             }
         }
-        const label = getName(this.name, this.icon);
-        if (label) {
-            this.ariaLabel = label.replace(/\-/g, ' ');
-        }
+        this.iconName = getName(this.name, this.icon);
     }
     render() {
-        const { ariaLabel, inheritedAttributes } = this;
-        return (h(Host, Object.assign({ key: '4bbc232e2530d43e8b5afefb754486d94ea6538b', "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, alt: "", role: "img", class: Object.assign({}, createColorClasses(this.color)) }, inheritedAttributes), this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+        const { ariaLabel, flipRtl, iconName, inheritedAttributes } = this;
+        const shouldIconAutoFlip = iconName
+            ? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false
+            : false;
+        const shouldFlip = flipRtl || shouldIconAutoFlip;
+        // Use inherited aria-label if provided, otherwise fall back to auto-generated one
+        const finalAriaLabel = inheritedAttributes['aria-label'] || ariaLabel;
+        return (h(Host, Object.assign({ key: '43aa73531314e6529a887468e69362430d006229', "aria-label": finalAriaLabel !== undefined && !this.hasAriaHidden() ? finalAriaLabel : null, alt: "", role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && isRTL(this.el) }) }, inheritedAttributes), this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
     }
     /*****
      * Private Methods
      ****/
+    setupInitialAriaLabel() {
+        // Only set aria-label during initial load if one isn't already provided
+        if (!this.inheritedAttributes['aria-label']) {
+            const iconName = getName(this.name, this.icon);
+            if (iconName) {
+                this.ariaLabel = iconName.replace(/\-/g, ' ');
+            }
+        }
+    }
     waitUntilVisible(el, rootMargin, cb) {
         if (typeof window !== 'undefined' && (window).IntersectionObserver) {
             const io = (this.io = new (window).IntersectionObserver((data) => {
@@ -308,6 +475,18 @@ const PdsIcon = class {
                 }
             }, { rootMargin }));
             io.observe(el);
+            // Safety timeout for client-side navigation scenarios
+            // Sometimes IntersectionObserver doesn't fire during React navigation
+            setTimeout(() => {
+                if (this.io && !this.isVisible) {
+                    // Check if element is actually visible in viewport
+                    if (this.isElementInViewport(el)) {
+                        this.io.disconnect();
+                        this.io = undefined;
+                        cb();
+                    }
+                }
+            }, 1000);
         }
         else {
             // browser doesn't support IntersectionObserver
@@ -315,14 +494,72 @@ const PdsIcon = class {
             cb();
         }
     }
+    isElementInViewport(el) {
+        if (!el || !el.isConnected)
+            return false;
+        const rect = el.getBoundingClientRect();
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+        return (rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= windowHeight &&
+            rect.right <= windowWidth) || (
+        // Also consider partially visible elements
+        rect.top < windowHeight &&
+            rect.bottom > 0 &&
+            rect.left < windowWidth &&
+            rect.right > 0);
+    }
+    /**
+     * Debug method to help diagnose loading issues
+     * Call from browser console: document.querySelector('pds-icon').debugIconState()
+     */
+    debugIconState() {
+        var _a;
+        const url = getUrl(this);
+        const rect = this.el.getBoundingClientRect();
+        console.log('PdsIcon Debug State:', {
+            name: this.name,
+            src: this.src,
+            icon: this.icon,
+            iconName: this.iconName,
+            url,
+            isVisible: this.isVisible,
+            didLoadIcon: this.didLoadIcon,
+            hasSvgContent: !!this.svgContent,
+            svgContentLength: ((_a = this.svgContent) === null || _a === void 0 ? void 0 : _a.length) || 0,
+            isInCache: url ? pdsIconContent.has(url) : false,
+            cachedContent: url ? pdsIconContent.get(url) : null,
+            element: this.el,
+            // Client-side navigation specific debug info
+            isConnected: this.el.isConnected,
+            isInViewport: this.isElementInViewport(this.el),
+            hasIntersectionObserver: !!this.io,
+            boundingClientRect: rect,
+            windowDimensions: {
+                width: window.innerWidth || document.documentElement.clientWidth,
+                height: window.innerHeight || document.documentElement.clientHeight
+            }
+        });
+    }
     static get assetsDirs() { return ["svg"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "size": ["updateStyles"],
-        "color": ["updateStyles"],
-        "name": ["loadIcon"],
-        "src": ["loadIcon"],
-        "icon": ["loadIcon"]
+        "size": [{
+                "updateStyles": 0
+            }],
+        "color": [{
+                "updateStyles": 0
+            }],
+        "name": [{
+                "onIconPropertyChange": 0
+            }],
+        "src": [{
+                "onIconPropertyChange": 0
+            }],
+        "icon": [{
+                "onIconPropertyChange": 0
+            }]
     }; }
 };
 const createColorClasses = (color) => {
@@ -333,8 +570,6 @@ const createColorClasses = (color) => {
         }
         : null;
 };
-PdsIcon.style = PdsIconStyle0;
+PdsIcon.style = pdsIconCss();
 
 export { PdsIcon as pds_icon };
-
-//# sourceMappingURL=pds-icon.entry.js.map

package/dist/esm/pds-image.entry.js

@@ -1,28 +1,29 @@
-import { r as registerInstance, h, H as Host } from './index-2a33b470.js';
+import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
 
-const pdsImageCss = ":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);height:auto;width:100%}";
-const PdsImageStyle0 = pdsImageCss;
+const pdsImageCss = () => `:host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);display:block;height:auto;max-width:100%}`;
 
 const PdsImage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * The image's alt tag. If none is provided,
+         * it will default to an empty string, which is desired for
+         * decorative images.
+         * @defaultValue ''
+         */
         this.alt = '';
-        this.componentId = undefined;
-        this.height = undefined;
+        /**
+         * Indicates how the browser should load the image.
+         * @defaultValue eager
+         */
         this.loading = 'eager';
-        this.sizes = undefined;
-        this.src = undefined;
-        this.srcset = undefined;
-        this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '8d97b63e1c5b0eb72117d6378a0b6d869c0dbdea', class: {
+        return (h(Host, { key: 'dbc144927d78e2eb380639eeb8b243133a4b5379', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '3cc2d1c185244c8e8de2f7258b85194b37a4ff38', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: '259c1cd7ffdf4e5dd7c0ef178d28f1f835b57642', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
 };
-PdsImage.style = PdsImageStyle0;
+PdsImage.style = pdsImageCss();
 
 export { PdsImage as pds_image };
-
-//# sourceMappingURL=pds-image.entry.js.map