@fluid-topics/ft-dialog 0.3.53 → 0.3.55

package/build/ft-dialog.css.js

@@ -51,6 +51,7 @@ export const styles = css `
         position: fixed;
         display: flex;
         flex-direction: column;
+        gap: ${FtDialogCssVariables.paddingButtons};
 
         width: ${FtDialogCssVariables.width};
         height: ${FtDialogCssVariables.height};
@@ -59,8 +60,7 @@ export const styles = css `
         min-width: ${FtDialogCssVariables.minWidth};
 
         padding-top: ${FtDialogCssVariables.paddingTop};
-        padding-right: ${FtDialogCssVariables.paddingSide};
-        padding-left: ${FtDialogCssVariables.paddingSide};
+        padding-bottom: ${FtDialogCssVariables.paddingTop};
 
         background-color: ${FtDialogCssVariables.colorSurface};
 
@@ -68,45 +68,52 @@ export const styles = css `
         box-shadow: ${FtDialogCssVariables.elevation24};
     }
 
+    .ft-dialog-wrapper > * {
+        padding-right: ${FtDialogCssVariables.paddingSide};
+        padding-left: ${FtDialogCssVariables.paddingSide};
+    }
+
     .ft-dialog-content {
         flex-grow: 2;
-        overflow: auto;
+        overflow-y: auto;
     }
 
     .ft-dialog-heading {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
         flex-shrink: 0;
 
         display: flex;
         align-items: center;
-        margin-bottom: 20px;
         gap: 8px;
 
         color: ${FtDialogCssVariables.headingColor};
     }
 
-    .ft-dialog-buttons {
-        padding-top: ${FtDialogCssVariables.paddingButtons};
-    }
-
-    slot[name=buttons] {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: 8px;
+    .ft-dialog-heading * {
+        flex-shrink: 0;
     }
 
-    slot[name=buttons]::slotted(*) {
-        margin-top: 8px;
-        margin-bottom: 8px
+    .ft-dialog-heading ft-typography {
+        flex-grow: 1;
+        flex-shrink: 1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
     }
 
     .ft-dialog-heading ft-button {
-        margin-left: auto;
         ${setVariable(FtButtonCssVariables.color, FtDialogCssVariables.headingColor)};
     }
 
+    .ft-dialog-buttons.ft-dialog-no-buttons {
+        display: none;
+    }
+
+    .ft-dialog-buttons {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+
 `;
 //# sourceMappingURL=ft-dialog.css.js.map

package/build/ft-dialog.d.ts

@@ -10,14 +10,14 @@ export declare class FtDialog extends FtLitElement implements FtDialogProperties
     beforeClose: () => boolean;
     heading: string;
     icon: string;
+    buttons: Array<HTMLElement>;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1> | null;
     updated(properties: PropertyValues<FtDialog>): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     close(): void;
     open(): void;
     private watchEscapeKey;
     private watchClickOutside;
+    private onClickOutside;
 }
 //# sourceMappingURL=ft-dialog.d.ts.map

package/build/ft-dialog.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html } from "lit";
-import { property, } from "lit/decorators.js";
+import { property, queryAssignedElements, } from "lit/decorators.js";
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { FtIcon } from "@fluid-topics/ft-icon";
@@ -21,6 +21,16 @@ export class FtDialog extends FtLitElement {
         this.beforeClose = () => true;
         this.heading = "";
         this.icon = "";
+        this.watchEscapeKey = (event) => {
+            if (event.key === "Escape" && this.closeOnEsc) {
+                this.close();
+            }
+        };
+        this.watchClickOutside = (event) => {
+            if (this.closeOnClickOutside && !event.composedPath().includes(this)) {
+                this.close();
+            }
+        };
     }
     render() {
         if (!this.opened) {
@@ -28,41 +38,45 @@ export class FtDialog extends FtLitElement {
         }
         return html `
             <div class="ft-dialog">
-                <div class="ft-dialog-overlay" @click="${() => this.watchClickOutside()}"></div>
+                <div class="ft-dialog-overlay" @click="${() => this.onClickOutside()}"></div>
                 <div class="ft-dialog-wrapper">
                     ${this.heading ? html `
                         <div class="ft-dialog-heading">
                             ${this.icon ? html `
-                                <ft-icon variant="material">${this.icon}</ft-icon>` : undefined}
+                                <ft-icon variant="material">${this.icon}</ft-icon>
+                            ` : undefined}
                             <ft-typography element="span" variant="title">${this.heading}</ft-typography>
                             ${this.closable ? html `
-                                <ft-button icon="close" @click=${this.close}></ft-button>` : undefined}
+                                <ft-button round icon="close" @click=${this.close}></ft-button>
+                        ` : undefined}
                         </div>
                     ` : null}
                     <div class="ft-dialog-content">
                         <slot></slot>
                     </div>
-                    <div class="ft-dialog-buttons">
-                        <slot name="buttons"></slot>
-                    </div>
+                    <slot name="buttons" 
+                          class="ft-dialog-buttons ${this.buttons.length > 0 ? "" : "ft-dialog-no-buttons"}"
+                          @slotchange=${() => this.requestUpdate()}
+                    ></slot>
                 </div>
             </div>
         `;
     }
     updated(properties) {
         if (properties.has("opened")) {
-            const event = new CustomEvent("opened-changed", { detail: { opened: this.opened } });
-            this.dispatchEvent(event);
+            this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: this.opened } }));
+            if (this.opened) {
+                setTimeout(() => {
+                    document.addEventListener("keydown", this.watchEscapeKey);
+                    document.addEventListener("click", this.watchClickOutside);
+                }, 0);
+            }
+            else {
+                document.removeEventListener("keydown", this.watchEscapeKey);
+                document.removeEventListener("click", this.watchClickOutside);
+            }
         }
     }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener("keydown", this.watchEscapeKey.bind(this));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener("keydown", this.watchEscapeKey.bind(this));
-    }
     close() {
         if (this.beforeClose()) {
             this.opened = false;
@@ -71,12 +85,7 @@ export class FtDialog extends FtLitElement {
     open() {
         this.opened = true;
     }
-    watchEscapeKey(event) {
-        if (event.key === "Escape" && this.closeOnEsc) {
-            this.close();
-        }
-    }
-    watchClickOutside() {
+    onClickOutside() {
         if (this.closeOnClickOutside) {
             this.close();
         }
@@ -115,4 +124,7 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FtDialog.prototype, "icon", void 0);
+__decorate([
+    queryAssignedElements({ slot: "buttons" })
+], FtDialog.prototype, "buttons", void 0);
 //# sourceMappingURL=ft-dialog.js.map