@gov-design-system-ce/components 4.0.8-rc10 → 4.0.8-rc11

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

@@ -7,352 +7,390 @@ import { createID } from "../../utils/string.utils";
 import { delay } from "../../utils/utils";
 import { ModalClass } from "./constants";
 export class GovModal {
-  constructor() {
-    this.open = false;
-    this.blockClose = false;
-    this.label = undefined;
-    this.role = 'dialog';
-    this.labelTag = 'h2';
-    this.wcagLabelledBy = undefined;
-    this.wcagDescribedBy = undefined;
-    this.wcagCloseLabel = 'Zavřít okno';
-    this.wcagCloseLabelledBy = undefined;
-    this.h = govHost(this.host);
-    this.labelId = createID('GovModalLabel');
-    this.contentId = createID('GovModalContent');
-  }
-  validateLabelTag(newValue) {
-    const validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    if (newValue) {
-      if (!validTags.includes(newValue)) {
-        govErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`);
-      }
+    constructor() {
+        this.open = false;
+        this.blockClose = false;
+        this.blockBackdropClose = false;
+        this.blockButtonClose = false;
+        this.label = undefined;
+        this.role = 'dialog';
+        this.labelTag = 'h2';
+        this.wcagLabelledBy = undefined;
+        this.wcagDescribedBy = undefined;
+        this.wcagCloseLabel = 'Zavřít okno';
+        this.wcagCloseLabelledBy = undefined;
+        this.h = govHost(this.host);
+        this.labelId = createID('GovModalLabel');
+        this.contentId = createID('GovModalContent');
     }
-  }
-  watchOpen(newValue) {
-    this.open = newValue;
-    if (newValue && this.closeCtaRef) {
-      this.closeCtaRef.setFocus().catch();
+    validateLabelTag(newValue) {
+        const validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+        if (newValue) {
+            if (!validTags.includes(newValue)) {
+                govErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`);
+            }
+        }
     }
-  }
-  showModal() {
-    this.open = true;
-    document.body.classList.add(ModalClass.bodyFix);
-  }
-  hideModal() {
-    this.open = false;
-    document.body.classList.remove(ModalClass.bodyFix);
-  }
-  async componentWillRender() {
-    if (this.open) {
-      this.showModal();
+    watchOpen(newValue) {
+        this.open = newValue;
+        if (newValue && this.closeCtaRef) {
+            this.closeCtaRef.setFocus().catch();
+        }
     }
-    else {
-      this.hideModal();
+    showModal() {
+        this.open = true;
+        document.body.classList.add(ModalClass.bodyFix);
     }
-  }
-  async componentDidRender() {
-    if (canValidateWcagOnRender()) {
-      await delay(500);
-      await this.validateWcag();
+    hideModal() {
+        this.open = false;
+        document.body.classList.remove(ModalClass.bodyFix);
     }
-  }
-  render() {
-    const LabelTag = this.labelTag;
-    return (h(Host, { class: this.h.classes(ModalClass.root), open: this.open }, h("dialog", { class: ModalClass.dialog, hidden: !this.open, tabindex: boolToFocusValue(this.open), open: this.open, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.open), "aria-labelledby": this.wcagLabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, h("div", { class: ModalClass.inner }, h("div", { class: ModalClass.header }, this.h.hasSlot('icon') && (h("div", { class: ModalClass.icon }, h("slot", { name: "icon" }))), this.label && (h(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), h("gov-button", { ref: el => (this.closeCtaRef = el), disabled: this.blockClose, class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))), h("div", { class: ModalClass.content, id: this.contentId }, h("slot", null)), this.h.hasSlot('footer') && (h("div", { class: ModalClass.footer }, h("slot", { name: "footer" }))))), this.open ? (h("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
-  }
-  onCloseHandler(e) {
-    e.stopPropagation();
-    if (this.blockClose === false) {
-      this.hideModal();
-      this.govClose.emit(e);
+    async componentWillRender() {
+        if (this.open) {
+            this.showModal();
+        }
+        else {
+            this.hideModal();
+        }
     }
-  }
-  /**
-   * Showing the modal
-   */
-  async show() {
-    this.showModal();
-  }
-  /**
-   * Hiding the modal
-   */
-  async hide() {
-    this.hideModal();
-  }
-  /**
-   * Validate the WCAG attributes of the component
-   */
-  async validateWcag() {
-    validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', ModalClass.root);
-    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', ModalClass.root);
-  }
-  static get is() { return "gov-modal"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gov-modal.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gov-modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Attribute for modal window display"
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "blockClose": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Attribute allowing blocking the modal closing"
-        },
-        "attribute": "block-close",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Title of modal window"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "role": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Nullable<string>",
-          "resolved": "string",
-          "references": {
-            "Nullable": {
-              "location": "import",
-              "path": "../../types/interfaces",
-              "id": "../../../packages/core/src/types/interfaces.ts::Nullable"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Role of modal"
-        },
-        "attribute": "role",
-        "reflect": false,
-        "defaultValue": "'dialog'"
-      },
-      "labelTag": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used to change the HTML tag in the modal label for correct semantic structure"
-        },
-        "attribute": "label-tag",
-        "reflect": false,
-        "defaultValue": "'h2'"
-      },
-      "wcagLabelledBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "String of id's that indicate alternative labels elements"
-        },
-        "attribute": "wcag-labelled-by",
-        "reflect": false
-      },
-      "wcagDescribedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component that describes the modal."
-        },
-        "attribute": "wcag-described-by",
-        "reflect": false
-      },
-      "wcagCloseLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds accessible label for the modal close button that is only shown for screen readers."
-        },
-        "attribute": "wcag-close-label",
-        "reflect": false,
-        "defaultValue": "'Zav\u0159\u00EDt okno'"
-      },
-      "wcagCloseLabelledBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A string of identifiers that indicate alternative label elements for closing the modal window"
-        },
-        "attribute": "wcag-close-labelled-by",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "govClose",
-        "name": "gov-close",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when modal window closes."
-        },
-        "complexType": {
-          "original": "PointerEvent",
-          "resolved": "PointerEvent",
-          "references": {
-            "PointerEvent": {
-              "location": "global",
-              "id": "global::PointerEvent"
-            }
-          }
+    async componentDidRender() {
+        if (canValidateWcagOnRender()) {
+            await delay(500);
+            await this.validateWcag();
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Showing the modal",
-          "tags": []
+    }
+    render() {
+        const LabelTag = this.labelTag;
+        return (h(Host, { key: 'e1525cfa3cdd7b0efeb2385b25a04ea8dbd49bc7', class: this.h.classes(ModalClass.root), open: this.open }, h("dialog", { key: 'a1116333c938d11049de61a9531109f346297734', class: ModalClass.dialog, hidden: !this.open, tabindex: boolToFocusValue(this.open), open: this.open, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.open), "aria-labelledby": this.wcagLabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, h("div", { key: '952ca6b5e7d1f4dcc59e09c1495f9aa9a96e56fb', class: ModalClass.inner }, h("div", { key: 'b00890579ccd683cd171a6200e972e0f02b5b4d3', class: ModalClass.header }, this.h.hasSlot('icon') && (h("div", { key: '7bcf03a0f1c475b0c3553854c885b3d0900894db', class: ModalClass.icon }, h("slot", { key: '527c8a9e77dbb2568510b6765634db0234039f8f', name: "icon" }))), this.label && (h(LabelTag, { key: 'c96b0339fcc61ba3f834d35926f6ef13419a901a', class: ModalClass.title, id: this.labelId }, this.label)), !(this.blockButtonClose || this.blockClose) ? (h("gov-button", { ref: el => (this.closeCtaRef = el), disabled: this.blockClose, class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))) : null), h("div", { key: '47e940a5bf64b87ec065f6c0977546603ca9bb11', class: ModalClass.content, id: this.contentId }, h("slot", { key: 'bc97ebe004ffb446c71a4bc0c8086af5d63cf3ec' })), this.h.hasSlot('footer') && (h("div", { key: 'c48e97d8c9f597cc544d5e567cb0d679186b868e', class: ModalClass.footer }, h("slot", { key: '7c9165dca0a9e20eef86e1937704c0f4154fcfb8', name: "footer" }))))), this.open ? (h("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": (e) => !this.blockBackdropClose && this.onCloseHandler(e) })) : null));
+    }
+    onCloseHandler(e) {
+        e.stopPropagation();
+        if (this.blockClose === false) {
+            this.hideModal();
+            this.govClose.emit(e);
         }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    /**
+     * Showing the modal
+     */
+    async show() {
+        this.showModal();
+    }
+    /**
+     * Hiding the modal
+     */
+    async hide() {
+        this.hideModal();
+    }
+    /**
+     * Validate the WCAG attributes of the component
+     */
+    async validateWcag() {
+        validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', ModalClass.root);
+        validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', ModalClass.root);
+    }
+    static get is() { return "gov-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gov-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gov-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attribute for modal window display"
+                },
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "blockClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attribute allowing blocking the modal closing"
+                },
+                "attribute": "block-close",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "blockBackdropClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attribute allowing blocking the modal backdrop closing"
+                },
+                "attribute": "block-backdrop-close",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "blockButtonClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attribute allowing blocking the modal button closing"
+                },
+                "attribute": "block-button-close",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title of modal window"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Nullable<string>",
+                    "resolved": "string",
+                    "references": {
+                        "Nullable": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "../../../packages/core/src/types/interfaces.ts::Nullable"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Role of modal"
+                },
+                "attribute": "role",
+                "reflect": false,
+                "defaultValue": "'dialog'"
+            },
+            "labelTag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used to change the HTML tag in the modal label for correct semantic structure"
+                },
+                "attribute": "label-tag",
+                "reflect": false,
+                "defaultValue": "'h2'"
+            },
+            "wcagLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String of id's that indicate alternative labels elements"
+                },
+                "attribute": "wcag-labelled-by",
+                "reflect": false
+            },
+            "wcagDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the modal."
+                },
+                "attribute": "wcag-described-by",
+                "reflect": false
+            },
+            "wcagCloseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the modal close button that is only shown for screen readers."
+                },
+                "attribute": "wcag-close-label",
+                "reflect": false,
+                "defaultValue": "'Zav\u0159\u00EDt okno'"
+            },
+            "wcagCloseLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A string of identifiers that indicate alternative label elements for closing the modal window"
+                },
+                "attribute": "wcag-close-labelled-by",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hiding the modal",
-          "tags": []
-        }
-      },
-      "validateWcag": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get events() {
+        return [{
+                "method": "govClose",
+                "name": "gov-close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when modal window closes."
+                },
+                "complexType": {
+                    "original": "PointerEvent",
+                    "resolved": "PointerEvent",
+                    "references": {
+                        "PointerEvent": {
+                            "location": "global",
+                            "id": "global::PointerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Showing the modal",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hiding the modal",
+                    "tags": []
+                }
+            },
+            "validateWcag": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validate the WCAG attributes of the component",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Validate the WCAG attributes of the component",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "labelTag",
-        "methodName": "validateLabelTag"
-      }, {
-        "propName": "open",
-        "methodName": "watchOpen"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "labelTag",
+                "methodName": "validateLabelTag"
+            }, {
+                "propName": "open",
+                "methodName": "watchOpen"
+            }];
+    }
 }
 //# sourceMappingURL=gov-modal.js.map