@fluid-topics/ft-modal 1.3.22 → 1.3.23

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

@@ -0,0 +1,7 @@
+import { FtTypographyVariants } from "@fluid-topics/ft-typography";
+export interface FtModalProperties {
+    buttonLabel: string;
+    heading: string;
+    icon?: string;
+}
+export declare const FtModalBodyTypography = FtTypographyVariants.body1;

package/build/ft-modal.properties.js

@@ -0,0 +1,2 @@
+import { FtTypographyVariants } from "@fluid-topics/ft-typography";
+export const FtModalBodyTypography = FtTypographyVariants.body1;

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

@@ -0,0 +1,21 @@
+export declare const FtModalCssVariables: {
+    shadow: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadius: 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;
+    contentMargin: 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;
+    closingButtonColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const ftmodalStyles: import("lit").CSSResult;

package/build/ft-modal.styles.js

@@ -0,0 +1,110 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtModalCssVariables = {
+    shadow: FtCssVariableFactory.create("--ft-modal-shadow", "", "SHADOW", "0 6px 13px 0 rgba(0, 0, 0, .06), 0 3px 7px 0 rgba(0, 0, 0, .14), 0 1px 2px 0 rgba(0, 0, 0, .06)"),
+    borderRadius: FtCssVariableFactory.extend("--ft-modal-border-radius", "", designSystemVariables.borderRadiusM),
+    width: FtCssVariableFactory.create("--ft-modal-width", "", "SIZE", "800px"),
+    headerPadding: FtCssVariableFactory.create("--ft-modal-header-padding", "", "SIZE", "8px"),
+    headerGap: FtCssVariableFactory.create("--ft-modal-header-gap", "", "SIZE", "8px"),
+    headerBorderColor: FtCssVariableFactory.extend("--ft-modal-header-border-color", "", designSystemVariables.colorOutline),
+    headerBorderWidth: FtCssVariableFactory.create("--ft-modal-header-border-width", "", "SIZE", "1px"),
+    headerBackgroundColor: FtCssVariableFactory.create("--ft-modal-header-background-color", "", "COLOR", "#fbfbfc"),
+    headerColor: FtCssVariableFactory.extend("--ft-modal-header-color", "", designSystemVariables.colorOnSurfaceHigh),
+    headerIconColor: FtCssVariableFactory.extend("--ft-modal-header-icon-color", "", designSystemVariables.colorOnSurfaceHigh),
+    contentMargin: FtCssVariableFactory.create("--ft-modal-content-margin", "", "SIZE", "16px"),
+    contentPadding: FtCssVariableFactory.create("--ft-modal-content-padding", "", "SIZE", "16px"),
+    contentGap: FtCssVariableFactory.create("--ft-modal-content-gap", "", "SIZE", "16px"),
+    contentBackgroundColor: FtCssVariableFactory.extend("--ft-modal-content-background-color", "", designSystemVariables.colorSurface),
+    contentColor: FtCssVariableFactory.extend("--ft-modal-content-color", "", designSystemVariables.colorOnSurfaceHigh),
+    actionsGap: FtCssVariableFactory.create("--ft-modal-action-gap", "", "SIZE", "8px"),
+    overlayBackgroundColor: FtCssVariableFactory.create("--ft-modal-overlay-background-color", "", "COLOR", "rgba(10, 10, 13, 0.4)"),
+    closingButtonColor: FtCssVariableFactory.extend("--ft-modal-closing-button-color", "", designSystemVariables.colorOnSurfaceMedium),
+};
+// language=CSS
+export const ftmodalStyles = css `
+    [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: ${FtModalCssVariables.overlayBackgroundColor};
+    }
+
+    [part=inner-container] {
+        position: fixed;
+        inset: 0;
+        background-color: ${FtModalCssVariables.contentBackgroundColor};
+        display: flex;
+        flex-direction: column;
+
+        @media (min-width: 768px) {
+            top: 50%;
+            bottom: unset;
+            transform: translate(0, -50%);
+            box-shadow: ${FtModalCssVariables.shadow};
+            border-radius: ${FtModalCssVariables.borderRadius};
+            overflow: hidden;
+            width: ${FtModalCssVariables.width};
+            margin: auto max(
+                ${FtModalCssVariables.contentMargin},
+                calc((100% - ${FtModalCssVariables.width}) / 2)
+            );
+        }
+    }
+
+
+    [part=header] {
+        padding: ${FtModalCssVariables.headerPadding};
+        display: flex;
+        align-items: center;
+        gap: ${FtModalCssVariables.headerGap};
+        border-color: ${FtModalCssVariables.headerBorderColor};
+        border-bottom-width: ${FtModalCssVariables.headerBorderWidth};
+        border-bottom-style: solid;
+        color: ${FtModalCssVariables.headerColor};
+        background-color: ${FtModalCssVariables.headerBackgroundColor};
+    }
+
+    [part=heading] {
+        flex-grow: 1;
+    }
+
+    [part=icon] {
+        color: ${FtModalCssVariables.headerIconColor};
+    }
+
+    [part=closing-button] {
+        justify-self: flex-end;
+    }
+
+    [part=body] {
+        flex-grow: 1;
+        padding: ${FtModalCssVariables.contentPadding};
+        display: flex;
+        flex-direction: column;
+        gap: ${FtModalCssVariables.contentGap};
+        color: ${FtModalCssVariables.contentColor};
+        background-color: ${FtModalCssVariables.contentBackgroundColor};
+    }
+
+    [part=content] {
+        flex-grow: 1;
+    }
+
+    [part=actions] {
+        align-self: flex-end;
+        display: flex;
+        gap: ${FtModalCssVariables.actionsGap};
+    }
+
+    [part=closing-button] {
+        color: ${FtModalCssVariables.closingButtonColor};
+    }
+`;

package/build/index.d.ts

@@ -1,3 +1,6 @@
+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";

package/build/index.js

@@ -1,9 +1,14 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtdsModal } from "./ftds-modal";
 import { FtdsModalConfirm } from "./ftds-modal-confirm";
+import { FtModal } from "./ft-modal";
+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";
+customElement("ft-modal")(FtModal);
 customElement("ftds-modal")(FtdsModal);
 customElement("ftds-modal-confirm")(FtdsModalConfirm);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-modal",
-    "version": "1.3.22",
+    "version": "1.3.23",
     "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.22",
+        "@fluid-topics/ft-wc-utils": "1.3.23",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.22"
+        "@fluid-topics/ft-wc-test-utils": "1.3.23"
     },
-    "gitHead": "f8ee485234740327c93ce01f6149dc1605d080b9"
+    "gitHead": "1449ae5b73dbdbe40583d414fc5d8e5395694146"
 }