@fluid-topics/ft-dialog 1.3.22 → 1.3.23

package/build/ft-dialog.d.ts

@@ -2,6 +2,7 @@ import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtIconVariants } from "@fluid-topics/ft-icon";
 import { FtDialogProperties } from "./ft-dialog.properties";
+/** @deprecated use FtDsModal or FtModal  */
 export declare class FtDialog extends FtLitElement implements FtDialogProperties {
     static elementDefinitions: ElementDefinitionsMap;
     opened: boolean;

package/build/ft-dialog.js

@@ -5,12 +5,13 @@ 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, queryAssignedElements, } 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 { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtIcon } from "@fluid-topics/ft-icon";
 import { FtButton } from "@fluid-topics/ft-button";
 import { styles } from "./ft-dialog.styles";
+/** @deprecated use FtDsModal or FtModal  */
 class FtDialog extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -33,21 +34,21 @@ class FtDialog extends FtLitElement {
         }
         return html `
             <div class="ft-dialog" part="container">
-                <div class="ft-dialog-overlay" part="overlay" @click="${() => this.onClickOutside()}"></div>
+                <div class="ft-dialog-overlay" part="overlay" @click=${() => this.onClickOutside()}></div>
                 <div class="ft-dialog-wrapper" part="wrapper">
                     ${this.heading ? html `
                         <div class="ft-dialog-heading" part="heading">
                             ${this.icon ? html `
                                     <ft-icon .variant=${this.iconVariant} value="${this.icon}"></ft-icon>
                                 ` : undefined}
-                            <ft-typography element="span" variant="title">${this.heading}</ft-typography>
+                            <ft-typography element="span" variant="${FtTypographyVariants.title1}">${this.heading}</ft-typography>
                             ${this.closable ? html `
                                     <ft-button round icon="close" @click=${this.close}></ft-button>
                                 ` : undefined}
                         </div>
                     ` : null}
                     <div class="ft-dialog-content" part="content">
-                        <ft-typography variant="body1">
+                        <ft-typography variant="${FtTypographyVariants.body1}">
                             <slot></slot>
                         </ft-typography>
                     </div>
@@ -99,8 +100,8 @@ __decorate([
     property({
         type: Boolean,
         hasChanged(newVal, oldVal) {
-            return ((oldVal === false && newVal === true) ||
-                (oldVal === true && newVal === false));
+            return ((oldVal === false && newVal === true)
+                || (oldVal === true && newVal === false));
         },
     })
 ], FtDialog.prototype, "opened", void 0);