@fluid-topics/ftds-modal 2.1.0

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

@@ -0,0 +1,9 @@
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+import { FtdsBaseInterface } from "@fluid-topics/ft-wc-utils";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+export interface FtdsModalProperties extends FtdsBaseInterface {
+    heading: string;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
+}
+export declare const FtDsModalBodyTypography = FtdsTypographyVariants.body2regular;

package/build/ftds-modal.properties.js

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

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

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

@@ -0,0 +1,95 @@
+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}
+        }
+    `,
+];

package/build/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./ftds-modal.styles";
+export * from "./ftds-modal.properties";
+export * from "./ftds-modal";
+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

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

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "@fluid-topics/ftds-modal",
+    "version": "2.1.0",
+    "description": "The design system modal component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-modal.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/design-system-variables": "3.5.0",
+        "@fluid-topics/ft-i18n": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "@fluid-topics/ftds-button": "2.1.0",
+        "@fluid-topics/ftds-icon": "2.1.0",
+        "@fluid-topics/ftds-typography": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}