@watermarkinsights/ripple 5.13.0-alpha.1 → 5.13.0-alpha.3

package/dist/collection/components/wm-modal/wm-modal-footer.js

@@ -0,0 +1,152 @@
+import { h } from "@stencil/core";
+export class ModalFooter {
+    constructor() {
+        this.secondaryText = "";
+        this.primaryText = "";
+        this.infoText = "";
+        this.primaryActionDisabled = false;
+        this.deleteStyle = false;
+    }
+    componentWillLoad() {
+        const parentModal = this.el.closest("wm-modal");
+        this.uid = parentModal.uid;
+        // Trap focus when user shift+tabs past first element in modal
+        // This is preferred to the dialog's built-in trap focus, see https://ripple.watermarkinsights.com/blog/focus-trap/
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        parentModal.addEventListener("focusLastElement", () => {
+            this.lastElement.focus();
+        });
+    }
+    emitParentPrimaryEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        if (parentModal) {
+            parentModal.emitPrimaryEvent();
+        }
+    }
+    emitParentSecondaryEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        if (parentModal) {
+            parentModal.emitSecondaryEvent();
+        }
+    }
+    render() {
+        return (h("div", { key: 'f135845036c4bf6bab0f8873486ebdfa2df7118d', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'aea36d62ec51a4c9b1a8bb54aa7c4dd5e25a548e', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'edfd76f90115bbdc95e75b50651c4b06b3106a23', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '5aa07933ee596c2041b2f9aa8abb4c7e9fa97de6', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '7d4c3000c7831c7cecb4b799afb54a4beeb6545f', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
+    }
+    static get is() { return "wm-modal-footer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "secondaryText": {
+                "type": "string",
+                "attribute": "secondary-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "primaryText": {
+                "type": "string",
+                "attribute": "primary-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "infoText": {
+                "type": "string",
+                "attribute": "info-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "primaryActionDisabled": {
+                "type": "boolean",
+                "attribute": "primary-action-disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "deleteStyle": {
+                "type": "boolean",
+                "attribute": "delete-style",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}