@pine-ds/core 3.1.0 → 3.2.0

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

@@ -0,0 +1,415 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-modal'),
+  component: 'pds-modal',
+  decorators: [withActions],
+  title: 'components/Modal',
+  args: {
+    backdropDismiss: true,
+    componentId: 'modal-demo',
+    open: false,
+    size: 'md',
+  },
+  parameters: {
+    actions: {
+      handles: ['pdsModalOpen', 'pdsModalClose'],
+    }
+  }
+}
+
+const BaseTemplate = (args) => html`
+  <div>
+    <pds-button id="show-modal" onClick="document.querySelector('#${args.componentId}').open = true">
+      Open Modal
+    </pds-button>
+
+    <pds-modal
+      id="${args.componentId}"
+      component-id="${args.componentId}"
+      size="${args.size}"
+      ?backdrop-dismiss="${args.backdropDismiss}"
+      ?open="${args.open}"
+    >
+      <pds-modal-header>
+        <pds-box direction="column" fit padding="md">
+          <pds-box
+            align-items="center"
+            fit
+            justify-content="space-between"
+          >
+            <pds-text tag="h2" size="h3">Modal Title</pds-text>
+            <pds-button
+              class="pds-modal__close"
+              variant="unstyled"
+              icon-only="true"
+              onclick="document.querySelector('#${args.componentId}').open = false"
+              aria-label="Close modal"
+              part="close-button"
+            >
+              <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+            </pds-button>
+          </pds-box>
+          <pds-box>
+            <pds-text tag="p" size="md">Modal Subtitle</pds-text>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+
+      <pds-modal-content>
+        <pds-box fit direction="column" padding-inline-start="md" padding-inline-end="md">
+          <p>This is the modal content. You can put any content here.</p>
+        </pds-box>
+      </pds-modal-content>
+
+      <pds-modal-footer>
+        <pds-box
+          justify-content="space-between"
+          fit
+          padding="md"
+        >
+          <pds-button variant="unstyled" onclick="document.querySelector('#${args.componentId}').open = false">Close</pds-button>
+          <pds-box gap="sm" justify-content="end">
+            <pds-button variant="secondary" onClick="document.querySelector('#${args.componentId}').open = false">
+              Cancel
+            </pds-button>
+            <pds-button variant="primary">Confirm</pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+  </div>
+`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'demo-modal',
+  size: 'md',
+  open: false,
+};
+
+const DestructiveTemplate = (args) => html`
+  <div>
+    <pds-button id="show-modal" onClick="document.querySelector('#${args.componentId}').open = true">
+      Open Modal
+    </pds-button>
+
+    <pds-modal
+      id="${args.componentId}"
+      component-id="${args.componentId}"
+      size="${args.size}"
+      ?backdrop-dismiss="${args.backdropDismiss}"
+      ?open="${args.open}"
+    >
+      <pds-modal-header>
+        <pds-box direction="column" fit padding="md">
+          <pds-box
+            align-items="center"
+            fit
+            justify-content="space-between"
+          >
+            <pds-text tag="h2" size="h3">Modal Title</pds-text>
+            <pds-button
+              class="pds-modal__close"
+              variant="unstyled"
+              icon-only="true"
+              onclick="document.querySelector('#${args.componentId}').open = false"
+              aria-label="Close modal"
+              part="close-button"
+            >
+              <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+            </pds-button>
+          </pds-box>
+          <pds-box>
+            <pds-text tag="p" size="md">Modal Subtitle</pds-text>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+
+      <pds-modal-content>
+        <pds-box fit direction="column" padding-inline-start="md" padding-inline-end="md">
+          <p>This is the modal content. You can put any content here.</p>
+        </pds-box>
+      </pds-modal-content>
+      <pds-modal-footer>
+        <pds-box
+          justify-content="space-between"
+          fit
+          padding="md"
+        >
+          <pds-button variant="unstyled" onclick="document.querySelector('#${args.componentId}').open = false">Close</pds-button>
+          <pds-box gap="sm" justify-content="end">
+            <pds-button variant="secondary" onClick="document.querySelector('#${args.componentId}').open = false">
+              Cancel
+            </pds-button>
+            <pds-button variant="destructive">Confirm</pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+  </div>
+`;
+
+export const Destructive = DestructiveTemplate.bind({});
+Destructive.args = {
+  size: 'md',
+};
+
+const CustomContentTemplate = (args) => html`
+    <div style="padding: 1rem;">
+      <pds-button id="show-modal" onClick="document.querySelector('#${args.componentId}').open = true">
+        Open Form Modal
+      </pds-button>
+
+      <pds-modal
+        id="${args.componentId}"
+        size="${args.size}"
+        ?backdrop-dismiss="${args.backdropDismiss}"
+        ?open="${args.open}"
+      >
+
+        <pds-modal-header>
+          <pds-box direction="column" fit padding="md">
+            <pds-box
+              align-items="center"
+              fit
+              justify-content="space-between"
+            >
+              <pds-text tag="h2" size="h3">Modal Title</pds-text>
+              <pds-button
+                class="pds-modal__close"
+                variant="unstyled"
+                icon-only="true"
+                onclick="document.querySelector('#${args.componentId}').open = false"
+                aria-label="Close modal"
+                part="close-button"
+              >
+                <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+              </pds-button>
+            </pds-box>
+            <pds-box>
+              <pds-text tag="p" size="md">Modal Subtitle</pds-text>
+            </pds-box>
+          </pds-box>
+        </pds-modal-header>
+
+        <pds-modal-content>
+          <pds-box direction="column" padding-inline-start="md" padding-inline-end="md" fit>
+            <form
+              id="demo-form"
+              @submit=${(e) => {
+                e.preventDefault();
+                const modal = document.querySelector('#${args.componentId}');
+                modal?.close();
+              }}
+            >
+              <div style="display: grid; gap: 1rem;">
+                <pds-input label="Full Name" required></pds-input>
+                <pds-input label="Email" type="email" required></pds-input>
+                <pds-input label="Password" type="password" required></pds-input>
+                <pds-checkbox>I agree to the terms and conditions</pds-checkbox>
+              </div>
+            </form>
+          </pds-box>
+        </pds-modal-content>
+
+        <pds-modal-footer>
+          <pds-box
+            justify-content="space-between"
+            fit
+            padding="md"
+        >
+          <pds-button variant="unstyled" onclick="document.querySelector('#${args.componentId}').open = false">Close</pds-button>
+          <pds-box gap="sm" justify-content="end">
+            <pds-button
+              variant="secondary"
+              onclick="document.querySelector('#${args.componentId}').open = false"
+            >
+              Cancel
+            </pds-button>
+            <pds-button variant="primary" form="demo-form" type="submit">Submit</pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+  </div>
+`;
+
+export const CustomContent = CustomContentTemplate.bind({});
+CustomContent.args = {
+  componentId: 'custom-modal',
+  size: 'md',
+  open: false,
+};
+
+const ScrollableTemplate = (args) => {
+  return html`
+    <div style="padding: 1rem;">
+      <pds-button id="show-modal" onClick="document.querySelector('#${args.componentId}').open = true">
+        Open Scrolling Modal
+      </pds-button>
+
+      <pds-modal
+        id="${args.componentId}"
+        size="${args.size}"
+        ?backdrop-dismiss="${args.backdropDismiss}"
+        ?open="${args.open}"
+      >
+        <pds-modal-header>
+          <pds-box direction="column" fit padding="md">
+            <pds-box
+              align-items="center"
+              fit
+              justify-content="space-between"
+            >
+              <pds-text tag="h2" size="h3">Modal Title</pds-text>
+              <pds-button
+                class="pds-modal__close"
+                variant="unstyled"
+                icon-only="true"
+                onclick="document.querySelector('#${args.componentId}').open = false"
+                aria-label="Close modal"
+                part="close-button"
+              >
+                <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+              </pds-button>
+            </pds-box>
+            <pds-box>
+              <pds-text tag="p" size="md">Modal Subtitle</pds-text>
+            </pds-box>
+          </pds-box>
+        </pds-modal-header>
+        <pds-modal-content>
+          <pds-box direction="column" padding="md">
+            ${Array(20)
+              .fill(0)
+              .map(
+                () => html`
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+                    ea commodo consequat.
+                  </p>
+                `
+              )}
+          </pds-box>
+        </pds-modal-content>
+
+        <pds-modal-footer>
+          <pds-box
+            justify-content="space-between"
+            fit
+            padding="md"
+          >
+            <pds-button variant="unstyled" onclick="document.querySelector('#${args.componentId}').open = false">Close</pds-button>
+            <pds-box gap="sm" justify-content="end">
+              <pds-button
+                variant="secondary"
+                onclick="document.querySelector('#${args.componentId}').open = false"
+              >
+                Cancel
+              </pds-button>
+              <pds-button variant="primary">Confirm</pds-button>
+            </pds-box>
+          </pds-box>
+        </pds-modal-footer>
+      </pds-modal>
+    </div>
+  `;
+};
+
+export const ScrollableContent = ScrollableTemplate.bind({});
+ScrollableContent.args = {
+  size: 'md',
+  componentId: 'scrollable-modal',
+  open: false,
+};
+
+const FullscreenTemplate = (args) => html`
+  <div style="padding: 1rem;">
+    <pds-button
+      variant="primary"
+      onclick="document.querySelector('#${args.componentId}').open = true"
+    >Open Modal</pds-button>
+
+    <pds-modal
+      id="${args.componentId}"
+      size=${args.size}
+      ?backdrop-dismiss=${args.backdropDismiss}
+      ?open="${args.open}"
+    >
+      <pds-modal-header>
+        <pds-box
+          direction="column"
+          fit
+          padding="md"
+          padding-block-start="xs"
+          padding-block-end="xs"
+        >
+          <pds-box
+            align-items="center"
+            fit
+            justify-content="space-between"
+          >
+            <pds-box flex="grow">
+              <pds-text tag="h2" size="h3">Modal Title</pds-text>
+            </pds-box>
+            <pds-box flex="shrink">
+              <pds-button
+                class="pds-modal__close"
+                variant="unstyled"
+                icon-only="true"
+                onclick="document.querySelector('#${args.componentId}').open = false"
+                aria-label="Close modal"
+                part="close-button"
+              >
+                <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+              </pds-button>
+            </pds-box>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+      <pds-modal-content>
+        <pds-box direction="column" padding="md">
+          <p>This is a sample modal dialog. It demonstrates the basic features of the pds-modal component.</p>
+          <p>The modal supports:</p>
+          <ul>
+            <li>Different sizes (small, medium, large)</li>
+            <li>Optional close button</li>
+            <li>Backdrop click to close</li>
+            <li>Escape key to close</li>
+            <li>Focus management</li>
+            <li>ARIA attributes for accessibility</li>
+          </ul>
+        </pds-box>
+      </pds-modal-content>
+      <pds-modal-footer>
+        <pds-box
+          justify-content="space-between"
+          fit
+          padding="md"
+        >
+          <pds-button variant="unstyled" onclick="document.querySelector('#${args.componentId}').open = false">Close</pds-button>
+          <pds-box gap="sm" justify-content="end">
+            <pds-button
+              variant="secondary"
+              onclick="document.querySelector('#${args.componentId}').open = false"
+            >
+              Cancel
+            </pds-button>
+            <pds-button variant="primary">Confirm</pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+  </div>
+`;
+
+export const Fullscreen = FullscreenTemplate.bind({});
+Fullscreen.args = {
+  size: 'fullscreen',
+  componentId: 'fullscreen-modal',
+  open: false,
+};

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

@@ -0,0 +1,256 @@
+import { h } from "@stencil/core";
+/**
+ * Mock PdsModal component for testing purposes
+ * This component mimics the real PdsModal but without using the Popover API
+ */
+export class MockPdsModal {
+    constructor() {
+        /**
+         * The size of the modal
+         */
+        this.size = 'md';
+        // Modal content is always scrollable by default
+        /**
+         * Whether the modal can be dismissed by clicking the backdrop
+         */
+        this.backdropDismiss = true;
+        // Native dialog element always closes on Escape key press, so no closeOnEsc property is needed
+        /**
+         * Whether the modal is open
+         */
+        this.open = false;
+    }
+    /**
+     * Shows the modal
+     */
+    async showModal() {
+        this.open = true;
+        this.pdsModalOpen.emit();
+    }
+    /**
+     * Hides the modal
+     */
+    async hideModal() {
+        this.open = false;
+        this.pdsModalClose.emit();
+    }
+    /**
+     * Listen for click events on the backdrop
+     */
+    // Using direct method instead of @Listen to avoid ESLint warning
+    handleBackdropClick(event) {
+        const backdrop = this.el.querySelector('.pds-modal__backdrop');
+        // Check if the click was directly on the backdrop (not on a child element)
+        if (event.target === backdrop && this.backdropDismiss === true) {
+            this.pdsModalBackdropClick.emit();
+            this.hideModal();
+        }
+    }
+    /**
+     * Listen for keydown events to handle Escape key
+     * Native dialog element always closes on Escape key press
+     */
+    // Using direct method instead of @Listen to avoid ESLint warning
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open === true) {
+            this.hideModal();
+        }
+    }
+    componentDidLoad() {
+        // No need to do anything in componentDidLoad for the mock
+    }
+    render() {
+        const modalClasses = {
+            'pds-modal': true,
+            [`pds-modal--${this.size}`]: true,
+            'pds-modal--scrollable': true, // Always scrollable by default
+        };
+        const backdropClasses = {
+            'pds-modal__backdrop': true,
+            'open': this.open,
+        };
+        return (h("div", { key: 'fb141b585e21257f4e2b1e189211ffd8fdbf5f21', class: backdropClasses }, h("div", { key: '2431265c962c17042b79e59e8799159c0af79bba', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null }, h("div", { key: '122d233ca19497ccd8541474343442391a9fd60b', class: "pds-modal__header" }, h("slot", { key: 'abb92bd56f45ac7a1007649952eb6351dbe1193d', name: "header" })), h("div", { key: 'fb096821bccb813311f3047bb33a81374808a99d', class: "pds-modal-content" }, h("slot", { key: '79400555ec3420db6eda65f12b90060b5507c96e' })), h("div", { key: '60462c314237b4b573c222df26aa41073437f298', class: "pds-modal__footer" }, h("slot", { key: '9253219fc90477c4c86df974f4a6a196f693e548', name: "footer" })))));
+    }
+    static get is() { return "mock-pds-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../pds-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../pds-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the modal component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'fullscreen'",
+                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the modal"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "backdropDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal can be dismissed by clicking the backdrop"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "backdrop-dismiss",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is open"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsModalOpen",
+                "name": "pdsModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the modal is opened"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "pdsModalClose",
+                "name": "pdsModalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the modal is closed"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "pdsModalBackdropClick",
+                "name": "pdsModalBackdropClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the backdrop is clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showModal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the modal",
+                    "tags": []
+                }
+            },
+            "hideModal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the modal",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=mock-pds-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mock-pds-modal.js","sourceRoot":"","sources":["../../../../src/components/pds-modal/test/mock-pds-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAWzF;;;GAGG;AAMH,MAAM,OAAO,YAAY;IALzB;QAaE;;WAEG;QACK,SAAI,GAAsC,IAAI,CAAC;QAEvD,gDAAgD;QAEhD;;WAEG;QACK,oBAAe,GAAG,IAAI,CAAC;QAE/B,+FAA+F;QAE/F;;WAEG;QACsB,SAAI,GAAG,KAAK,CAAC;KAkGvC;IA/EC;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,iEAAiE;IACjE,mBAAmB,CAAC,KAAiB;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC/D,2EAA2E;QAC3E,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,EAAE,CAAC;YAC/D,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;YAClC,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,iEAAiE;IACjE,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;YACjD,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,0DAA0D;IAC5D,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACjC,uBAAuB,EAAE,IAAI,EAAE,+BAA+B;SAC/D,CAAC;QAEF,MAAM,eAAe,GAAG;YACtB,qBAAqB,EAAE,IAAI;YAC3B,MAAM,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe;YACzB,4DACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAC,QAAQ,gBACF,MAAM,qBACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,UAAU,CAAC,CAAC,CAAC,IAAI;gBAExE,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,8DAAa,CACT;gBACN,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, Method, Element, h } from '@stencil/core';\n\n// Define the element interface for the mock component\ninterface HTMLMockPdsModalElement extends HTMLElement {\n  open: boolean;\n  showModal: () => Promise<void>;\n  hideModal: () => Promise<void>;\n  handleBackdropClick: (event: MouseEvent) => void;\n  handleKeyDown: (event: KeyboardEvent) => void;\n}\n\n/**\n * Mock PdsModal component for testing purposes\n * This component mimics the real PdsModal but without using the Popover API\n */\n@Component({\n  tag: 'mock-pds-modal',\n  styleUrl: '../pds-modal.scss',\n  shadow: false,\n})\nexport class MockPdsModal {\n  @Element() el!: HTMLMockPdsModalElement;\n\n  /**\n   * The ID of the modal component\n   */\n  @Prop() componentId?: string;\n\n  /**\n   * The size of the modal\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'fullscreen' = 'md';\n\n  // Modal content is always scrollable by default\n\n  /**\n   * Whether the modal can be dismissed by clicking the backdrop\n   */\n  @Prop() backdropDismiss = true;\n\n  // Native dialog element always closes on Escape key press, so no closeOnEsc property is needed\n\n  /**\n   * Whether the modal is open\n   */\n  @Prop({ mutable: true }) open = false;\n\n  // No need for modalRef in the mock implementation\n\n  /**\n   * Event emitted when the modal is opened\n   */\n  @Event() pdsModalOpen: EventEmitter;\n\n  /**\n   * Event emitted when the modal is closed\n   */\n  @Event() pdsModalClose: EventEmitter;\n\n  /**\n   * Event emitted when the backdrop is clicked\n   */\n  @Event() pdsModalBackdropClick: EventEmitter;\n\n  /**\n   * Shows the modal\n   */\n  @Method()\n  async showModal() {\n    this.open = true;\n    this.pdsModalOpen.emit();\n  }\n\n  /**\n   * Hides the modal\n   */\n  @Method()\n  async hideModal() {\n    this.open = false;\n    this.pdsModalClose.emit();\n  }\n\n  /**\n   * Listen for click events on the backdrop\n   */\n  // Using direct method instead of @Listen to avoid ESLint warning\n  handleBackdropClick(event: MouseEvent) {\n    const backdrop = this.el.querySelector('.pds-modal__backdrop');\n    // Check if the click was directly on the backdrop (not on a child element)\n    if (event.target === backdrop && this.backdropDismiss === true) {\n      this.pdsModalBackdropClick.emit();\n      this.hideModal();\n    }\n  }\n\n  /**\n   * Listen for keydown events to handle Escape key\n   * Native dialog element always closes on Escape key press\n   */\n  // Using direct method instead of @Listen to avoid ESLint warning\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open === true) {\n      this.hideModal();\n    }\n  }\n\n  componentDidLoad() {\n    // No need to do anything in componentDidLoad for the mock\n  }\n\n  render() {\n    const modalClasses = {\n      'pds-modal': true,\n      [`pds-modal--${this.size}`]: true,\n      'pds-modal--scrollable': true, // Always scrollable by default\n    };\n\n    const backdropClasses = {\n      'pds-modal__backdrop': true,\n      'open': this.open,\n    };\n\n    return (\n      <div class={backdropClasses}>\n        <div\n          class={modalClasses}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={this.componentId ? `${this.componentId}-heading` : null}\n        >\n          <div class=\"pds-modal__header\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"pds-modal-content\">\n            <slot></slot>\n          </div>\n          <div class=\"pds-modal__footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}