@pine-ds/core 3.26.4 → 3.28.0

package/components/pds-filter.js

@@ -1,524 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as isRtlDirection } from './scroll.js';
-import { t as trash, g as enlarge } from './index2.js';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-
-const pdsFilterCss = ":host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);display:none;inline-size:228px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}";
-
-const PdsFilter$1 = /*@__PURE__*/ proxyCustomElement(class PdsFilter extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsFilterOpen = createEvent(this, "pdsFilterOpen", 7);
-        this.pdsFilterClose = createEvent(this, "pdsFilterClose", 7);
-        this.pdsFilterClear = createEvent(this, "pdsFilterClear", 7);
-        this.scrollRAF = null;
-        this.lastScrollTime = 0;
-        /**
-         * The variant style of the filter trigger.
-         * @defaultValue 'default'
-         */
-        this.variant = 'default';
-        /**
-         * State to track if the popover is open.
-         */
-        this.isOpen = false;
-        /**
-         * Handle native popover toggle events directly on the element
-         * This is needed for browsers with native Popover API support
-         */
-        this.handleNativePopoverToggle = (event) => {
-            const target = event.target;
-            if (target && target.id === `${this.componentId}-popover`) {
-                // Check current popover state
-                let isCurrentlyOpen = false;
-                try {
-                    isCurrentlyOpen = target.matches(':popover-open');
-                }
-                catch (error) {
-                    // Fallback if :popover-open selector isn't supported
-                    isCurrentlyOpen = target.style.display === 'block';
-                }
-                // Update state
-                this.isOpen = isCurrentlyOpen;
-                if (this.isOpen) {
-                    setTimeout(() => this.adjustPopoverPosition(), 0);
-                    this.pdsFilterOpen.emit({
-                        componentId: this.componentId,
-                        variant: this.variant,
-                        text: this.text,
-                    });
-                }
-                else {
-                    this.pdsFilterClose.emit({
-                        componentId: this.componentId,
-                        variant: this.variant,
-                        text: this.text,
-                    });
-                }
-            }
-        };
-        /**
-         * Handle keyboard interactions for clear variant only.
-         */
-        this.handleKeyDown = (event) => {
-            // Only handle clear variant manually, let native API handle everything else
-            if (this.variant === 'clear' && (event.key === 'Enter' || event.key === ' ')) {
-                event.preventDefault();
-                this.handleClick();
-            }
-        };
-        /**
-         * Handle trigger button click. Clear variant emits event, others toggle popover.
-         */
-        this.handleClick = (event) => {
-            if (this.variant === 'clear') {
-                this.pdsFilterClear.emit({
-                    componentId: this.componentId,
-                    text: this.text,
-                });
-                return;
-            }
-            this.closeOtherPopovers();
-            // Check for popover API support
-            const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
-            if (!supportsPopoverAPI) {
-                // Manual fallback for browsers without popover API support
-                // Prevent default to avoid conflicts with any native behavior
-                if (event) {
-                    event.preventDefault();
-                }
-                setTimeout(() => {
-                    if (this.popoverEl != null) {
-                        this.isOpen = !this.isOpen;
-                        if (this.isOpen) {
-                            this.popoverEl.style.display = 'block';
-                            this.popoverEl.classList.add('is-open');
-                            this.adjustPopoverPosition();
-                            this.pdsFilterOpen.emit({
-                                componentId: this.componentId,
-                                variant: this.variant,
-                                text: this.text,
-                            });
-                        }
-                        else {
-                            this.popoverEl.style.display = 'none';
-                            this.popoverEl.classList.remove('is-open');
-                            this.pdsFilterClose.emit({
-                                componentId: this.componentId,
-                                variant: this.variant,
-                                text: this.text,
-                            });
-                        }
-                    }
-                }, 0);
-            }
-            // For browsers with native popover API, let the native behavior handle the toggle
-            // The toggle event listener will capture the state change and emit events
-        };
-    }
-    /**
-     * Component lifecycle: Clean up when disconnected from DOM.
-     * Prevents memory leaks by canceling pending operations and closing popovers.
-     */
-    disconnectedCallback() {
-        // Cancel pending animation frames
-        if (this.scrollRAF) {
-            cancelAnimationFrame(this.scrollRAF);
-            this.scrollRAF = null;
-        }
-        this.lastScrollTime = 0;
-        // Clean up native popover event listeners
-        if (this.popoverEl) {
-            const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
-            if (supportsPopoverAPI) {
-                this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
-            }
-        }
-        // Ensure popover is closed
-        if (this.isOpen && this.popoverEl) {
-            try {
-                this.popoverEl.hidePopover();
-            }
-            catch (error) {
-                this.popoverEl.style.display = 'none';
-                this.popoverEl.classList.remove('is-open');
-            }
-        }
-    }
-    componentDidRender() {
-        // Note: popoverEl is set via ref callback in render method
-        // For browsers with native popover API, we need direct element listeners
-        // since the document listener may not capture native popover toggle events
-        if (this.popoverEl) {
-            const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
-            if (supportsPopoverAPI) {
-                // Remove any existing listeners to avoid duplicates
-                this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
-                // Add direct listener for native popover events
-                this.popoverEl.addEventListener('toggle', this.handleNativePopoverToggle);
-            }
-        }
-    }
-    /**
-     * Reposition popovers on window resize.
-     */
-    handleWindowResize() {
-        if (this.isOpen) {
-            setTimeout(() => this.adjustPopoverPosition(), 16);
-        }
-    }
-    /**
-     * Reposition popovers on scroll with performance throttling.
-     */
-    handleWindowScroll() {
-        if (this.isOpen) {
-            const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
-            const now = performance.now();
-            const throttleMs = supportsAnchorPositioning ? 66 : 33;
-            if (now - this.lastScrollTime < throttleMs) {
-                return;
-            }
-            this.lastScrollTime = now;
-            if (this.scrollRAF) {
-                cancelAnimationFrame(this.scrollRAF);
-            }
-            this.scrollRAF = requestAnimationFrame(() => {
-                if (this.isOpen && this.popoverEl && this.el.isConnected) {
-                    this.adjustPopoverPosition();
-                }
-                this.scrollRAF = null;
-            });
-        }
-    }
-    /**
-     * Closes other open filter popovers to ensure only one is open at a time.
-     */
-    closeOtherPopovers() {
-        const allFilters = document.querySelectorAll('pds-filter');
-        allFilters.forEach((filter) => {
-            var _a;
-            if (filter === this.el)
-                return;
-            const popover = (_a = filter.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__popover');
-            if (popover) {
-                // Check for popover API support to avoid crashes
-                let isPopoverOpen = false;
-                try {
-                    isPopoverOpen = popover.matches(':popover-open');
-                }
-                catch (error) {
-                    // Fallback if :popover-open selector isn't supported
-                    isPopoverOpen = popover.style.display === 'block';
-                }
-                if (isPopoverOpen) {
-                    try {
-                        popover.hidePopover();
-                    }
-                    catch (error) {
-                        popover.style.display = 'none';
-                        popover.classList.remove('is-open');
-                    }
-                }
-            }
-        });
-    }
-    /**
-     * Adjusts popover position to keep it within viewport bounds.
-     * Uses CSS anchor positioning for modern browsers, JavaScript for fallback browsers.
-     */
-    adjustPopoverPosition() {
-        var _a;
-        if (!this.popoverEl || this.variant === 'clear')
-            return;
-        const triggerEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__trigger');
-        if (!triggerEl)
-            return;
-        const triggerRect = triggerEl.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
-        // Get dimensions for boundary detection
-        const popoverWidth = 228;
-        const popoverHeight = this.popoverEl.getBoundingClientRect().height || 200;
-        // Boundary detection for flipping (inline-end overflow respects document direction)
-        const bufferSpace = 20;
-        const isRtl = isRtlDirection(this.el);
-        const wouldOverflowInlineEnd = isRtl
-            ? (triggerRect.right - popoverWidth - bufferSpace) < 0
-            : (triggerRect.left + popoverWidth + bufferSpace) > viewportWidth;
-        const wouldOverflowBottom = (triggerRect.bottom + 8 + popoverHeight + bufferSpace) > viewportHeight;
-        if (supportsAnchorPositioning) {
-            // Modern browsers: CSS anchor positioning + JavaScript-controlled flipping
-            this.popoverEl.classList.remove('popover-flip-horizontal', 'popover-flip-vertical');
-            if (wouldOverflowInlineEnd) {
-                this.popoverEl.classList.add('popover-flip-horizontal');
-            }
-            if (wouldOverflowBottom) {
-                this.popoverEl.classList.add('popover-flip-vertical');
-            }
-        }
-        else {
-            // Fallback browsers: JavaScript positioning with boundary detection
-            let left = isRtl ? triggerRect.right - popoverWidth : triggerRect.left;
-            let top = triggerRect.bottom + 8;
-            let transformOrigin = isRtl ? 'top right' : 'top left';
-            // Apply horizontal flipping if needed
-            if (wouldOverflowInlineEnd) {
-                const actualPopoverWidth = this.popoverEl.getBoundingClientRect().width || popoverWidth;
-                left = isRtl ? triggerRect.left : triggerRect.right - actualPopoverWidth;
-                transformOrigin = isRtl ? 'top left' : 'top right';
-            }
-            // Apply vertical flipping if needed
-            if (wouldOverflowBottom) {
-                top = triggerRect.top - popoverHeight - 8;
-                transformOrigin = transformOrigin.replace('top', 'bottom');
-            }
-            // Apply positioning in single DOM write for performance
-            this.popoverEl.style.cssText = `
-        position: fixed;
-        left: ${left}px;
-        top: ${top}px;
-        z-index: var(--pine-z-index-overlay);
-        transform-origin: ${transformOrigin};
-      `;
-        }
-    }
-    /**
-     * Opens the filter popover programmatically.
-     * Note: Clear variant does not support popover functionality.
-     */
-    async showFilter() {
-        if (this.variant === 'clear') {
-            console.warn('Clear variant does not support showFilter method');
-            return;
-        }
-        if (this.popoverEl != null) {
-            try {
-                this.popoverEl.showPopover();
-            }
-            catch (error) {
-                // Fallback for testing environment where showPopover is not available
-                this.popoverEl.style.display = 'block';
-                this.popoverEl.classList.add('is-open');
-            }
-        }
-    }
-    /**
-     * Closes the filter popover programmatically.
-     * Note: Clear variant does not support popover functionality.
-     */
-    async hideFilter() {
-        if (this.variant === 'clear') {
-            console.warn('Clear variant does not support hideFilter method');
-            return;
-        }
-        if (this.popoverEl != null) {
-            try {
-                this.popoverEl.hidePopover();
-            }
-            catch (error) {
-                // Fallback for testing environment where hidePopover is not available
-                this.popoverEl.style.display = 'none';
-                this.popoverEl.classList.remove('is-open');
-            }
-        }
-    }
-    /**
-     * Listen for popover toggle events for browsers without native Popover API (fallback).
-     * Native API browsers use direct element listeners to avoid conflicts.
-     */
-    handlePopoverToggle(event) {
-        const target = event.target;
-        const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
-        // Only handle events for fallback browsers (Firefox) to avoid duplicate handling
-        if (!supportsPopoverAPI && target && target.id === `${this.componentId}-popover`) {
-            // Check for popover API support to avoid crashes
-            let isCurrentlyOpen = false;
-            try {
-                isCurrentlyOpen = target.matches(':popover-open');
-            }
-            catch (error) {
-                // Fallback if :popover-open selector isn't supported
-                isCurrentlyOpen = target.style.display === 'block';
-            }
-            // Update state
-            this.isOpen = isCurrentlyOpen;
-            if (this.isOpen) {
-                setTimeout(() => this.adjustPopoverPosition(), 0);
-                this.pdsFilterOpen.emit({
-                    componentId: this.componentId,
-                    variant: this.variant,
-                    text: this.text,
-                });
-            }
-            else {
-                this.pdsFilterClose.emit({
-                    componentId: this.componentId,
-                    variant: this.variant,
-                    text: this.text,
-                });
-            }
-        }
-    }
-    /**
-     * Listen for clicks to detect outside dismissal.
-     */
-    handleDocumentClick(event) {
-        // Check if click is outside and popover gets closed
-        if (!this.el.contains(event.target) && this.isOpen && this.variant !== 'clear') {
-            setTimeout(() => {
-                if (this.popoverEl && this.isOpen) {
-                    // Check for popover API support to avoid crashes
-                    const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
-                    let popoverIsClosed = false;
-                    if (supportsPopoverAPI) {
-                        try {
-                            popoverIsClosed = !this.popoverEl.matches(':popover-open');
-                        }
-                        catch (error) {
-                            // Fallback if :popover-open selector isn't supported
-                            popoverIsClosed = this.popoverEl.style.display !== 'block';
-                        }
-                    }
-                    else {
-                        // Manual fallback - assume popover was closed by outside click
-                        popoverIsClosed = true;
-                    }
-                    if (popoverIsClosed) {
-                        this.isOpen = false;
-                        if (!supportsPopoverAPI) {
-                            this.popoverEl.style.display = 'none';
-                            this.popoverEl.classList.remove('is-open');
-                        }
-                        this.pdsFilterClose.emit({
-                            componentId: this.componentId,
-                            variant: this.variant,
-                            text: this.text,
-                        });
-                    }
-                }
-            }, 0);
-        }
-    }
-    /**
-     * Listen for Escape key to ensure close event fires.
-     */
-    handleEscapeKey(event) {
-        if (event.key === 'Escape' && this.isOpen && this.variant !== 'clear') {
-            // Check if popover was closed by Escape
-            setTimeout(() => {
-                if (this.popoverEl && this.isOpen) {
-                    // Check for popover API support to avoid crashes
-                    const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
-                    let popoverIsClosed = false;
-                    if (supportsPopoverAPI) {
-                        try {
-                            popoverIsClosed = !this.popoverEl.matches(':popover-open');
-                        }
-                        catch (error) {
-                            // Fallback if :popover-open selector isn't supported
-                            popoverIsClosed = this.popoverEl.style.display !== 'block';
-                        }
-                    }
-                    else {
-                        // Manual fallback - assume popover was closed by Escape
-                        popoverIsClosed = true;
-                    }
-                    if (popoverIsClosed) {
-                        this.isOpen = false;
-                        if (!supportsPopoverAPI) {
-                            this.popoverEl.style.display = 'none';
-                            this.popoverEl.classList.remove('is-open');
-                        }
-                        this.pdsFilterClose.emit({
-                            componentId: this.componentId,
-                            variant: this.variant,
-                            text: this.text,
-                        });
-                    }
-                }
-            }, 0);
-        }
-    }
-    /**
-     * Get the appropriate icon for the variant.
-     */
-    getIcon() {
-        if (this.variant === 'clear') {
-            return trash;
-        }
-        return this.icon;
-    }
-    /**
-     * Get CSS classes for the trigger button.
-     */
-    getTriggerClasses() {
-        const classes = ['pds-filter__trigger'];
-        classes.push(`pds-filter__trigger--${this.variant}`);
-        if (this.isOpen && this.variant !== 'clear') {
-            classes.push('pds-filter__trigger--open');
-        }
-        return classes.join(' ');
-    }
-    /**
-     * Render the trigger icon.
-     */
-    renderIcon() {
-        const iconToRender = this.getIcon();
-        if (iconToRender == null || iconToRender === '')
-            return null;
-        return (h("pds-icon", { icon: iconToRender, size: "var(--pine-font-size-100)", "aria-hidden": "true", part: "icon" }));
-    }
-    /**
-     * Render the dropdown icon for selected variant.
-     */
-    renderDropdownIcon() {
-        if (this.variant === 'selected') {
-            return (h("pds-icon", { icon: enlarge, size: "var(--pine-dimension-200)", "aria-hidden": "true", class: "pds-filter__dropdown-icon", part: "icon" }));
-        }
-        return null;
-    }
-    render() {
-        return (h(Host, { key: '620b1e6b9ab4a16af9cf601381e3b3bc625677a9', id: this.componentId }, h("button", { key: '6c27edb5a9584e223f0716ae2c95cf07488a041b', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: 'ef9970dc8d453d170703e90ba8690b652e11fa5c', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '8e71b9d19327117dbce1cf50d169699ab771d362', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: 'e1eb24326d93b0247db0e11700286af74b6b19c1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '374f65b6dab21601c1bbd86cf661971a5c6d1d43' })))));
-    }
-    get el() { return this; }
-    static get style() { return pdsFilterCss; }
-}, [257, "pds-filter", {
-        "componentId": [1, "component-id"],
-        "variant": [1],
-        "icon": [1],
-        "text": [1],
-        "isOpen": [32],
-        "showFilter": [64],
-        "hideFilter": [64]
-    }, [[9, "resize", "handleWindowResize"], [9, "scroll", "handleWindowScroll"], [4, "toggle", "handlePopoverToggle"], [4, "click", "handleDocumentClick"], [4, "keydown", "handleEscapeKey"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-filter", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-filter":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsFilter$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsFilter = PdsFilter$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsFilter, defineCustomElement };
-//# sourceMappingURL=pds-filter.js.map
-
-//# sourceMappingURL=pds-filter.js.map
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as r,Host as o,transformTag as n}from"@stencil/core/internal/client";import{a as s}from"./scroll.js";import{t as l,g as a}from"./index2.js";import{d as p}from"./pds-icon2.js";const c=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsFilterOpen=t(this,"pdsFilterOpen",7),this.pdsFilterClose=t(this,"pdsFilterClose",7),this.pdsFilterClear=t(this,"pdsFilterClear",7),this.scrollRAF=null,this.lastScrollTime=0,this.variant="default",this.isOpen=!1,this.handleNativePopoverToggle=e=>{const i=e.target;if(i&&i.id===this.componentId+"-popover"){let e=!1;try{e=i.matches(":popover-open")}catch(t){e="block"===i.style.display}this.isOpen=e,this.isOpen?(setTimeout((()=>this.adjustPopoverPosition()),0),this.pdsFilterOpen.emit({componentId:this.componentId,variant:this.variant,text:this.text})):this.pdsFilterClose.emit({componentId:this.componentId,variant:this.variant,text:this.text})}},this.handleKeyDown=e=>{"clear"!==this.variant||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleClick())},this.handleClick=e=>{"clear"!==this.variant?(this.closeOtherPopovers(),i.prototype.showPopover&&!navigator.userAgent.includes("Firefox")||(e&&e.preventDefault(),setTimeout((()=>{null!=this.popoverEl&&(this.isOpen=!this.isOpen,this.isOpen?(this.popoverEl.style.display="block",this.popoverEl.classList.add("is-open"),this.adjustPopoverPosition(),this.pdsFilterOpen.emit({componentId:this.componentId,variant:this.variant,text:this.text})):(this.popoverEl.style.display="none",this.popoverEl.classList.remove("is-open"),this.pdsFilterClose.emit({componentId:this.componentId,variant:this.variant,text:this.text})))}),0))):this.pdsFilterClear.emit({componentId:this.componentId,text:this.text})}}disconnectedCallback(){if(this.scrollRAF&&(cancelAnimationFrame(this.scrollRAF),this.scrollRAF=null),this.lastScrollTime=0,this.popoverEl&&i.prototype.showPopover&&!navigator.userAgent.includes("Firefox")&&this.popoverEl.removeEventListener("toggle",this.handleNativePopoverToggle),this.isOpen&&this.popoverEl)try{this.popoverEl.hidePopover()}catch(e){this.popoverEl.style.display="none",this.popoverEl.classList.remove("is-open")}}componentDidRender(){this.popoverEl&&i.prototype.showPopover&&!navigator.userAgent.includes("Firefox")&&(this.popoverEl.removeEventListener("toggle",this.handleNativePopoverToggle),this.popoverEl.addEventListener("toggle",this.handleNativePopoverToggle))}handleWindowResize(){this.isOpen&&setTimeout((()=>this.adjustPopoverPosition()),16)}handleWindowScroll(){if(this.isOpen){const e="anchorName"in document.documentElement.style,i=performance.now();if(i-this.lastScrollTime<(e?66:33))return;this.lastScrollTime=i,this.scrollRAF&&cancelAnimationFrame(this.scrollRAF),this.scrollRAF=requestAnimationFrame((()=>{this.isOpen&&this.popoverEl&&this.el.isConnected&&this.adjustPopoverPosition(),this.scrollRAF=null}))}}closeOtherPopovers(){document.querySelectorAll("pds-filter").forEach((e=>{var i;if(e===this.el)return;const t=null===(i=e.shadowRoot)||void 0===i?void 0:i.querySelector(".pds-filter__popover");if(t){let e=!1;try{e=t.matches(":popover-open")}catch(i){e="block"===t.style.display}if(e)try{t.hidePopover()}catch(e){t.style.display="none",t.classList.remove("is-open")}}}))}adjustPopoverPosition(){var e;if(!this.popoverEl||"clear"===this.variant)return;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector(".pds-filter__trigger");if(!i)return;const t=i.getBoundingClientRect(),r=window.innerWidth,o=window.innerHeight,n="anchorName"in document.documentElement.style,l=228,a=this.popoverEl.getBoundingClientRect().height||200,p=s(this.el),c=p?t.right-l-20<0:t.left+l+20>r,d=t.bottom+8+a+20>o;if(n)this.popoverEl.classList.remove("popover-flip-horizontal","popover-flip-vertical"),c&&this.popoverEl.classList.add("popover-flip-horizontal"),d&&this.popoverEl.classList.add("popover-flip-vertical");else{let e=p?t.right-l:t.left,i=t.bottom+8,r=p?"top right":"top left";if(c){const i=this.popoverEl.getBoundingClientRect().width||l;e=p?t.left:t.right-i,r=p?"top left":"top right"}d&&(i=t.top-a-8,r=r.replace("top","bottom")),this.popoverEl.style.cssText=`\n        position: fixed;\n        left: ${e}px;\n        top: ${i}px;\n        z-index: var(--pine-z-index-overlay);\n        transform-origin: ${r};\n      `}}async showFilter(){if("clear"!==this.variant){if(null!=this.popoverEl)try{this.popoverEl.showPopover()}catch(e){this.popoverEl.style.display="block",this.popoverEl.classList.add("is-open")}}else console.warn("Clear variant does not support showFilter method")}async hideFilter(){if("clear"!==this.variant){if(null!=this.popoverEl)try{this.popoverEl.hidePopover()}catch(e){this.popoverEl.style.display="none",this.popoverEl.classList.remove("is-open")}}else console.warn("Clear variant does not support hideFilter method")}handlePopoverToggle(e){const t=e.target;if((!i.prototype.showPopover||navigator.userAgent.includes("Firefox"))&&t&&t.id===this.componentId+"-popover"){let e=!1;try{e=t.matches(":popover-open")}catch(i){e="block"===t.style.display}this.isOpen=e,this.isOpen?(setTimeout((()=>this.adjustPopoverPosition()),0),this.pdsFilterOpen.emit({componentId:this.componentId,variant:this.variant,text:this.text})):this.pdsFilterClose.emit({componentId:this.componentId,variant:this.variant,text:this.text})}}handleDocumentClick(e){!this.el.contains(e.target)&&this.isOpen&&"clear"!==this.variant&&setTimeout((()=>{if(this.popoverEl&&this.isOpen){const e=i.prototype.showPopover&&!navigator.userAgent.includes("Firefox");let t=!1;if(e)try{t=!this.popoverEl.matches(":popover-open")}catch(e){t="block"!==this.popoverEl.style.display}else t=!0;t&&(this.isOpen=!1,e||(this.popoverEl.style.display="none",this.popoverEl.classList.remove("is-open")),this.pdsFilterClose.emit({componentId:this.componentId,variant:this.variant,text:this.text}))}}),0)}handleEscapeKey(e){"Escape"===e.key&&this.isOpen&&"clear"!==this.variant&&setTimeout((()=>{if(this.popoverEl&&this.isOpen){const e=i.prototype.showPopover&&!navigator.userAgent.includes("Firefox");let t=!1;if(e)try{t=!this.popoverEl.matches(":popover-open")}catch(e){t="block"!==this.popoverEl.style.display}else t=!0;t&&(this.isOpen=!1,e||(this.popoverEl.style.display="none",this.popoverEl.classList.remove("is-open")),this.pdsFilterClose.emit({componentId:this.componentId,variant:this.variant,text:this.text}))}}),0)}getIcon(){return"clear"===this.variant?l:this.icon}getTriggerClasses(){const e=["pds-filter__trigger"];return e.push("pds-filter__trigger--"+this.variant),this.isOpen&&"clear"!==this.variant&&e.push("pds-filter__trigger--open"),e.join(" ")}renderIcon(){const e=this.getIcon();return null==e||""===e?null:r("pds-icon",{icon:e,size:"var(--pine-font-size-100)","aria-hidden":"true",part:"icon"})}renderDropdownIcon(){return"selected"===this.variant?r("pds-icon",{icon:a,size:"var(--pine-dimension-200)","aria-hidden":"true",class:"pds-filter__dropdown-icon",part:"icon"}):null}render(){return r(o,{key:"620b1e6b9ab4a16af9cf601381e3b3bc625677a9",id:this.componentId},r("button",{key:"6c27edb5a9584e223f0716ae2c95cf07488a041b",class:this.getTriggerClasses(),type:"button",popoverTarget:"clear"!==this.variant?this.componentId+"-popover":void 0,popoverTargetAction:"clear"!==this.variant?"toggle":void 0,onKeyDown:"clear"===this.variant?this.handleKeyDown:void 0,onClick:e=>this.handleClick(e),part:"button","aria-expanded":this.isOpen?"true":"false","aria-haspopup":"clear"!==this.variant?"true":void 0,"aria-controls":"clear"!==this.variant?this.componentId+"-popover":void 0},r("span",{key:"ef9970dc8d453d170703e90ba8690b652e11fa5c",class:"pds-filter__button-content",part:"button-content"},this.renderIcon(),this.text&&r("span",{key:"8e71b9d19327117dbce1cf50d169699ab771d362",class:"pds-filter__button-text",part:"button-text"},this.text),this.renderDropdownIcon())),"clear"!==this.variant&&r("div",{key:"e1eb24326d93b0247db0e11700286af74b6b19c1",ref:e=>this.popoverEl=e,id:this.componentId+"-popover",class:"pds-filter__popover",popover:"auto",part:"popover"},r("slot",{key:"374f65b6dab21601c1bbd86cf661971a5c6d1d43"})))}get el(){return this}static get style(){return":host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);display:none;inline-size:228px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}"}},[257,"pds-filter",{componentId:[1,"component-id"],variant:[1],icon:[1],text:[1],isOpen:[32],showFilter:[64],hideFilter:[64]},[[9,"resize","handleWindowResize"],[9,"scroll","handleWindowScroll"],[4,"toggle","handlePopoverToggle"],[4,"click","handleDocumentClick"],[4,"keydown","handleEscapeKey"]]]),d=c,h=function(){"undefined"!=typeof customElements&&["pds-filter","pds-icon"].forEach((e=>{switch(e){case"pds-filter":customElements.get(n(e))||customElements.define(n(e),c);break;case"pds-icon":customElements.get(n(e))||p()}}))};export{d as PdsFilter,h as defineCustomElement}

package/components/pds-filters.js

@@ -1,40 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const pdsFiltersCss = ":host{display:block}.pds-filters{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-100)}";
-
-const PdsFilters$1 = /*@__PURE__*/ proxyCustomElement(class PdsFilters extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    render() {
-        return (h(Host, { key: '7007a635d3866781dfd67bd2d3b2dab46d36cffc', id: this.componentId }, h("div", { key: 'e6eb4c76bfb39050aaa01ad297df995de7df484b', class: "pds-filters" }, h("slot", { key: '543c83c7422b3e1e9a2446618fe8119d76478df4' }))));
-    }
-    static get style() { return pdsFiltersCss; }
-}, [257, "pds-filters", {
-        "componentId": [1, "component-id"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-filters"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-filters":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsFilters$1);
-            }
-            break;
-    } });
-}
-
-const PdsFilters = PdsFilters$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsFilters, defineCustomElement };
-//# sourceMappingURL=pds-filters.js.map
-
-//# sourceMappingURL=pds-filters.js.map
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as d,transformTag as i}from"@stencil/core/internal/client";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return t(d,{key:"7007a635d3866781dfd67bd2d3b2dab46d36cffc",id:this.componentId},t("div",{key:"e6eb4c76bfb39050aaa01ad297df995de7df484b",class:"pds-filters"},t("slot",{key:"543c83c7422b3e1e9a2446618fe8119d76478df4"})))}static get style(){return":host{display:block}.pds-filters{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-100)}"}},[257,"pds-filters",{componentId:[1,"component-id"]}]),n=l,r=function(){"undefined"!=typeof customElements&&["pds-filters"].forEach((e=>{"pds-filters"===e&&(customElements.get(i(e))||customElements.define(i(e),l))}))};export{n as PdsFilters,r as defineCustomElement}

package/components/pds-icon.js

@@ -1,9 +1 @@
-import { P as PdsIcon$1, d as defineCustomElement$1 } from './pds-icon2.js';
-
-const PdsIcon = PdsIcon$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsIcon, defineCustomElement };
-//# sourceMappingURL=pds-icon.js.map
-
-//# sourceMappingURL=pds-icon.js.map
+import{P as o,d as s}from"./pds-icon2.js";const p=o,r=s;export{p as PdsIcon,r as defineCustomElement}