@fluid-topics/ftds-modal 2.1.0

package/README.md

@@ -0,0 +1,34 @@
+The design system modal component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-modal
+yarn add @fluid-topics/ftds-modal
+```
+
+## Usage
+
+```typescript
+import {html} from "lit"
+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-typography variant="${FtDsModalBodyTypography}">
+                Modal content text
+            </ft-typography>
+            <ftds-button slot="actions">
+                Button 1
+            </ftds-button>
+            <ftds-button slot="actions">
+                Button 2
+            </ftds-button>
+        </ftds-modal>
+`
+}
+```

package/build/FtDsModalMessages.d.ts

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

package/build/FtDsModalMessages.js

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

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,7 @@
+import { FtdsModal } from "./ftds-modal";
+import { FtdsModalConfirm } from "./ftds-modal-confirm";
+declare const _default: {
+    "ftds-modal": typeof FtdsModal;
+    "ftds-modal-confirm": typeof FtdsModalConfirm;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,6 @@
+import { FtdsModal } from "./ftds-modal";
+import { FtdsModalConfirm } from "./ftds-modal-confirm";
+export default {
+    "ftds-modal": FtdsModal,
+    "ftds-modal-confirm": FtdsModalConfirm,
+};

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

@@ -0,0 +1,20 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsModal } from "./ftds-modal";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
+export declare class FtdsModalConfirm extends FtLitElement {
+    static elementDefinitions: ElementDefinitionsMap;
+    heading: string;
+    text: string;
+    confirmText: string;
+    cancelText: string;
+    confirmIcon: FtdsIcons;
+    confirmIconVariant: string;
+    cancelIcon: FtdsIcons;
+    cancelIconVariant: string;
+    modal: FtdsModal;
+    promiseResolve?: (value: boolean) => void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    askConfirmation(): Promise<boolean>;
+    onConfirm(): void;
+    onCancel(): void;
+}

package/build/ftds-modal-confirm.js

@@ -0,0 +1,107 @@
+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 { DesignSystemFamily, FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { html } from "lit";
+import { FtdsModal } from "./ftds-modal";
+import { DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { FtDsModalBodyTypography } from "./ftds-modal.properties";
+import { FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+import { property, query, } from "lit/decorators.js";
+import { FtdsTypography } from "@fluid-topics/ftds-typography";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+export class FtdsModalConfirm extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.confirmText = "Confirm";
+        this.cancelText = "Cancel";
+        this.confirmIcon = FtdsIcons.CHECK;
+        this.confirmIconVariant = FtdsIconVariants.regular;
+        this.cancelIcon = FtdsIcons.XMARK;
+        this.cancelIconVariant = FtdsIconVariants.regular;
+    }
+    render() {
+        return html `
+            <ftds-modal
+                heading="${this.heading}"
+                size="${DesignSystemSize.small}"
+                @close=${this.onCancel}
+            >
+                <ftds-typography variant="${FtDsModalBodyTypography}">
+                    ${this.text}
+                </ftds-typography>
+                <ftds-button slot="actions"
+                             tertiary
+                             autofocus
+                             family="${DesignSystemFamily.neutral}"
+                             size="${DesignSystemSize.large}"
+                             icon="${this.cancelIcon}"
+                             iconVariant="${this.cancelIconVariant}"
+                             @click=${this.onCancel}>
+                    ${this.cancelText}
+                </ftds-button>
+                <ftds-button slot="actions"
+                             primary
+                             size="${DesignSystemSize.large}"
+                             @click=${this.onConfirm}
+                             icon="${this.confirmIcon}"
+                             iconVariant="${this.confirmIconVariant}">
+                    ${this.confirmText}
+                </ftds-button>
+            </ftds-modal>
+        `;
+    }
+    async askConfirmation() {
+        this.modal.open();
+        const result = await new Promise((resolve) => {
+            this.promiseResolve = resolve;
+        });
+        this.modal.close();
+        return result;
+    }
+    onConfirm() {
+        var _a;
+        (_a = this.promiseResolve) === null || _a === void 0 ? void 0 : _a.call(this, true);
+        this.promiseResolve = undefined;
+    }
+    onCancel() {
+        var _a;
+        (_a = this.promiseResolve) === null || _a === void 0 ? void 0 : _a.call(this, false);
+        this.promiseResolve = undefined;
+    }
+}
+FtdsModalConfirm.elementDefinitions = {
+    "ftds-modal": FtdsModal,
+    "ftds-typography": FtdsTypography,
+    "ftds-button": FtdsButton,
+};
+__decorate([
+    property({ type: String })
+], FtdsModalConfirm.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], FtdsModalConfirm.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], FtdsModalConfirm.prototype, "confirmText", void 0);
+__decorate([
+    property({ type: String })
+], FtdsModalConfirm.prototype, "cancelText", void 0);
+__decorate([
+    property({ type: String })
+], FtdsModalConfirm.prototype, "confirmIcon", void 0);
+__decorate([
+    property({ type: String })
+], FtdsModalConfirm.prototype, "confirmIconVariant", void 0);
+__decorate([
+    property({ type: String })
+], FtdsModalConfirm.prototype, "cancelIcon", void 0);
+__decorate([
+    property({ type: String })
+], FtdsModalConfirm.prototype, "cancelIconVariant", void 0);
+__decorate([
+    query("ftds-modal")
+], FtdsModalConfirm.prototype, "modal", void 0);

package/build/ftds-modal.d.ts

@@ -0,0 +1,25 @@
+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";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+declare const FtdsModal_base: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtdsModal extends FtdsModal_base implements FtdsModalProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    heading: string;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
+    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;
+    private onOverlayClick;
+    private onClose;
+}
+export {};

package/build/ftds-modal.js

@@ -0,0 +1,122 @@
+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, nothing, } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { DesignSystemFamily, FtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { classMap } from "lit/directives/class-map.js";
+import { designSystemStyle } from "./ftds-modal.styles";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+import { DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { FtdsIcon, FtdsIcons, } from "@fluid-topics/ftds-icon";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { defaultModalMessages, modal, } from "./FtDsModalMessages";
+class FtdsModalCloseEvent extends Event {
+    constructor() {
+        super("close");
+    }
+}
+export class FtdsModal extends withI18n(FtdsBase) {
+    constructor() {
+        super();
+        this.heading = "";
+        this.size = DesignSystemSize.small;
+        this.addI18nContext(modal, defaultModalMessages);
+    }
+    render() {
+        const classes = {
+            "ftds-modal": true,
+            ...this.getDesignSystemBaseClasses(),
+        };
+        return html `
+            <div class="${classMap(classes)}" part="container">
+                <dialog part="dialog"
+                        @close=${this.onClose}>
+                    <div part="overlay" @click=${this.onOverlayClick}></div>
+                    <div part="inner-container">
+                        <div part="header">
+                            ${this.icon ? html `
+                                <ftds-icon part="icon" icon="${this.icon}" variant="${this.iconVariant}"></ftds-icon>
+                            ` : nothing}
+                            <ftds-typography part="heading" variant="${FtdsTypographyVariants.body1semibold}">
+                                ${this.heading}
+                            </ftds-typography>
+                            <ftds-button part="closing-button"
+                                         size="${DesignSystemSize.large}"
+                                         icon="${FtdsIcons.XMARK}"
+                                         tertiary
+                                         family="${DesignSystemFamily.neutral}"
+                                         label="${modal.messages.closeModal()}"
+                                         @click=${this.close}>
+                            </ftds-button>
+                        </div>
+                        <div part="body">
+                            <div part="content">
+                                <slot></slot>
+                            </div>
+                            <div part="actions">
+                                <slot name="actions"></slot>
+                            </div>
+                        </div>
+                    </div>
+                </dialog>
+            </div>
+        `;
+    }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (props.has("dialogOpen")) {
+            if (this.dialogOpen) {
+                this.dialog.showModal();
+            }
+            else {
+                this.dialog.close();
+            }
+        }
+    }
+    open() {
+        this.dialogOpen = true;
+    }
+    close() {
+        this.dialogOpen = false;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.close();
+    }
+    onOverlayClick() {
+        this.close();
+    }
+    onClose() {
+        this.dispatchEvent(new FtdsModalCloseEvent());
+        this.close();
+    }
+}
+FtdsModal.elementDefinitions = {
+    "ftds-button": FtdsButton,
+    "ftds-typography": FtdsTypography,
+    "ftds-icon": FtdsIcon,
+};
+FtdsModal.styles = designSystemStyle;
+__decorate([
+    property()
+], FtdsModal.prototype, "heading", void 0);
+__decorate([
+    property()
+], FtdsModal.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtdsModal.prototype, "iconVariant", 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);