@pine-ds/core 3.26.3 → 3.27.0

package/components/pds-tooltip.js

@@ -1,362 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as computePosition, a as autoUpdate, o as offset, f as flip, s as shift } from './floating-ui.dom.js';
-
-const pdsTooltipCss = ".pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:relative;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
-
-const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Internal state: true if the tooltip was opened by user interaction (hover/focus),
-         * false if opened via the `opened` prop or currently closed.
-         */
-        this._isInteractiveOpen = false;
-        this.portalEl = null;
-        this.resolvedPlacement = 'right';
-        this.triggerEl = null;
-        this.contentDiv = null;
-        this.slotMutationObserver = null;
-        this.currentPathname = '';
-        this.pathnameCheckInterval = null;
-        this.stopAutoUpdate = null;
-        /**
-         * Determines whether or not the tooltip has an arrow
-         * @defaultValue true
-         */
-        this.hasArrow = true;
-        /**
-         * Enable this option when using the content slot
-         * @defaultValue false
-         */
-        this.htmlContent = false;
-        /**
-         * Determines the preferred position of the tooltip
-         * @defaultValue "right"
-         */
-        this.placement = 'right';
-        /**
-         * Sets the maximum width of the tooltip content
-         * @defaultValue "352px"
-         */
-        this.maxWidth = '352px';
-        /**
-         * Determines whether or not the tooltip is visible
-         * @defaultValue false
-         */
-        this.opened = false;
-        this.handleHide = () => {
-            if (this.opened && !this._isInteractiveOpen) {
-                return;
-            }
-            this.hideTooltip();
-            this._isInteractiveOpen = false;
-        };
-        this.handleShow = () => {
-            if (this.opened && !this._isInteractiveOpen) {
-                return;
-            }
-            this._isInteractiveOpen = true;
-            this.showTooltip();
-        };
-        this.handlePageShow = () => {
-            if (this.opened && !this._isInteractiveOpen) {
-                return;
-            }
-            this.opened = false;
-            this._isInteractiveOpen = false;
-        };
-        this.handleSpaNavigation = () => {
-            if (this.opened && !this._isInteractiveOpen) {
-                return;
-            }
-            this.hideTooltip();
-            this._isInteractiveOpen = false;
-        };
-        this.checkPathnameChange = () => {
-            if (window.location.pathname !== this.currentPathname) {
-                this.currentPathname = window.location.pathname;
-                this.handleSpaNavigation();
-            }
-        };
-    }
-    handleOpenToggle(newValue, oldValue) {
-        if (newValue === false && oldValue === true) {
-            this._isInteractiveOpen = false;
-        }
-    }
-    componentWillLoad() {
-        this._isInteractiveOpen = false;
-        this.resolvedPlacement = this.placement;
-    }
-    componentDidLoad() {
-        window.addEventListener('pageshow', this.handlePageShow);
-        this.currentPathname = window.location.pathname;
-        this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
-        const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
-        if (contentSlotWrapper !== null) {
-            this.slotMutationObserver = new MutationObserver(() => {
-                if (this.opened && this.portalEl !== null) {
-                    this.removePortal();
-                    this.createPortal();
-                }
-            });
-            this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
-        }
-        // no return; Stencil ignores teardown functions here
-    }
-    disconnectedCallback() {
-        window.removeEventListener('pageshow', this.handlePageShow);
-        if (this.slotMutationObserver !== null) {
-            this.slotMutationObserver.disconnect();
-            this.slotMutationObserver = null;
-        }
-        // Ensure global listeners/intervals are removed if still present
-        if (this.portalEl !== null) {
-            this.removePortal();
-        }
-        if (this.pathnameCheckInterval !== null) {
-            clearInterval(this.pathnameCheckInterval);
-            this.pathnameCheckInterval = null;
-        }
-        // Ensure autoUpdate is stopped if still present
-        if (this.stopAutoUpdate !== null) {
-            this.stopAutoUpdate();
-            this.stopAutoUpdate = null;
-        }
-    }
-    componentDidRender() {
-        if (this.opened && this.portalEl === null) {
-            this.createPortal();
-        }
-        else if (!this.opened && this.portalEl !== null) {
-            this.removePortal();
-        }
-        // Update portal class when opened state changes
-        if (this.portalEl !== null) {
-            this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
-            // Update ARIA attributes to stay in sync with visual open state
-            this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
-            this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');
-        }
-    }
-    /**
-     * Shows the tooltip by enabling the opened property
-     */
-    async showTooltip() {
-        this.opened = true;
-    }
-    /**
-     * Hides the tooltip by disabling the opened property
-     */
-    async hideTooltip() {
-        this.opened = false;
-    }
-    /**
-     * Determines the most accurate HTML element to use as the anchor for positioning the tooltip.
-     * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.
-     * Otherwise, or if no specific element is found, it defaults to the span wrapper around the trigger slot.
-     * This helps with precise alignment.
-     */
-    determinePositioningAnchor() {
-        let positioningAnchor = this.triggerEl;
-        if (this.triggerEl !== null) {
-            const children = this.triggerEl.childNodes;
-            for (let i = 0; i < children.length; i++) {
-                const childNode = children[i];
-                if (childNode.nodeType === Node.ELEMENT_NODE) {
-                    positioningAnchor = childNode;
-                    break; // Found the first element, use it as the anchor
-                }
-            }
-        }
-        // If no ELEMENT_NODE is found within this.triggerEl (e.g., if trigger is just text),
-        // positioningAnchor will correctly remain this.triggerEl (the span).
-        return positioningAnchor;
-    }
-    /**
-     * Centralized method to calculate and apply the tooltip's position using floating UI.
-     * Uses the determined anchor element and applies computePosition with flip, offset, and shift.
-     */
-    async repositionPortal() {
-        const anchor = this.determinePositioningAnchor();
-        if (anchor !== null && this.portalEl !== null) {
-            try {
-                const { x, y, placement: computedPlacement } = await computePosition(anchor, this.portalEl, {
-                    placement: this.placement,
-                    strategy: 'fixed',
-                    middleware: [offset(8), flip(), shift({ padding: 5 })],
-                });
-                this.resolvedPlacement = computedPlacement;
-                Object.assign(this.portalEl.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                    position: 'fixed',
-                });
-                // Update CSS classes to match the resolved placement
-                this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
-            }
-            catch (error) {
-                console.warn('Failed to position tooltip:', error);
-                this.resolvedPlacement = this.placement; // Fallback to requested placement
-                // Fallback to basic positioning if floating UI fails
-                const anchorRect = anchor.getBoundingClientRect();
-                this.portalEl.style.left = `${anchorRect.right + 8}px`;
-                this.portalEl.style.top = `${anchorRect.top}px`;
-                this.portalEl.style.position = 'fixed';
-            }
-        }
-    }
-    createPortal() {
-        if (this.portalEl !== null)
-            return;
-        this.portalEl = document.createElement('div');
-        this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
-        this.portalEl.style.position = 'fixed';
-        this.portalEl.style.zIndex = 'var(--pine-z-index-nuclear)';
-        if (this.portalEl.id === '') {
-            const suffix = PdsTooltip.instanceCounter++;
-            const baseId = this.componentId || this.el.id || 'pds-tooltip';
-            this.portalEl.id = `${baseId}-portal-${suffix}`;
-        }
-        if (this.portalEl.getAttribute('id') !== this.portalEl.id) {
-            this.portalEl.setAttribute('id', this.portalEl.id);
-        }
-        this.portalEl.setAttribute('role', 'tooltip');
-        this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
-        this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');
-        this.portalEl.style.maxWidth = this.maxWidth;
-        this.contentDiv = document.createElement('div');
-        this.contentDiv.className = 'pds-tooltip__content';
-        this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
-        this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
-        const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
-        const slottedContentContainer = contentSlotWrapper === null || contentSlotWrapper === void 0 ? void 0 : contentSlotWrapper.querySelector('[slot="content"]');
-        let hasSlottedContent = false;
-        if (slottedContentContainer !== null) {
-            const childrenToClone = Array.from(slottedContentContainer.childNodes);
-            if (childrenToClone.length > 0) {
-                const hasMeaningfulNode = childrenToClone.some(node => {
-                    var _a;
-                    return node.nodeType === Node.ELEMENT_NODE ||
-                        (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
-                });
-                if (hasMeaningfulNode) {
-                    hasSlottedContent = true;
-                    childrenToClone.forEach((node /*, index*/) => {
-                        var _a;
-                        if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
-                            this.contentDiv.appendChild(node.cloneNode(true));
-                        }
-                    });
-                }
-            }
-        }
-        if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {
-            this.contentDiv.textContent = this.content;
-        }
-        this.portalEl.appendChild(this.contentDiv);
-        document.body.appendChild(this.portalEl);
-        this.repositionPortal().catch(error => {
-            console.warn('Failed to position tooltip on creation:', error);
-        });
-        // Use Floating UI's autoUpdate to handle scroll/resize automatically
-        if (this.triggerEl && this.portalEl) {
-            this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
-                this.repositionPortal().catch(error => {
-                    console.warn('Failed to reposition tooltip on auto update:', error);
-                });
-            });
-        }
-        // Keep only SPA navigation listeners (not handled by autoUpdate)
-        window.addEventListener('popstate', this.handleSpaNavigation, true);
-        window.addEventListener('hashchange', this.handleSpaNavigation, true);
-        // Start pathname change detection
-        this.pathnameCheckInterval = setInterval(this.checkPathnameChange, 100);
-        // Add ARIA attribute to trigger, now that portalEl and its ID are confirmed
-        if (this.triggerEl !== null && this.portalEl.id !== '') {
-            this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
-        }
-    }
-    removePortal() {
-        // Stop Floating UI's autoUpdate
-        if (this.stopAutoUpdate !== null) {
-            this.stopAutoUpdate();
-            this.stopAutoUpdate = null;
-        }
-        // Stop pathname change detection
-        if (this.pathnameCheckInterval !== null) {
-            clearInterval(this.pathnameCheckInterval);
-            this.pathnameCheckInterval = null;
-        }
-        if (this.portalEl !== null) {
-            // Remove only SPA navigation listeners (scroll/resize handled by autoUpdate)
-            window.removeEventListener('popstate', this.handleSpaNavigation, true);
-            window.removeEventListener('hashchange', this.handleSpaNavigation, true);
-            // Safely remove portal from DOM
-            try {
-                if (this.portalEl.parentNode) {
-                    this.portalEl.parentNode.removeChild(this.portalEl);
-                }
-            }
-            catch (error) {
-                // Portal might have already been removed by test cleanup
-                console.warn('Portal element could not be removed from DOM:', error);
-            }
-            this.portalEl = null;
-        }
-        // Remove ARIA attribute from trigger
-        if (this.triggerEl !== null) {
-            this.triggerEl.removeAttribute('aria-describedby');
-        }
-        this.contentDiv = null;
-    }
-    render() {
-        const hostId = this.componentId || undefined;
-        return (h(Host, { key: '4e6188e03c2f1d33e571b96a3006a585840716bd', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '0b82d180295421c32548577fb2038422b8ebd3be', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
-            /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '661014ee46b11bcc906e7b64ef8c8a5739d459f0' })), h("div", { key: '1861ce9b260f5f7d2eb0a1f337dadd63a0dfee97', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '963fb263c72fba432c2b672a2c3e85ca524f2b67', name: "content" }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "opened": ["handleOpenToggle"]
-    }; }
-    static get style() { return pdsTooltipCss; }
-}, [260, "pds-tooltip", {
-        "content": [1],
-        "componentId": [1, "component-id"],
-        "hasArrow": [4, "has-arrow"],
-        "htmlContent": [4, "html-content"],
-        "placement": [513],
-        "maxWidth": [1, "max-width"],
-        "opened": [1540],
-        "_isInteractiveOpen": [32],
-        "showTooltip": [64],
-        "hideTooltip": [64]
-    }, undefined, {
-        "opened": ["handleOpenToggle"]
-    }]);
-PdsTooltip$1.instanceCounter = 0;
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTooltip$1);
-            }
-            break;
-    } });
-}
-
-const PdsTooltip = PdsTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTooltip, defineCustomElement };
-//# sourceMappingURL=pds-tooltip.js.map
-
-//# sourceMappingURL=pds-tooltip.js.map
+import{proxyCustomElement as t,HTMLElement as o,h as i,Host as r,transformTag as s}from"@stencil/core/internal/client";import{c as e,a as l,o as n,f as a,s as p}from"./floating-ui.dom.js";const h=t(class t extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this._isInteractiveOpen=!1,this.portalEl=null,this.resolvedPlacement="right",this.triggerEl=null,this.contentDiv=null,this.slotMutationObserver=null,this.currentPathname="",this.pathnameCheckInterval=null,this.stopAutoUpdate=null,this.hasArrow=!0,this.htmlContent=!1,this.placement="right",this.maxWidth="352px",this.opened=!1,this.handleHide=()=>{this.opened&&!this._isInteractiveOpen||(this.hideTooltip(),this._isInteractiveOpen=!1)},this.handleShow=()=>{this.opened&&!this._isInteractiveOpen||(this._isInteractiveOpen=!0,this.showTooltip())},this.handlePageShow=()=>{this.opened&&!this._isInteractiveOpen||(this.opened=!1,this._isInteractiveOpen=!1)},this.handleSpaNavigation=()=>{this.opened&&!this._isInteractiveOpen||(this.hideTooltip(),this._isInteractiveOpen=!1)},this.checkPathnameChange=()=>{window.location.pathname!==this.currentPathname&&(this.currentPathname=window.location.pathname,this.handleSpaNavigation())}}handleOpenToggle(t,o){!1===t&&!0===o&&(this._isInteractiveOpen=!1)}componentWillLoad(){this._isInteractiveOpen=!1,this.resolvedPlacement=this.placement}componentDidLoad(){window.addEventListener("pageshow",this.handlePageShow),this.currentPathname=window.location.pathname,this.triggerEl=this.el.querySelector(".pds-tooltip__trigger");const t=this.el.querySelector(".pds-tooltip__content-slot-wrapper");null!==t&&(this.slotMutationObserver=new MutationObserver((()=>{this.opened&&null!==this.portalEl&&(this.removePortal(),this.createPortal())})),this.slotMutationObserver.observe(t,{childList:!0,subtree:!1}))}disconnectedCallback(){window.removeEventListener("pageshow",this.handlePageShow),null!==this.slotMutationObserver&&(this.slotMutationObserver.disconnect(),this.slotMutationObserver=null),null!==this.portalEl&&this.removePortal(),null!==this.pathnameCheckInterval&&(clearInterval(this.pathnameCheckInterval),this.pathnameCheckInterval=null),null!==this.stopAutoUpdate&&(this.stopAutoUpdate(),this.stopAutoUpdate=null)}componentDidRender(){this.opened&&null===this.portalEl?this.createPortal():this.opened||null===this.portalEl||this.removePortal(),null!==this.portalEl&&(this.portalEl.className=`pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent?"pds-tooltip--has-html-content":""} ${this.opened?"pds-tooltip--is-open":""} ${this.hasArrow?"":"pds-tooltip--no-arrow"}`,this.portalEl.setAttribute("aria-hidden",this.opened?"false":"true"),this.portalEl.setAttribute("aria-live",this.opened?"polite":"off"))}async showTooltip(){this.opened=!0}async hideTooltip(){this.opened=!1}determinePositioningAnchor(){let t=this.triggerEl;if(null!==this.triggerEl){const o=this.triggerEl.childNodes;for(let i=0;i<o.length;i++){const r=o[i];if(r.nodeType===Node.ELEMENT_NODE){t=r;break}}}return t}async repositionPortal(){const t=this.determinePositioningAnchor();if(null!==t&&null!==this.portalEl)try{const{x:o,y:i,placement:r}=await e(t,this.portalEl,{placement:this.placement,strategy:"fixed",middleware:[n(8),a(),p({padding:5})]});this.resolvedPlacement=r,Object.assign(this.portalEl.style,{left:o+"px",top:i+"px",position:"fixed"}),this.portalEl.className=`pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent?"pds-tooltip--has-html-content":""} ${this.opened?"pds-tooltip--is-open":""} ${this.hasArrow?"":"pds-tooltip--no-arrow"}`}catch(o){console.warn("Failed to position tooltip:",o),this.resolvedPlacement=this.placement;const i=t.getBoundingClientRect();this.portalEl.style.left=i.right+8+"px",this.portalEl.style.top=i.top+"px",this.portalEl.style.position="fixed"}}createPortal(){if(null!==this.portalEl)return;if(this.portalEl=document.createElement("div"),this.portalEl.className=`pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent?"pds-tooltip--has-html-content":""} ${this.opened?"pds-tooltip--is-open":""} ${this.hasArrow?"":"pds-tooltip--no-arrow"}`,this.portalEl.style.position="fixed",this.portalEl.style.zIndex="var(--pine-z-index-nuclear)",""===this.portalEl.id){const o=t.instanceCounter++;this.portalEl.id=`${this.componentId||this.el.id||"pds-tooltip"}-portal-${o}`}this.portalEl.getAttribute("id")!==this.portalEl.id&&this.portalEl.setAttribute("id",this.portalEl.id),this.portalEl.setAttribute("role","tooltip"),this.portalEl.setAttribute("aria-hidden",this.opened?"false":"true"),this.portalEl.setAttribute("aria-live",this.opened?"polite":"off"),this.portalEl.style.maxWidth=this.maxWidth,this.contentDiv=document.createElement("div"),this.contentDiv.className="pds-tooltip__content",this.contentDiv.setAttribute("aria-hidden",this.opened?"false":"true"),this.contentDiv.setAttribute("aria-live",this.opened?"polite":"off");const o=this.el.querySelector(".pds-tooltip__content-slot-wrapper"),i=null==o?void 0:o.querySelector('[slot="content"]');let r=!1;if(null!==i){const t=Array.from(i.childNodes);t.length>0&&t.some((t=>{var o;return t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&""!==(null===(o=t.textContent)||void 0===o?void 0:o.trim())}))&&(r=!0,t.forEach((t=>{var o;(t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&""!==(null===(o=t.textContent)||void 0===o?void 0:o.trim()))&&this.contentDiv.appendChild(t.cloneNode(!0))})))}r||"string"!=typeof this.content||""===this.content.trim()||(this.contentDiv.textContent=this.content),this.portalEl.appendChild(this.contentDiv),document.body.appendChild(this.portalEl),this.repositionPortal().catch((t=>{console.warn("Failed to position tooltip on creation:",t)})),this.triggerEl&&this.portalEl&&(this.stopAutoUpdate=l(this.triggerEl,this.portalEl,(()=>{this.repositionPortal().catch((t=>{console.warn("Failed to reposition tooltip on auto update:",t)}))}))),window.addEventListener("popstate",this.handleSpaNavigation,!0),window.addEventListener("hashchange",this.handleSpaNavigation,!0),this.pathnameCheckInterval=setInterval(this.checkPathnameChange,100),null!==this.triggerEl&&""!==this.portalEl.id&&this.triggerEl.setAttribute("aria-describedby",this.portalEl.id)}removePortal(){if(null!==this.stopAutoUpdate&&(this.stopAutoUpdate(),this.stopAutoUpdate=null),null!==this.pathnameCheckInterval&&(clearInterval(this.pathnameCheckInterval),this.pathnameCheckInterval=null),null!==this.portalEl){window.removeEventListener("popstate",this.handleSpaNavigation,!0),window.removeEventListener("hashchange",this.handleSpaNavigation,!0);try{this.portalEl.parentNode&&this.portalEl.parentNode.removeChild(this.portalEl)}catch(t){console.warn("Portal element could not be removed from DOM:",t)}this.portalEl=null}null!==this.triggerEl&&this.triggerEl.removeAttribute("aria-describedby"),this.contentDiv=null}render(){return i(r,{key:"4e6188e03c2f1d33e571b96a3006a585840716bd",id:this.componentId||void 0,class:{"pds-tooltip--is-open":this.opened}},i("span",{key:"0b82d180295421c32548577fb2038422b8ebd3be",class:"pds-tooltip__trigger",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide,ref:t=>this.triggerEl=t},i("slot",{key:"661014ee46b11bcc906e7b64ef8c8a5739d459f0"})),i("div",{key:"1861ce9b260f5f7d2eb0a1f337dadd63a0dfee97",class:"pds-tooltip__content-slot-wrapper",hidden:!0},i("slot",{key:"963fb263c72fba432c2b672a2c3e85ca524f2b67",name:"content"})))}get el(){return this}static get watchers(){return{opened:[{handleOpenToggle:0}]}}static get style(){return'.pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:relative;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}'}},[260,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],maxWidth:[1,"max-width"],opened:[1540],_isInteractiveOpen:[32],showTooltip:[64],hideTooltip:[64]},void 0,{opened:[{handleOpenToggle:0}]}]);h.instanceCounter=0;const d=h,c=function(){"undefined"!=typeof customElements&&["pds-tooltip"].forEach((t=>{"pds-tooltip"===t&&(customElements.get(s(t))||customElements.define(s(t),h))}))};export{d as PdsTooltip,c as defineCustomElement}

package/components/scroll.js

@@ -1,78 +1 @@
-let cachedRtlScrollType = null;
-/**
- * Detects how this browser reports scrollLeft for RTL overflow containers.
- * @see https://github.com/othree/jquery.rtl-scroll-type
- */
-function getRtlScrollType() {
-    if (cachedRtlScrollType) {
-        return cachedRtlScrollType;
-    }
-    if (typeof document === 'undefined') {
-        cachedRtlScrollType = 'default';
-        return cachedRtlScrollType;
-    }
-    const probe = document.createElement('div');
-    probe.style.width = '100px';
-    probe.style.height = '100px';
-    probe.style.position = 'absolute';
-    probe.style.top = '-1000px';
-    probe.style.overflow = 'scroll';
-    probe.style.direction = 'rtl';
-    const inner = document.createElement('div');
-    inner.style.width = '200px';
-    inner.style.height = '100px';
-    probe.appendChild(inner);
-    document.body.appendChild(probe);
-    if (probe.scrollLeft > 0) {
-        cachedRtlScrollType = 'reverse';
-    }
-    else {
-        probe.scrollLeft = 1;
-        cachedRtlScrollType = probe.scrollLeft === 0 ? 'negative' : 'default';
-    }
-    document.body.removeChild(probe);
-    return cachedRtlScrollType;
-}
-/** True when the element's used text direction is RTL (inherits from ancestors). */
-function isRtlDirection(element) {
-    return getComputedStyle(element).direction === 'rtl';
-}
-/**
- * RTL scroll offset from inline-start for a known browser scrollLeft model.
- * @see https://github.com/othree/jquery.rtl-scroll-type#3-types-of-scrollleft-scrollwidth--100
- */
-function getRtlScrollOffsetFromStart(scrollLeft, maxScroll, rtlType) {
-    switch (rtlType) {
-        case 'negative':
-            return Math.max(0, -scrollLeft);
-        case 'reverse':
-            return Math.max(0, scrollLeft);
-        case 'default':
-        default:
-            return Math.max(0, maxScroll - scrollLeft);
-    }
-}
-/**
- * Distance scrolled from the inline-start edge (LTR: left, RTL: right).
- */
-function getScrollOffsetFromStart(container) {
-    const { scrollLeft, scrollWidth, clientWidth } = container;
-    const maxScroll = Math.max(0, scrollWidth - clientWidth);
-    if (maxScroll <= 0) {
-        return 0;
-    }
-    const isRtl = isRtlDirection(container);
-    if (!isRtl) {
-        return scrollLeft;
-    }
-    return getRtlScrollOffsetFromStart(scrollLeft, maxScroll, getRtlScrollType());
-}
-/** True when the container is scrolled away from its inline-start edge. */
-function isScrolledFromInlineStart(container) {
-    return getScrollOffsetFromStart(container) > 0;
-}
-
-export { isRtlDirection as a, getScrollOffsetFromStart as g, isScrolledFromInlineStart as i };
-//# sourceMappingURL=scroll.js.map
-
-//# sourceMappingURL=scroll.js.map
+let t=null;function e(t){return"rtl"===getComputedStyle(t).direction}function n(n){const{scrollLeft:r,scrollWidth:u,clientWidth:c}=n,o=Math.max(0,u-c);return o<=0?0:e(n)?function(t,e,n){switch(n){case"negative":return Math.max(0,-t);case"reverse":return Math.max(0,t);default:return Math.max(0,e-t)}}(r,o,function(){if(t)return t;if("undefined"==typeof document)return t="default",t;const e=document.createElement("div");e.style.width="100px",e.style.height="100px",e.style.position="absolute",e.style.top="-1000px",e.style.overflow="scroll",e.style.direction="rtl";const n=document.createElement("div");return n.style.width="200px",n.style.height="100px",e.appendChild(n),document.body.appendChild(e),e.scrollLeft>0?t="reverse":(e.scrollLeft=1,t=0===e.scrollLeft?"negative":"default"),document.body.removeChild(e),t}()):r}function r(t){return n(t)>0}export{e as a,n as g,r as i}