@fluid-topics/ft-modal 1.3.45 → 1.3.46

package/build/ftds-modal-confirm.js

@@ -11,7 +11,7 @@ import { DesignSystemSize } from "@fluid-topics/design-system-variables";
 import { FtDsModalBodyTypography } from "./ftds-modal.properties";
 import { FtIcons } from "@fluid-topics/ft-icon";
 import { property, query } from "lit/decorators.js";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtdsTypography } from "@fluid-topics/ft-typography";
 import { FtdsButton } from "@fluid-topics/ft-button";
 class FtdsModalConfirm extends FtLitElement {
     constructor() {
@@ -26,24 +26,24 @@ class FtdsModalConfirm extends FtLitElement {
             <ftds-modal
                 heading="${this.heading}"
                 size="${DesignSystemSize.small}"
-                @close="${this.onCancel}"
+                @close=${this.onCancel}
             >
-                <ft-typography variant="${FtDsModalBodyTypography}">
+                <ftds-typography variant="${FtDsModalBodyTypography}">
                     ${this.text}
-                </ft-typography>
+                </ftds-typography>
                 <ftds-button slot="actions"
                              tertiary
                              autofocus
                              family="${DesignSystemFamily.neutral}"
                              size="${DesignSystemSize.large}"
                              icon="${this.cancelIcon}"
-                             @click="${this.onCancel}">
+                             @click=${this.onCancel}>
                     ${this.cancelText}
                 </ftds-button>
                 <ftds-button slot="actions"
                              primary
                              size="${DesignSystemSize.large}"
-                             @click="${this.onConfirm}"
+                             @click=${this.onConfirm}
                              icon="${this.confirmIcon}">
                     ${this.confirmText}
                 </ftds-button>
@@ -71,7 +71,7 @@ class FtdsModalConfirm extends FtLitElement {
 }
 FtdsModalConfirm.elementDefinitions = {
     "ftds-modal": FtdsModal,
-    "ft-typography": FtTypography,
+    "ftds-typography": FtdsTypography,
     "ftds-button": FtdsButton,
 };
 __decorate([

package/build/ftds-modal.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
 import { FtdsModalProperties } from "./ftds-modal.properties";
 import { DesignSystemSize } from "@fluid-topics/design-system-variables";
@@ -7,10 +8,12 @@ export declare class FtdsModal extends FtdsModal_base implements FtdsModalProper
     static styles: import("lit").CSSResult[];
     heading: string;
     icon?: string;
+    dialogOpen?: boolean;
     private dialog;
     size: DesignSystemSize;
     constructor();
     protected render(): import("lit-html").TemplateResult<1>;
+    protected contentAvailableCallback(props: PropertyValues): void;
     open(): void;
     close(): void;
     disconnectedCallback(): void;

package/build/ftds-modal.js

@@ -12,7 +12,7 @@ import { designSystemStyle } from "./ftds-modal.styles";
 import { FtdsButton } from "@fluid-topics/ft-button";
 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 { FtdsTypography, FtdsTypographyVariants } from "@fluid-topics/ft-typography";
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { defaultModalMessages, modal } from "./FtDsModalMessages";
 class FtdsModalCloseEvent extends Event {
@@ -30,28 +30,28 @@ class FtdsModal extends withI18n(FtdsBase) {
     render() {
         const classes = {
             "ftds-modal": true,
-            ...this.getDesignSystemBaseClasses()
+            ...this.getDesignSystemBaseClasses(),
         };
         return html `
             <div class="${classMap(classes)}" part="container">
                 <dialog part="dialog"
-                        @close="${() => this.dispatchEvent(new FtdsModalCloseEvent())}">
-                    <div part="overlay" @click="${this.onOverlayClick}"></div>
+                        @close=${() => this.dispatchEvent(new FtdsModalCloseEvent())}>
+                    <div part="overlay" @click=${this.onOverlayClick}></div>
                     <div part="inner-container">
                         <div part="header">
                             ${this.icon ? html `
-                                <ft-icon part="icon" value="${this.icon}"/>
+                                <ft-icon part="icon" value="${this.icon}"></ft-icon>
                             ` : nothing}
-                            <ft-typography part="heading" variant="${FtTypographyVariants.body1semibold}">
+                            <ftds-typography part="heading" variant="${FtdsTypographyVariants.body1semibold}">
                                 ${this.heading}
-                            </ft-typography>
+                            </ftds-typography>
                             <ftds-button part="closing-button"
                                          size="${DesignSystemSize.large}"
                                          icon="${FtIcons.CLOSE}"
                                          tertiary
                                          family="${DesignSystemFamily.neutral}"
                                          label="${modal.messages.closeModal()}"
-                                         @click="${this.close}">
+                                         @click=${this.close}>
                             </ftds-button>
                         </div>
                         <div part="body">
@@ -67,11 +67,22 @@ class FtdsModal extends withI18n(FtdsBase) {
             </div>
         `;
     }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (props.has("dialogOpen")) {
+            if (this.dialogOpen) {
+                this.dialog.showModal();
+            }
+            else {
+                this.dialog.close();
+            }
+        }
+    }
     open() {
-        this.dialog.showModal();
+        this.dialogOpen = true;
     }
     close() {
-        this.dialog.close();
+        this.dialogOpen = false;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -83,17 +94,23 @@ class FtdsModal extends withI18n(FtdsBase) {
 }
 FtdsModal.elementDefinitions = {
     "ftds-button": FtdsButton,
-    "ft-typography": FtTypography,
+    "ftds-typography": FtdsTypography,
     "ft-icon": FtIcon,
 };
 FtdsModal.styles = designSystemStyle;
 __decorate([
-    property({ type: String })
+    property()
 ], FtdsModal.prototype, "heading", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], FtdsModal.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtdsModal.prototype, "dialogOpen", void 0);
 __decorate([
     query("dialog")
 ], FtdsModal.prototype, "dialog", void 0);
+__decorate([
+    property()
+], FtdsModal.prototype, "size", void 0);
 export { FtdsModal };

package/build/ftds-modal.properties.d.ts

@@ -1,7 +1,7 @@
-import { FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtdsBaseInterface } from "@fluid-topics/ft-wc-utils";
 export interface FtdsModalProperties extends FtdsBaseInterface {
     heading: string;
     icon?: string;
 }
-export declare const FtDsModalBodyTypography = FtTypographyVariants.body2regular;
+export declare const FtDsModalBodyTypography = FtdsTypographyVariants.body2regular;

package/build/ftds-modal.properties.js

@@ -1,2 +1,2 @@
-import { FtTypographyVariants } from "@fluid-topics/ft-typography";
-export const FtDsModalBodyTypography = FtTypographyVariants.body2regular;
+import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
+export const FtDsModalBodyTypography = FtdsTypographyVariants.body2regular;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-modal",
-    "version": "1.3.45",
+    "version": "1.3.46",
     "description": "Modal for Design System V2",
     "keywords": [
         "Lit"
@@ -19,11 +19,11 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-wc-utils": "1.3.45",
+        "@fluid-topics/ft-wc-utils": "1.3.46",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.45"
+        "@fluid-topics/ft-wc-test-utils": "1.3.46"
     },
-    "gitHead": "3fd3d1375535575f012653afcbcb81dc3c25b7c7"
+    "gitHead": "d6cf25d6ed0dead8c7aff4f94a493c35d12f1392"
 }