@pine-ds/core 3.1.0 → 3.2.0

package/dist/collection/components/pds-modal/pds-modal.js

@@ -0,0 +1,426 @@
+import { h } from "@stencil/core";
+export class PdsModal {
+    constructor() {
+        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';
+        /**
+         * 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') {
+                // Only close if this is the innermost modal
+                if (this.isInnermostModal()) {
+                    e.preventDefault();
+                    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: 'c27d56b7717f739fb8ed7a243e0715a806ed3b0c', class: {
+                'pds-modal__backdrop': true,
+                'open': this.open
+            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '083bfc9fa7ec82b9f5deb9b49f19d10abfc5c912', class: `pds-modal pds-modal--${this.size} pds-modal--scrollable` }, h("slot", { key: '2c47ddf024a9b1b7824de478f8d15a4af74627bb' }))));
+    }
+    static get is() { return "pds-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "backdropDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the modal can be dismissed by clicking the backdrop"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "backdrop-dismiss",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the modal is open"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'fullscreen'",
+                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'md'"
+                        }],
+                    "text": "The size of the modal"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focusableElementsArray": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsModalOpen",
+                "name": "pdsModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal is opened"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "pdsModalClose",
+                "name": "pdsModalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showModal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the modal",
+                    "tags": []
+                }
+            },
+            "hideModal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the modal",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=pds-modal.js.map

package/dist/collection/components/pds-modal/pds-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-modal.js","sourceRoot":"","sources":["../../../src/components/pds-modal/pds-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pds-modal',\n  styleUrl: 'pds-modal.scss',\n  shadow: false\n})\nexport class PdsModal {\n  private modalRef: HTMLDialogElement;\n  private previousActiveElement: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n\n  @Element() el: HTMLPdsModalElement;\n\n  /**\n   * Whether the modal can be dismissed by clicking the backdrop\n   * @default true\n   */\n  @Prop() backdropDismiss = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Whether the modal is open\n   * @default false\n   */\n  @Prop({ mutable: true }) open = false;\n\n  /**\n   * The size of the modal\n   * @default 'md'\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'fullscreen' = 'md';\n\n  // Modal content is always scrollable by default\n\n  /**\n   * Emitted when the modal is opened\n   */\n  @Event() pdsModalOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the modal is closed\n   */\n  @Event() pdsModalClose: EventEmitter<void>;\n\n  /**\n   * Stores the list of focusable elements in the modal\n   */\n  @State() focusableElementsArray: HTMLElement[] = [];\n\n  componentDidLoad() {\n    this.modalRef = this.el.querySelector('.pds-modal__backdrop') as HTMLDialogElement;\n    // Add keyboard event listener\n    document.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    // Clean up event listener\n    document.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.showModal();\n    } else {\n      this.hideModal();\n    }\n  }\n\n  /**\n   * Updates the list of focusable elements in the modal\n   */\n  private updateFocusableElements() {\n    if (!this.modalRef) return;\n\n    // Get all focusable elements within the modal\n    const selector = [\n      'a[href]',\n      'button:not([disabled])',\n      'input:not([disabled])',\n      'select:not([disabled])',\n      'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n      'pds-button:not([disabled])',\n      'pds-link:not([disabled])',\n      'pds-input:not([disabled])',\n      'pds-checkbox:not([disabled])',\n      'pds-radio:not([disabled])',\n      'pds-switch:not([disabled])',\n      'pds-select:not([disabled])',\n    ].join(',');\n\n    this.focusableElements = Array.from(\n      this.modalRef.querySelectorAll(selector)\n    ) as HTMLElement[];\n\n    // Filter out elements with display: none or visibility: hidden\n    this.focusableElements = this.focusableElements.filter(el => {\n      const style = window.getComputedStyle(el);\n      return style.display !== 'none' && style.visibility !== 'hidden';\n    });\n  }\n\n  /**\n   * Sets focus to the first focusable element in the modal\n   */\n  private setInitialFocus() {\n    if (this.focusableElements.length === 0) return;\n\n    // Focus the first focusable element\n    const firstElement = this.focusableElements[0];\n\n    // For web components, we need to ensure they're properly focused\n    this.focusElement(firstElement);\n  }\n\n  /**\n   * Helper method to focus an element, with special handling for web components\n   */\n  private focusElement(element: HTMLElement) {\n    if (!element) return;\n\n    try {\n      // Try standard focus first\n      element.focus();\n\n      // Check if focus worked\n      setTimeout(() => {\n        if (document.activeElement !== element) {\n          // For web components, try to find a focusable element inside\n          if (element.shadowRoot) {\n            const focusableInShadow = element.shadowRoot.querySelector(\n              'button, [tabindex], input, a[href]'\n            ) as HTMLElement;\n\n            if (focusableInShadow) {\n              focusableInShadow.focus();\n            }\n          }\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error focusing element:', error);\n    }\n  }\n\n  /**\n   * Opens the modal\n   */\n  @Method()\n  async showModal() {\n    if (this.modalRef) {\n      try {\n        // Store the currently focused element to restore focus when modal closes\n        this.previousActiveElement = document.activeElement as HTMLElement;\n\n        // Use native dialog showModal method which makes the rest of the page inert\n        this.modalRef.showModal();\n        this.open = true;\n\n        // Update focusable elements and set initial focus\n        // Using a longer timeout to ensure all components are fully rendered\n        setTimeout(() => {\n          this.updateFocusableElements();\n          this.setInitialFocus();\n          this.pdsModalOpen.emit();\n        }, 100);\n      } catch (error) {\n        console.error('Failed to show modal:', error);\n      }\n    }\n  }\n\n  /**\n   * Closes the modal\n   */\n  @Method()\n  async hideModal() {\n    if (this.modalRef) {\n      try {\n        this.modalRef.close();\n        this.open = false;\n\n        // Restore focus to the element that was focused before the modal was opened\n        if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {\n          this.previousActiveElement.focus();\n        }\n\n        this.pdsModalClose.emit();\n      } catch (error) {\n        console.error('Failed to hide modal:', error);\n      }\n    }\n  }\n\n  private handleBackdropClick = (e: MouseEvent) => {\n    if (!this.backdropDismiss || !this.open) return;\n\n    if ((e.target as HTMLElement).classList.contains('pds-modal__backdrop')) {\n      e.stopPropagation();\n\n      // Only close if this is the innermost modal\n      if (this.isInnermostModal()) {\n        this.hideModal();\n      }\n    }\n  };\n\n  /**\n   * Gets the z-index of a modal's backdrop element\n   */\n  private getBackdropZIndex(modal: Element): number {\n    const backdrop = modal.querySelector('.pds-modal__backdrop');\n    return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;\n  }\n\n  /**\n   * Checks if this modal is the innermost (highest z-index) modal\n   */\n  private isInnermostModal(): boolean {\n    // Find all open modals\n    const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(\n      modal => modal.open\n    );\n\n    if (openModals.length === 0) return false;\n\n    // Get this modal's backdrop element\n    const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');\n    if (!thisBackdrop) return false;\n\n    // Get computed z-index of all open modal backdrops\n    const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));\n\n    // Get the highest z-index\n    const maxZIndex = Math.max(...modalZIndexes);\n\n    // Check if this modal's backdrop has the highest z-index\n    const thisZIndex = this.getBackdropZIndex(this.el);\n    return thisZIndex === maxZIndex;\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    // If the modal is not open, don't handle any keyboard events\n    if (!this.open) return;\n\n    // Handle Escape key to close the modal\n    if (e.key === 'Escape') {\n      // Only close if this is the innermost modal\n      if (this.isInnermostModal()) {\n        e.preventDefault();\n        this.hideModal();\n      }\n      return;\n    }\n\n    // Handle Tab key for focus trapping\n    if (e.key === 'Tab') {\n      // If there are no focusable elements, do nothing\n      if (this.focusableElements.length === 0) return;\n\n      // Get the first and last focusable elements\n      const firstFocusableElement = this.focusableElements[0];\n      const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];\n\n      // Get the current active element\n      const activeElement = document.activeElement;\n\n      // Check if we need to wrap focus\n      const isFirstElement = activeElement === firstFocusableElement ||\n                            firstFocusableElement.contains(activeElement as Node);\n\n      const isLastElement = activeElement === lastFocusableElement ||\n                           lastFocusableElement.contains(activeElement as Node);\n\n      // If shift + tab is pressed and focus is on the first element, move to the last element\n      if (e.shiftKey && isFirstElement) {\n        e.preventDefault();\n        this.focusElement(lastFocusableElement);\n      }\n      // If tab is pressed and focus is on the last element, move to the first element\n      else if (!e.shiftKey && isLastElement) {\n        e.preventDefault();\n        this.focusElement(firstFocusableElement);\n      }\n    }\n  };\n\n  render() {\n    return (\n      <dialog\n        class={{\n          'pds-modal__backdrop': true,\n          'open': this.open\n        }}\n        aria-modal=\"true\"\n        aria-labelledby={`${this.componentId}-heading`}\n        onClick={this.handleBackdropClick}\n      >\n        <div\n          class={`pds-modal pds-modal--${this.size} pds-modal--scrollable`}\n        >\n          <slot></slot>\n        </div>\n      </dialog>\n    );\n  }\n}\n"]}