@fluid-topics/ft-modal 2.0.14 → 2.0.16

package/build/ft-modal.d.ts

@@ -19,8 +19,10 @@ export declare class FtModal extends FtModal_base implements FtModalProperties {
     private intersectionObserver;
     open(elementToFocusOnClose?: HTMLElement): void;
     close(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private onClose;
     private onOverlayClick;
+    private onEscapePressed;
 }
 export {};

package/build/ft-modal.js

@@ -4,20 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from "lit";
-import { property, query } from "lit/decorators.js";
-import { FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { html, nothing, } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { focusTrap, FtdsBase, } from "@fluid-topics/ft-wc-utils";
 import { classMap } from "lit/directives/class-map.js";
 import { DesignSystemSize } from "@fluid-topics/design-system-variables";
-import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
-import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtIcon, FtIcons, } from "@fluid-topics/ft-icon";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { modal } from "./FtDsModalMessages";
 import { FtButton } from "@fluid-topics/ft-button";
 import { ftmodalStyles } from "./ft-modal.styles";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { defaultFtModalMessages, ftModalContext } from "./FtModalMessages";
+import { defaultFtModalMessages, ftModalContext, } from "./FtModalMessages";
 class FtModalCloseEvent extends Event {
     constructor() {
         super("close");
@@ -28,7 +28,7 @@ class FtModalOpenEvent extends Event {
         super("open");
     }
 }
-class FtModal extends withI18n(FtdsBase) {
+export class FtModal extends withI18n(FtdsBase) {
     constructor() {
         super();
         this.buttonLabel = "";
@@ -52,7 +52,7 @@ class FtModal extends withI18n(FtdsBase) {
                         ${when(this.buttonIcon, () => nothing, () => this.buttonLabel)}
                     </ft-button>
                 </slot>
-                <dialog part="dialog" aria-labelledby="heading" @close=${this.onClose}>
+                <dialog part="dialog" popover="manual" aria-labelledby="heading" @close=${this.onClose} ${focusTrap()}>
                     <div part="overlay" @click=${this.onOverlayClick}></div>
                     <div part="inner-container">
                         <div part="header">
@@ -93,19 +93,24 @@ class FtModal extends withI18n(FtdsBase) {
     open(elementToFocusOnClose) {
         this.elementToFocusOnClose = elementToFocusOnClose;
         if (this.dialog) {
-            this.dialog.showModal();
+            this.dialog.showPopover();
             this.intersectionObserver.observe(this.dialog);
             this.dispatchEvent(new FtModalOpenEvent());
         }
     }
     close() {
         var _a;
-        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.hidePopover();
         this.onClose();
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("keydown", this.onEscapePressed);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.close();
+        this.removeEventListener("keydown", this.onEscapePressed);
     }
     onClose() {
         var _a;
@@ -116,6 +121,11 @@ class FtModal extends withI18n(FtdsBase) {
     onOverlayClick() {
         this.close();
     }
+    onEscapePressed(e) {
+        if (e.key === "Escape") {
+            this.close();
+        }
+    }
 }
 FtModal.elementDefinitions = {
     "ft-button": FtButton,
@@ -138,4 +148,3 @@ __decorate([
 __decorate([
     query("dialog")
 ], FtModal.prototype, "dialog", void 0);
-export { FtModal };