@fluid-topics/ft-modal 1.3.22 → 1.3.23

package/README.md

@@ -1,4 +1,4 @@
-Modal for Design System V2
+Modal for Client Design System
 
 ## Install
 
@@ -15,20 +15,17 @@ import "@fluid-topics/ft-modal"
 
 function render() {
     return html`
-        <ftds-button @click="${ () => document.querySelector<FtdsModal>("#example-modal")?.open() }">
-            Small example
-        </ftds-button>
-        <ftds-modal heading="Modal title" id="example-modal">
+        <ft-modal buttonLabel="Open" heading="Modal title">
             <ft-typography variant="${ FtDsModalBodyTypography }">
                 Modal content text
             </ft-typography>
-            <ftds-button slot="actions">
+            <ft-button slot="actions">
                 Button 1
-            </ftds-button>
-            <ftds-button slot="actions">
+            </ft-button>
+            <ft-button slot="actions">
                 Button 2
-            </ftds-button>
-        </ftds-modal>
+            </ft-button>
+        </ft-modal>
 `
 }
 ```

package/build/FtModalMessages.d.ts

@@ -0,0 +1,6 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtModalMessages extends I18nMessages {
+    closeModal(): string;
+}
+export declare const ftModalContext: I18nMessageContext<FtModalMessages>;
+export declare const defaultFtModalMessages: DefaultI18nMessages<FtModalMessages>;

package/build/FtModalMessages.js

@@ -0,0 +1,5 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const ftModalContext = I18nMessageContext.build("ftModal");
+export const defaultFtModalMessages = {
+    closeModal: "Close modal",
+};

package/build/ft-modal.d.ts

@@ -0,0 +1,22 @@
+import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { FtModalProperties } from "./ft-modal.properties";
+declare const FtModal_base: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtModal extends FtModal_base implements FtModalProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    buttonLabel: string;
+    heading: string;
+    icon?: string;
+    private button;
+    private dialog;
+    size: DesignSystemSize;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    open(): void;
+    close(): void;
+    disconnectedCallback(): void;
+    private onClose;
+    private onOverlayClick;
+}
+export {};

package/build/ft-modal.js

@@ -0,0 +1,110 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit";
+import { property, query } from "lit/decorators.js";
+import { 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 { 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 { defaultFtModalMessages, ftModalContext } from "./FtModalMessages";
+class FtModalCloseEvent extends Event {
+    constructor() {
+        super("close");
+    }
+}
+class FtModal extends withI18n(FtdsBase) {
+    constructor() {
+        super();
+        this.buttonLabel = "";
+        this.heading = "";
+        this.size = DesignSystemSize.small;
+        this.addI18nContext(ftModalContext, defaultFtModalMessages);
+    }
+    render() {
+        const classes = {
+            "ft-modal": true,
+        };
+        return html `
+            <div class="${classMap(classes)}" part="container">
+                <ft-button part="button" @click=${this.open} ariaHasPopup="dialog">${this.buttonLabel}</ft-button>
+                <dialog part="dialog" aria-labelledby="heading" @close=${this.onClose}>
+                    <div part="overlay" @click=${this.onOverlayClick}></div>
+                    <div part="inner-container">
+                        <div part="header">
+                            ${when(!!this.icon, () => html `
+                                <ft-icon part="icon" value="${this.icon}"></ft-icon>
+                            `)}
+                            <ft-typography id="heading" part="heading" role="heading" variant="${FtTypographyVariants.title}">
+                                ${this.heading}
+                            </ft-typography>
+                            <ft-button part="closing-button"
+                                       icon="${FtIcons.CLOSE}"
+                                       tertiary
+                                       label="${modal.messages.closeModal()}"
+                                       @click=${this.close}>
+                            </ft-button>
+                        </div>
+                        <div part="body">
+                            <div part="content">
+                                <slot></slot>
+                            </div>
+                            <div part="actions">
+                                <slot name="actions"></slot>
+                            </div>
+                        </div>
+                    </div>
+                </dialog>
+            </div>
+        `;
+    }
+    open() {
+        this.dialog.showModal();
+    }
+    close() {
+        this.dialog.close();
+        this.onClose();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.close();
+    }
+    onClose() {
+        this.button.focus();
+        this.dispatchEvent(new FtModalCloseEvent());
+    }
+    onOverlayClick() {
+        this.close();
+    }
+}
+FtModal.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
+};
+FtModal.styles = ftmodalStyles;
+__decorate([
+    property()
+], FtModal.prototype, "buttonLabel", void 0);
+__decorate([
+    property()
+], FtModal.prototype, "heading", void 0);
+__decorate([
+    property()
+], FtModal.prototype, "icon", void 0);
+__decorate([
+    query("ft-button")
+], FtModal.prototype, "button", void 0);
+__decorate([
+    query("dialog")
+], FtModal.prototype, "dialog", void 0);
+export { FtModal };