@fluid-topics/ft-modal 2.0.37 → 2.1.0

package/build/ft-modal.styles.d.ts

@@ -1,23 +1,23 @@
 export declare const FtModalCssVariables: {
-    shadow: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    height: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    width: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    headerPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    headerGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    headerBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    headerBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    headerBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    headerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    headerIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    contentPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    contentGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    contentBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    contentColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    actionsGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    overlayBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    overlayOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    closingButtonColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    contentOverflow: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    shadow: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    height: import("@fluid-topics/design-system-variables").FtCssVariable;
+    width: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    headerIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    contentPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    contentGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    contentBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    contentColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    actionsGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    overlayBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    overlayOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    closingButtonColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    contentOverflow: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const ftmodalStyles: import("lit").CSSResult;

package/build/index.d.ts

@@ -1,8 +1,4 @@
 export * from "./ft-modal";
 export * from "./ft-modal.styles";
 export * from "./ft-modal.properties";
-export * from "./ftds-modal.styles";
-export * from "./ftds-modal.properties";
-export * from "./ftds-modal";
-export * from "./ftds-modal-confirm";
 import "./define";

package/build/index.js

@@ -1,8 +1,4 @@
 export * from "./ft-modal";
 export * from "./ft-modal.styles";
 export * from "./ft-modal.properties";
-export * from "./ftds-modal.styles";
-export * from "./ftds-modal.properties";
-export * from "./ftds-modal";
-export * from "./ftds-modal-confirm";
 import "./define";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-modal",
-    "version": "2.0.37",
+    "version": "2.1.0",
     "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": "2.0.37",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "2.0.37"
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
     },
-    "gitHead": "ef1f68e09e0331293931458a6479b551dcc4cecc"
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
 }

package/build/FtDsModalMessages.d.ts

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtdsModal } from "./ftds-modal";
-export declare class FtdsModalConfirm extends FtLitElement {
-    static elementDefinitions: ElementDefinitionsMap;
-    heading: string;
-    text: string;
-    confirmText: string;
-    cancelText: string;
-    confirmIcon: string;
-    cancelIcon: 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

@@ -1,97 +0,0 @@
-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 { FtIcons } from "@fluid-topics/ft-icon";
-import { property, query, } from "lit/decorators.js";
-import { FtdsTypography } from "@fluid-topics/ft-typography";
-import { FtdsButton } from "@fluid-topics/ft-button";
-export class FtdsModalConfirm extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.confirmText = "Confirm";
-        this.cancelText = "Cancel";
-        this.confirmIcon = FtIcons.CHECK;
-        this.cancelIcon = FtIcons.CLOSE;
-    }
-    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}"
-                             @click=${this.onCancel}>
-                    ${this.cancelText}
-                </ftds-button>
-                <ftds-button slot="actions"
-                             primary
-                             size="${DesignSystemSize.large}"
-                             @click=${this.onConfirm}
-                             icon="${this.confirmIcon}">
-                    ${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, "cancelIcon", void 0);
-__decorate([
-    query("ftds-modal")
-], FtdsModalConfirm.prototype, "modal", void 0);

package/build/ftds-modal.d.ts

@@ -1,23 +0,0 @@
-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";
-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?: 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;
-    private onOverlayClick;
-    private onClose;
-}
-export {};

package/build/ftds-modal.js

@@ -1,119 +0,0 @@
-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/ft-button";
-import { DesignSystemSize } from "@fluid-topics/design-system-variables";
-import { FtIcon, FtIcons, } from "@fluid-topics/ft-icon";
-import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ft-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 `
-                                <ft-icon part="icon" value="${this.icon}"></ft-icon>
-                            ` : nothing}
-                            <ftds-typography part="heading" variant="${FtdsTypographyVariants.body1semibold}">
-                                ${this.heading}
-                            </ftds-typography>
-                            <ftds-button part="closing-button"
-                                         size="${DesignSystemSize.large}"
-                                         icon="${FtIcons.CLOSE}"
-                                         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,
-    "ft-icon": FtIcon,
-};
-FtdsModal.styles = designSystemStyle;
-__decorate([
-    property()
-], FtdsModal.prototype, "heading", void 0);
-__decorate([
-    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);

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

@@ -1,7 +0,0 @@
-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 = FtdsTypographyVariants.body2regular;

package/build/ftds-modal.properties.js

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

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

@@ -1,3 +0,0 @@
-import { modal } from "@fluid-topics/design-system-variables";
-export { modal as FtdsModalCssVariables };
-export declare const designSystemStyle: import("lit").CSSResult[];

package/build/ftds-modal.styles.js

@@ -1,95 +0,0 @@
-import { css } from "lit";
-import { modal, } from "@fluid-topics/design-system-variables";
-import { foundation } from "@fluid-topics/ft-wc-utils";
-export { modal as FtdsModalCssVariables };
-// language=CSS
-export const designSystemStyle = [
-    css `
-        .ftds--size-small [part=dialog] {
-            --ftds-modal--target-width: ${modal.smallContainerTargetWidth};
-        }
-
-        .ftds--size-medium [part=dialog] {
-            --ftds-modal--target-width: ${modal.mediumContainerTargetWidth};
-        }
-
-        .ftds--size-large [part=dialog] {
-            --ftds-modal--target-width: ${modal.largeContainerTargetWidth};
-        }
-
-        [part=container] {
-            position: relative;
-        }
-
-        [part=dialog] {
-            width: 100%;
-            height: 100%;
-            max-width: unset; /*Override user-agent stylesheet for dialog:modal set a max width and height to 100% - 6px*/
-            max-height: unset;
-            background: transparent;
-            border: none;
-        }
-
-        [part=overlay] {
-            position: absolute;
-            inset: 0;
-            background-color: rgba(from ${modal.overlayBackgroundColor} r g b / ${modal.overlayOpacity});
-        }
-
-        [part=inner-container] {
-            position: fixed;
-            top: 50%;
-            transform: translate(0, -50%);
-            box-shadow: ${modal.shadow};
-            border-radius: ${modal.borderRadius};
-            overflow: hidden;
-            width: var(--ftds-modal--target-width);
-            background-color: ${modal.bodyBackgroundColor};
-            margin: auto max(
-                ${foundation.spacing6},
-                calc((100% - var(--ftds-modal--target-width)) / 2)
-            );
-        }
-
-        [part=header] {
-            padding: ${modal.headerVerticalPadding} ${modal.headerRightPadding} ${modal.headerVerticalPadding} ${modal.headerLeftPadding};
-            display: flex;
-            align-items: center;
-            gap: ${modal.headerGap};
-            border-color: ${modal.headerBorderColor};
-            border-bottom-width: ${modal.headerBorderBottomWidth};
-            border-bottom-style: solid;
-            color: ${modal.headerColor};
-            background-color: ${modal.headerBackgroundColor};
-        }
-
-        [part=heading] {
-            flex-grow: 1;
-            overflow-wrap: anywhere;
-        }
-
-        [part=icon] {
-            color: ${modal.headerLeadingIconColor};
-        }
-
-        [part=closing-button] {
-            justify-self: flex-end;
-        }
-
-        [part=body] {
-            padding: ${modal.bodyVerticalPadding} ${modal.bodyHorizontalPadding};
-            display: flex;
-            flex-direction: column;
-            gap: ${modal.bodyVerticalGap};
-            color: ${modal.bodyColor};
-            background-color: ${modal.bodyBackgroundColor};
-            overflow-wrap: anywhere;
-        }
-
-        [part=actions] {
-            align-self: flex-end;
-            display: flex;
-            gap: ${foundation.spacing3}
-        }
-    `
-];