@pine-ds/core 3.26.3 → 3.27.0

package/components/pds-icon2.js

@@ -1,601 +1 @@
-import { Build, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-let missingAssetPathWarning = false;
-/**
- *
- * Reads the component asset path config from meta tag or a global variable.
- * This is a temporary workaround until these issues have been addressed:
- *
- * https://github.com/ionic-team/stencil/issues/2826/
- * https://github.com/ionic-team/stencil/issues/3470
- * https://github.com/ionic-team/stencil-ds-output-targets/issues/186
- */
-const getAssetPath = (path) => {
-    var _a;
-    const metaPineAssetPath = (_a = document.head.querySelector('meta[data-pine-asset-path]')) === null || _a === void 0 ? void 0 : _a.dataset.pineAssetPath;
-    // 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/';
-    const assetBasePath = Build.isTesting ? '/dist/pds-icons' : 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 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;
-    if (path.startsWith('./')) {
-        assetPath = path.substring(2);
-    }
-    if (!assetBasePath.endsWith('/')) {
-        assetPath = '/' + assetPath;
-    }
-    return assetBasePath + assetPath;
-};
-
-let CACHED_MAP;
-const getIconMap = () => {
-    if (typeof window === 'undefined') {
-        return new Map();
-    }
-    else {
-        if (!CACHED_MAP) {
-            const win = window; // eslint-disable-line @typescript-eslint/no-explicit-any
-            win.PdsIcons = win.PdsIcons || {};
-            CACHED_MAP = win.PdsIcons.map = win.PdsIcons.map || new Map();
-        }
-        return CACHED_MAP;
-    }
-};
-const getName = (iconName, icon) => {
-    if (!iconName && icon && !isSrc(icon)) {
-        iconName = icon;
-    }
-    if (isStr(iconName)) {
-        iconName = toLower(iconName);
-    }
-    if (!isStr(iconName) || iconName.trim() === '') {
-        return null;
-    }
-    const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
-    if (invalidChars != '') {
-        return null;
-    }
-    return iconName;
-};
-const getNamedUrl = (iconName) => {
-    const url = getIconMap().get(iconName);
-    if (url) {
-        return url;
-    }
-    return getAssetPath(`svg/${iconName}.svg`);
-};
-const getSrc = (src) => {
-    if (isStr(src)) {
-        src = src.trim();
-        if (isSrc(src)) {
-            return src;
-        }
-    }
-    return null;
-};
-const getUrl = (pdsIcon) => {
-    let url = getSrc(pdsIcon.src);
-    if (url) {
-        return url;
-    }
-    url = getName(pdsIcon.name, pdsIcon.icon);
-    if (url) {
-        return getNamedUrl(url);
-    }
-    if (pdsIcon.icon) {
-        url = getSrc(pdsIcon.icon);
-        if (url) {
-            return url;
-        }
-    }
-    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 `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.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- */
-const inheritAttributes = (el, attributes = []) => {
-    const attributeObject = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
-    attributes.forEach(attr => {
-        if (el.hasAttribute(attr)) {
-            const value = el.getAttribute(attr);
-            if (value !== null) {
-                attributeObject[attr] = el.getAttribute(attr);
-            }
-            el.removeAttribute(attr);
-        }
-    });
-    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');
-    div.innerHTML = svgContent;
-    // setup this way to ensure it works on our buddy IE
-    for (let i = div.childNodes.length - 1; i >= 0; i--) {
-        if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
-            div.removeChild(div.childNodes[i]);
-        }
-    }
-    // must only have 1 root element
-    const svgElm = div.firstElementChild;
-    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
-        const svgClass = svgElm.getAttribute('class') || '';
-        svgElm.setAttribute('class', (svgClass + ' s-pds-icon').trim());
-        // root element must be an svg
-        // lets double check we've got valid elements
-        // do not allow scripts
-        if (isValid(svgElm)) {
-            return div.innerHTML;
-        }
-    }
-    return '';
-};
-const isValid = (elm) => {
-    if (elm.nodeType === 1) {
-        if (elm.nodeName.toLowerCase() === 'script') {
-            return false;
-        }
-        for (let i = 0; i < elm.attributes.length; i++) {
-            const name = elm.attributes[i].name;
-            if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {
-                return false;
-            }
-        }
-        for (let i = 0; i < elm.childNodes.length; i++) {
-            if (!isValid(elm.childNodes[i])) {
-                return false;
-            }
-        }
-    }
-    return true;
-};
-const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
-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) => {
-    let req = requests.get(url);
-    if (!req) {
-        if (typeof fetch != 'undefined' && typeof document !== 'undefined') {
-            if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
-                if (!parser) {
-                    parser = new DOMParser();
-                }
-                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();
-            }
-            else {
-                // we don't have a request
-                req = fetch(url).then((rsp) => {
-                    if (rsp.ok) {
-                        return rsp.text().then((svgContent) => {
-                            if (svgContent && sanitize !== false) {
-                                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);
-            }
-        }
-        else {
-            pdsIconContent.set(url, '');
-            return Promise.resolve();
-        }
-    }
-    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);-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 = /*@__PURE__*/ proxyCustomElement(class PdsIcon extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        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';
-        };
-    }
-    iconSize() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const sizes = {
-            small: '12px',
-            regular: '16px',
-            medium: '20px',
-            large: '24px',
-        };
-        if (sizes[this.size]) {
-            return sizes[this.size];
-        }
-        else {
-            return this.size;
-        }
-    }
-    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());
-        this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());
-        this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');
-    }
-    connectedCallback() {
-        // 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) {
-            this.io.disconnect();
-            this.io = undefined;
-        }
-    }
-    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 (Build.isBrowser && this.isVisible) {
-            const url = getUrl(this);
-            if (url) {
-                if (pdsIconContent.has(url)) {
-                    this.svgContent = pdsIconContent.get(url);
-                }
-                else {
-                    // 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;
-            }
-        }
-        this.iconName = getName(this.name, this.icon);
-    }
-    render() {
-        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), Build.isBrowser && 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 (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);
-            // 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
-            // so just fallback to always show it
-            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 this; }
-    static get watchers() { return {
-        "size": ["updateStyles"],
-        "color": ["updateStyles"],
-        "name": ["onIconPropertyChange"],
-        "src": ["onIconPropertyChange"],
-        "icon": ["onIconPropertyChange"]
-    }; }
-    static get style() { return pdsIconCss; }
-}, [257, "pds-icon", {
-        "color": [1],
-        "flipRtl": [4, "flip-rtl"],
-        "icon": [8],
-        "name": [513],
-        "size": [513],
-        "src": [1],
-        "ariaLabel": [32],
-        "isVisible": [32],
-        "svgContent": [32]
-    }, undefined, {
-        "size": ["updateStyles"],
-        "color": ["updateStyles"],
-        "name": ["onIconPropertyChange"],
-        "src": ["onIconPropertyChange"],
-        "icon": ["onIconPropertyChange"]
-    }]);
-const createColorClasses = (color) => {
-    return color
-        ? {
-            'pds-color': true,
-            [`pds-color-${color}`]: true,
-        }
-        : null;
-};
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsIcon);
-            }
-            break;
-    } });
-}
-
-export { PdsIcon as P, defineCustomElement as d };
-//# sourceMappingURL=pds-icon2.js.map
-
-//# sourceMappingURL=pds-icon2.js.map
+import{Build as t,proxyCustomElement as i,HTMLElement as e,h as n,Host as s,transformTag as o}from"@stencil/core/internal/client";let r,l=!1;const a=(t,i)=>(t||!i||u(i)||(t=i),m(t)&&(t=p(t)),m(t)&&""!==t.trim()?""!=t.replace(/[a-z]|-|\d/gi,"")?null:t:null),c=t=>m(t)&&(t=t.trim(),u(t))?t:null,h=i=>{let e=c(i.src);return e||(e=a(i.name,i.icon),e?(n=e,(()=>{if("undefined"==typeof window)return new Map;if(!r){const t=window;t.PdsIcons=t.PdsIcons||{},r=t.PdsIcons.map=t.PdsIcons.map||new Map}return r})().get(n)||(i=>{var e;const n=null===(e=document.head.querySelector("meta[data-pine-asset-path]"))||void 0===e?void 0:e.dataset.pineAssetPath,s=window.__PINE_ASSET_PATH__,o=t.isTesting?"/dist/pds-icons":n||s||"https://cdn.jsdelivr.net/npm/@pine-ds/icons/dist/";o.startsWith("https://cdn.jsdelivr.net/npm/")&&!l&&(l=!0,console.warn("\n      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\n    "));let r=i;return i.startsWith("./")&&(r=i.substring(2)),o.endsWith("/")||(r="/"+r),o+r})(`svg/${n}.svg`)):i.icon&&(e=c(i.icon),e)?e:null);var n},d=t=>t&&""!==t.dir?"rtl"===t.dir.toLowerCase():"rtl"===(null===document||void 0===document?void 0:document.dir.toLowerCase()),u=t=>t.length>0&&/(\/|\.)/.test(t),m=t=>"string"==typeof t,p=t=>t.toLowerCase(),f=["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"],g=t=>{if(1===t.nodeType){if("script"===t.nodeName.toLowerCase())return!1;for(let i=0;i<t.attributes.length;i++){const e=t.attributes[i].name;if(m(e)&&0===e.toLowerCase().indexOf("on"))return!1}for(let i=0;i<t.childNodes.length;i++)if(!g(t.childNodes[i]))return!1}return!0},w=new Map,v=new Map;let y;const b=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.didLoadIcon=!1,this.iconName=null,this.inheritedAttributes={},this.isVisible=!1,this.size="regular",this.hasAriaHidden=()=>{const{el:t}=this;return t.hasAttribute("aria-hidden")&&"true"===t.getAttribute("aria-hidden")}}iconSize(){const t={small:"12px",regular:"16px",medium:"20px",large:"24px"};return t[this.size]?t[this.size]:this.size}componentDidLoad(){this.setCSSVariables(),this.didLoadIcon||this.loadIcon(),setTimeout((()=>{this.svgContent||this.isVisible||(this.isVisible=!0,this.loadIcon())}),100),setTimeout((()=>{this.svgContent||this.isVisible||(this.isVisible=!0,this.loadIcon())}),500)}componentWillLoad(){this.inheritedAttributes=((t,i=[])=>{const e={};return i.forEach((i=>{t.hasAttribute(i)&&(null!==t.getAttribute(i)&&(e[i]=t.getAttribute(i)),t.removeAttribute(i))})),e})(this.el,["aria-label"]),this.setCSSVariables(),this.setupInitialAriaLabel()}setCSSVariables(){this.el.style.setProperty("--dimension-icon-height",this.iconSize()),this.el.style.setProperty("--dimension-icon-width",this.iconSize()),this.el.style.setProperty("--color-icon-fill",void 0!==this.color?this.color:"currentColor")}connectedCallback(){this.isVisible||this.svgContent||this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=!0,this.loadIcon()})),this.isElementInViewport(this.el)&&(this.isVisible=!0,this.loadIcon())}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=void 0)}updateStyles(){this.setCSSVariables()}onIconPropertyChange(){this.loadIcon(),this.setupInitialAriaLabel()}loadIcon(){if(this.didLoadIcon=!1,this.svgContent=void 0,t.isBrowser&&this.isVisible){const t=h(this);t&&(w.has(t)?this.svgContent=w.get(t):((t,i=!1)=>{let e=v.get(t);if(!e){if("undefined"==typeof fetch||"undefined"==typeof document)return w.set(t,""),Promise.resolve();if((t=>t.startsWith("data:image/svg+xml"))(t)&&(t=>-1!==t.indexOf(";utf8,"))(t)){y||(y=new DOMParser);try{const i=y.parseFromString(t,"text/html").querySelector("svg");w.set(t,i?i.outerHTML:"")}catch(i){w.set(t,"")}return Promise.resolve()}e=fetch(t).then((e=>{if(e.ok)return e.text().then((e=>{if(e&&!1!==i)try{e=(t=>{const i=document.createElement("div");i.innerHTML=t;for(let t=i.childNodes.length-1;t>=0;t--)"svg"!==i.childNodes[t].nodeName.toLowerCase()&&i.removeChild(i.childNodes[t]);const e=i.firstElementChild;if(e&&"svg"===e.nodeName.toLowerCase()){const t=e.getAttribute("class")||"";if(e.setAttribute("class",(t+" s-pds-icon").trim()),g(e))return i.innerHTML}return""})(e)}catch(t){e=""}w.set(t,e||"")}));throw new Error(`Failed to load SVG: ${e.status} ${e.statusText}`)})).catch((i=>{console.warn("Failed to load SVG:",t,i),w.set(t,"")})),v.set(t,e)}return e})(t).then((()=>{setTimeout((()=>{this.svgContent=w.get(t)}),0)})).catch((()=>{this.svgContent=""})),this.didLoadIcon=!0)}this.iconName=a(this.name,this.icon)}render(){const{ariaLabel:i,flipRtl:e,iconName:o,inheritedAttributes:r}=this,l=!!o&&(t=>d(this.el)&&f.includes(t))(o)&&!1!==e,a=e||l,c=r["aria-label"]||i;return n(s,Object.assign({key:"43aa73531314e6529a887468e69362430d006229","aria-label":void 0===c||this.hasAriaHidden()?null:c,alt:"",role:"img",class:Object.assign(Object.assign({},C(this.color)),{"flip-rtl":a,"icon-rtl":a&&d(this.el)})},r),n("div",t.isBrowser&&this.svgContent?{class:"icon-inner",innerHTML:this.svgContent}:{class:"icon-inner"}))}setupInitialAriaLabel(){if(!this.inheritedAttributes["aria-label"]){const t=a(this.name,this.icon);t&&(this.ariaLabel=t.replace(/\-/g," "))}}waitUntilVisible(i,e,n){if(t.isBrowser&&"undefined"!=typeof window&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((i=>{i[0].isIntersecting&&(t.disconnect(),this.io=void 0,n())}),{rootMargin:e});t.observe(i),setTimeout((()=>{this.io&&!this.isVisible&&this.isElementInViewport(i)&&(this.io.disconnect(),this.io=void 0,n())}),1e3)}else n()}isElementInViewport(t){if(!t||!t.isConnected)return!1;const i=t.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth;return i.top>=0&&i.left>=0&&i.bottom<=e&&i.right<=n||i.top<e&&i.bottom>0&&i.left<n&&i.right>0}debugIconState(){var t;const i=h(this),e=this.el.getBoundingClientRect();console.log("PdsIcon Debug State:",{name:this.name,src:this.src,icon:this.icon,iconName:this.iconName,url:i,isVisible:this.isVisible,didLoadIcon:this.didLoadIcon,hasSvgContent:!!this.svgContent,svgContentLength:(null===(t=this.svgContent)||void 0===t?void 0:t.length)||0,isInCache:!!i&&w.has(i),cachedContent:i?w.get(i):null,element:this.el,isConnected:this.el.isConnected,isInViewport:this.isElementInViewport(this.el),hasIntersectionObserver:!!this.io,boundingClientRect:e,windowDimensions:{width:window.innerWidth||document.documentElement.clientWidth,height:window.innerHeight||document.documentElement.clientHeight}})}static get assetsDirs(){return["svg"]}get el(){return this}static get watchers(){return{size:[{updateStyles:0}],color:[{updateStyles:0}],name:[{onIconPropertyChange:0}],src:[{onIconPropertyChange:0}],icon:[{onIconPropertyChange:0}]}}static get style(){return":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)}"}},[1,"pds-icon",{color:[1],flipRtl:[4,"flip-rtl"],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},void 0,{size:[{updateStyles:0}],color:[{updateStyles:0}],name:[{onIconPropertyChange:0}],src:[{onIconPropertyChange:0}],icon:[{onIconPropertyChange:0}]}]),C=t=>t?{"pds-color":!0,[`pds-color-${t}`]:!0}:null;function I(){"undefined"!=typeof customElements&&["pds-icon"].forEach((t=>{"pds-icon"===t&&(customElements.get(o(t))||customElements.define(o(t),b))}))}export{b as P,I as d}

package/components/pds-image.js

@@ -1,61 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-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$1 = /*@__PURE__*/ proxyCustomElement(class PdsImage extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * 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 = '';
-        /**
-         * Indicates how the browser should load the image.
-         * @defaultValue eager
-         */
-        this.loading = 'eager';
-    }
-    render() {
-        return (h(Host, { key: 'fa205f03d5c378d27a66cbfd520ae2bc7ab9e9df', class: {
-                'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '8d03dddf6e924ef8aebea2bf34a32e326bee329a', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
-    }
-    static get style() { return pdsImageCss; }
-}, [257, "pds-image", {
-        "alt": [1],
-        "componentId": [1, "component-id"],
-        "height": [2],
-        "loading": [1],
-        "sizes": [1],
-        "src": [1],
-        "srcset": [1],
-        "width": [2]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-image"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-image":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsImage$1);
-            }
-            break;
-    } });
-}
-
-const PdsImage = PdsImage$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsImage, defineCustomElement };
-//# sourceMappingURL=pds-image.js.map
-
-//# sourceMappingURL=pds-image.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as i,transformTag as a}from"@stencil/core/internal/client";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.alt="",this.loading="eager"}render(){return s(i,{key:"fa205f03d5c378d27a66cbfd520ae2bc7ab9e9df",class:{"pds-image":!0},id:this.componentId},s("img",{key:"8d03dddf6e924ef8aebea2bf34a32e326bee329a",alt:this.alt,height:this.height,loading:this.loading,sizes:this.sizes,src:this.src,srcset:this.srcset,width:this.width}))}static get style(){return":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);display:block;height:auto;max-width:100%}"}},[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]),d=n,o=function(){"undefined"!=typeof customElements&&["pds-image"].forEach((t=>{"pds-image"===t&&(customElements.get(a(t))||customElements.define(a(t),n))}))};export{d as PdsImage,o as defineCustomElement}