@pine-ds/core 3.26.3 → 3.27.0

package/components/pds-modal.js

@@ -1,291 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-
-const pdsModalCss = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}";
-
-const PdsModal$1 = /*@__PURE__*/ proxyCustomElement(class PdsModal extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.pdsModalOpen = createEvent(this, "pdsModalOpen", 7);
-        this.pdsModalClose = createEvent(this, "pdsModalClose", 7);
-        this.focusableElements = [];
-        /**
-         * Whether the modal can be dismissed by clicking the backdrop
-         * @default true
-         */
-        this.backdropDismiss = true;
-        /**
-         * Whether the modal is open
-         * @default false
-         */
-        this.open = false;
-        /**
-         * The size of the modal
-         * @default 'md'
-         */
-        this.size = 'md';
-        /**
-         * Whether the modal content should be scrollable
-         * @default true
-         */
-        this.scrollable = true;
-        /**
-         * Stores the list of focusable elements in the modal
-         */
-        this.focusableElementsArray = [];
-        this.handleBackdropClick = (e) => {
-            if (!this.backdropDismiss || !this.open)
-                return;
-            if (e.target.classList.contains('pds-modal__backdrop')) {
-                e.stopPropagation();
-                // Only close if this is the innermost modal
-                if (this.isInnermostModal()) {
-                    this.hideModal();
-                }
-            }
-        };
-        this.handleKeyDown = (e) => {
-            // If the modal is not open, don't handle any keyboard events
-            if (!this.open)
-                return;
-            // Handle Escape key to close the modal
-            if (e.key === 'Escape') {
-                // Always prevent native dialog close behavior
-                e.preventDefault();
-                // Only close if backdropDismiss is enabled and this is the innermost modal
-                if (this.backdropDismiss && this.isInnermostModal()) {
-                    this.hideModal();
-                }
-                return;
-            }
-            // Handle Tab key for focus trapping
-            if (e.key === 'Tab') {
-                // If there are no focusable elements, do nothing
-                if (this.focusableElements.length === 0)
-                    return;
-                // Get the first and last focusable elements
-                const firstFocusableElement = this.focusableElements[0];
-                const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];
-                // Get the current active element
-                const activeElement = document.activeElement;
-                // Check if we need to wrap focus
-                const isFirstElement = activeElement === firstFocusableElement ||
-                    firstFocusableElement.contains(activeElement);
-                const isLastElement = activeElement === lastFocusableElement ||
-                    lastFocusableElement.contains(activeElement);
-                // If shift + tab is pressed and focus is on the first element, move to the last element
-                if (e.shiftKey && isFirstElement) {
-                    e.preventDefault();
-                    this.focusElement(lastFocusableElement);
-                }
-                // If tab is pressed and focus is on the last element, move to the first element
-                else if (!e.shiftKey && isLastElement) {
-                    e.preventDefault();
-                    this.focusElement(firstFocusableElement);
-                }
-            }
-        };
-    }
-    componentDidLoad() {
-        this.modalRef = this.el.querySelector('.pds-modal__backdrop');
-        // Add keyboard event listener
-        document.addEventListener('keydown', this.handleKeyDown);
-    }
-    disconnectedCallback() {
-        // Clean up event listener
-        document.removeEventListener('keydown', this.handleKeyDown);
-    }
-    handleOpenChange(newValue) {
-        if (newValue) {
-            this.showModal();
-        }
-        else {
-            this.hideModal();
-        }
-    }
-    /**
-     * Updates the list of focusable elements in the modal
-     */
-    updateFocusableElements() {
-        if (!this.modalRef)
-            return;
-        // Get all focusable elements within the modal
-        const selector = [
-            'a[href]',
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-            'pds-button:not([disabled])',
-            'pds-link:not([disabled])',
-            'pds-input:not([disabled])',
-            'pds-checkbox:not([disabled])',
-            'pds-radio:not([disabled])',
-            'pds-switch:not([disabled])',
-            'pds-select:not([disabled])',
-        ].join(',');
-        this.focusableElements = Array.from(this.modalRef.querySelectorAll(selector));
-        // Filter out elements with display: none or visibility: hidden
-        this.focusableElements = this.focusableElements.filter(el => {
-            const style = window.getComputedStyle(el);
-            return style.display !== 'none' && style.visibility !== 'hidden';
-        });
-    }
-    /**
-     * Sets focus to the first focusable element in the modal
-     */
-    setInitialFocus() {
-        if (this.focusableElements.length === 0)
-            return;
-        // Focus the first focusable element
-        const firstElement = this.focusableElements[0];
-        // For web components, we need to ensure they're properly focused
-        this.focusElement(firstElement);
-    }
-    /**
-     * Helper method to focus an element, with special handling for web components
-     */
-    focusElement(element) {
-        if (!element)
-            return;
-        try {
-            // Try standard focus first
-            element.focus();
-            // Check if focus worked
-            setTimeout(() => {
-                if (document.activeElement !== element) {
-                    // For web components, try to find a focusable element inside
-                    if (element.shadowRoot) {
-                        const focusableInShadow = element.shadowRoot.querySelector('button, [tabindex], input, a[href]');
-                        if (focusableInShadow) {
-                            focusableInShadow.focus();
-                        }
-                    }
-                }
-            }, 0);
-        }
-        catch (error) {
-            console.error('Error focusing element:', error);
-        }
-    }
-    /**
-     * Opens the modal
-     */
-    async showModal() {
-        if (this.modalRef) {
-            try {
-                // Store the currently focused element to restore focus when modal closes
-                this.previousActiveElement = document.activeElement;
-                // Use native dialog showModal method which makes the rest of the page inert
-                this.modalRef.showModal();
-                this.open = true;
-                // Update focusable elements and set initial focus
-                // Using a longer timeout to ensure all components are fully rendered
-                setTimeout(() => {
-                    this.updateFocusableElements();
-                    this.setInitialFocus();
-                    this.pdsModalOpen.emit();
-                }, 100);
-            }
-            catch (error) {
-                console.error('Failed to show modal:', error);
-            }
-        }
-    }
-    /**
-     * Closes the modal
-     */
-    async hideModal() {
-        if (this.modalRef) {
-            try {
-                this.modalRef.close();
-                this.open = false;
-                // Restore focus to the element that was focused before the modal was opened
-                if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
-                    this.previousActiveElement.focus();
-                }
-                this.pdsModalClose.emit();
-            }
-            catch (error) {
-                console.error('Failed to hide modal:', error);
-            }
-        }
-    }
-    /**
-     * Gets the z-index of a modal's backdrop element
-     */
-    getBackdropZIndex(modal) {
-        const backdrop = modal.querySelector('.pds-modal__backdrop');
-        return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
-    }
-    /**
-     * Checks if this modal is the innermost (highest z-index) modal
-     */
-    isInnermostModal() {
-        // Find all open modals
-        const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(modal => modal.open);
-        if (openModals.length === 0)
-            return false;
-        // Get this modal's backdrop element
-        const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');
-        if (!thisBackdrop)
-            return false;
-        // Get computed z-index of all open modal backdrops
-        const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));
-        // Get the highest z-index
-        const maxZIndex = Math.max(...modalZIndexes);
-        // Check if this modal's backdrop has the highest z-index
-        const thisZIndex = this.getBackdropZIndex(this.el);
-        return thisZIndex === maxZIndex;
-    }
-    render() {
-        return (h("dialog", { key: 'cf2710a889d8f0e80a3551088ab38a88dc44ad1e', class: {
-                'pds-modal__backdrop': true,
-                'open': this.open
-            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'a06d017153e67ad38bc1ced56ba22aeade977aaf', class: {
-                'pds-modal': true,
-                [`pds-modal--${this.size}`]: true,
-                'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: 'd995c586809a4940c091912244a86cb4605a961c' }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-    static get style() { return pdsModalCss; }
-}, [260, "pds-modal", {
-        "backdropDismiss": [4, "backdrop-dismiss"],
-        "componentId": [1, "component-id"],
-        "open": [1028],
-        "size": [1],
-        "scrollable": [4],
-        "focusableElementsArray": [32],
-        "showModal": [64],
-        "hideModal": [64]
-    }, undefined, {
-        "open": ["handleOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-modal"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-modal":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsModal$1);
-            }
-            break;
-    } });
-}
-
-const PdsModal = PdsModal$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsModal, defineCustomElement };
-//# sourceMappingURL=pds-modal.js.map
-
-//# sourceMappingURL=pds-modal.js.map
+import{proxyCustomElement as t,HTMLElement as i,createEvent as o,h as s,transformTag as e}from"@stencil/core/internal/client";const d=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.pdsModalOpen=o(this,"pdsModalOpen",7),this.pdsModalClose=o(this,"pdsModalClose",7),this.focusableElements=[],this.backdropDismiss=!0,this.open=!1,this.size="md",this.scrollable=!0,this.focusableElementsArray=[],this.handleBackdropClick=t=>{this.backdropDismiss&&this.open&&t.target.classList.contains("pds-modal__backdrop")&&(t.stopPropagation(),this.isInnermostModal()&&this.hideModal())},this.handleKeyDown=t=>{if(this.open){if("Escape"===t.key)return t.preventDefault(),void(this.backdropDismiss&&this.isInnermostModal()&&this.hideModal());if("Tab"===t.key){if(0===this.focusableElements.length)return;const i=this.focusableElements[0],o=this.focusableElements[this.focusableElements.length-1],s=document.activeElement,e=s===i||i.contains(s),d=s===o||o.contains(s);t.shiftKey&&e?(t.preventDefault(),this.focusElement(o)):!t.shiftKey&&d&&(t.preventDefault(),this.focusElement(i))}}}}componentDidLoad(){this.modalRef=this.el.querySelector(".pds-modal__backdrop"),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.handleKeyDown)}handleOpenChange(t){t?this.showModal():this.hideModal()}updateFocusableElements(){this.modalRef&&(this.focusableElements=Array.from(this.modalRef.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),pds-button:not([disabled]),pds-link:not([disabled]),pds-input:not([disabled]),pds-checkbox:not([disabled]),pds-radio:not([disabled]),pds-switch:not([disabled]),pds-select:not([disabled])')),this.focusableElements=this.focusableElements.filter((t=>{const i=window.getComputedStyle(t);return"none"!==i.display&&"hidden"!==i.visibility})))}setInitialFocus(){0!==this.focusableElements.length&&this.focusElement(this.focusableElements[0])}focusElement(t){if(t)try{t.focus(),setTimeout((()=>{if(document.activeElement!==t&&t.shadowRoot){const i=t.shadowRoot.querySelector("button, [tabindex], input, a[href]");i&&i.focus()}}),0)}catch(t){console.error("Error focusing element:",t)}}async showModal(){if(this.modalRef)try{this.previousActiveElement=document.activeElement,this.modalRef.showModal(),this.open=!0,setTimeout((()=>{this.updateFocusableElements(),this.setInitialFocus(),this.pdsModalOpen.emit()}),100)}catch(t){console.error("Failed to show modal:",t)}}async hideModal(){if(this.modalRef)try{this.modalRef.close(),this.open=!1,this.previousActiveElement&&"function"==typeof this.previousActiveElement.focus&&this.previousActiveElement.focus(),this.pdsModalClose.emit()}catch(t){console.error("Failed to hide modal:",t)}}getBackdropZIndex(t){const i=t.querySelector(".pds-modal__backdrop");return i?parseInt(getComputedStyle(i).zIndex,10):-1}isInnermostModal(){const t=Array.from(document.querySelectorAll("pds-modal")).filter((t=>t.open));if(0===t.length)return!1;if(!this.el.querySelector(".pds-modal__backdrop"))return!1;const i=t.map((t=>this.getBackdropZIndex(t))),o=Math.max(...i);return this.getBackdropZIndex(this.el)===o}render(){return s("dialog",{key:"cf2710a889d8f0e80a3551088ab38a88dc44ad1e",class:{"pds-modal__backdrop":!0,open:this.open},"aria-modal":"true","aria-labelledby":this.componentId+"-heading",onClick:this.handleBackdropClick},s("div",{key:"a06d017153e67ad38bc1ced56ba22aeade977aaf",class:{"pds-modal":!0,["pds-modal--"+this.size]:!0,"pds-modal--scrollable":this.scrollable},part:"modal"},s("slot",{key:"d995c586809a4940c091912244a86cb4605a961c"})))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}"}},[260,"pds-modal",{backdropDismiss:[4,"backdrop-dismiss"],componentId:[1,"component-id"],open:[1028],size:[1],scrollable:[4],focusableElementsArray:[32],showModal:[64],hideModal:[64]},void 0,{open:[{handleOpenChange:0}]}]),a=d,n=function(){"undefined"!=typeof customElements&&["pds-modal"].forEach((t=>{"pds-modal"===t&&(customElements.get(e(t))||customElements.define(e(t),d))}))};export{a as PdsModal,n as defineCustomElement}