@fluid-topics/ft-drawer 1.3.56

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

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

package/build/ft-drawer.properties.js

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

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

@@ -0,0 +1,24 @@
+export declare const FtDrawerCssVariables: {
+    shadow: 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;
+    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;
+    actionsPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    actionsBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    actionsBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    actionsBackgroundColor: 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;
+};
+export declare const ftDrawerStyles: import("lit").CSSResult;

package/build/ft-drawer.styles.js

@@ -0,0 +1,141 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
+export const FtDrawerCssVariables = {
+    shadow: FtCssVariableFactory.extend("--ft-drawer-shadow", "", designSystemVariables.elevation03),
+    width: FtCssVariableFactory.create("--ft-drawer-width", "", "SIZE", "800px"),
+    headerPadding: FtCssVariableFactory.create("--ft-drawer-header-padding", "", "SIZE", "8px 16px"),
+    headerGap: FtCssVariableFactory.create("--ft-drawer-header-gap", "", "SIZE", "8px"),
+    headerBorderColor: FtCssVariableFactory.extend("--ft-drawer-header-border-color", "", designSystemVariables.colorOutline),
+    headerBorderWidth: FtCssVariableFactory.create("--ft-drawer-header-border-width", "", "SIZE", "1px"),
+    headerBackgroundColor: FtCssVariableFactory.extend("--ft-drawer-header-background-color", "", designSystemVariables.colorSurface),
+    headerColor: FtCssVariableFactory.extend("--ft-drawer-header-color", "", designSystemVariables.colorOnSurfaceHigh),
+    contentPadding: FtCssVariableFactory.create("--ft-drawer-content-padding", "", "SIZE", "16px"),
+    contentGap: FtCssVariableFactory.create("--ft-drawer-content-gap", "", "SIZE", "16px"),
+    contentBackgroundColor: FtCssVariableFactory.extend("--ft-drawer-content-background-color", "", designSystemVariables.colorSurface),
+    contentColor: FtCssVariableFactory.extend("--ft-drawer-content-color", "", designSystemVariables.colorOnSurfaceMedium),
+    actionsGap: FtCssVariableFactory.create("--ft-drawer-action-gap", "", "SIZE", "8px"),
+    actionsPadding: FtCssVariableFactory.create("--ft-drawer-actions-padding", "", "SIZE", "8px 16px"),
+    actionsBorderColor: FtCssVariableFactory.extend("--ft-drawer-actions-border-color", "", designSystemVariables.colorOutline),
+    actionsBorderWidth: FtCssVariableFactory.create("--ft-drawer-actions-border-width", "", "SIZE", "1px"),
+    actionsBackgroundColor: FtCssVariableFactory.extend("--ft-drawer-actions-background-color", "", designSystemVariables.colorSurface),
+    overlayBackgroundColor: FtCssVariableFactory.create("--ft-drawer-overlay-background-color", "", "COLOR", "rgb(10, 10, 13)"),
+    overlayOpacity: FtCssVariableFactory.create("--ft-drawer-overlay-opacity", "", "NUMBER", "0.4"),
+    closingButtonColor: FtCssVariableFactory.extend("--ft-drawer-closing-button-color", "", designSystemVariables.colorOnSurfaceMedium),
+    contentOverflow: FtCssVariableFactory.create("--ft-drawer-content-overflow", "", "UNKNOWN", "visible"),
+};
+// language=CSS
+export const ftDrawerStyles = css `
+
+    @keyframes slide-in-from-right {
+        0% {
+            transform: translateX(100%);
+        }
+
+        100% {
+            transform: translateX(0%);
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: ${FtDrawerCssVariables.overlayOpacity};
+        }
+    }
+
+    [part=container] {
+        display: contents;
+    }
+
+    [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] {
+        animation-duration: 0.1s;
+        animation-name: fade-in;
+        animation-timing-function: ease-in-out;
+
+        position: absolute;
+        inset: 0;
+        background-color: ${FtDrawerCssVariables.overlayBackgroundColor};
+        opacity: ${FtDrawerCssVariables.overlayOpacity};
+    }
+
+    [part=inner-container] {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        max-height: 100%;
+        width: ${FtDrawerCssVariables.width};
+        max-width: 100%;
+        box-shadow: ${FtDrawerCssVariables.shadow};
+
+        animation-duration: 0.2s;
+        animation-name: slide-in-from-right;
+        animation-timing-function: cubic-bezier(.46, 0, .31, .95);
+    }
+
+    [part=header] {
+        padding: ${FtDrawerCssVariables.headerPadding};
+        display: flex;
+        align-items: center;
+        gap: ${FtDrawerCssVariables.headerGap};
+        border-color: ${FtDrawerCssVariables.headerBorderColor};
+        border-bottom-width: ${FtDrawerCssVariables.headerBorderWidth};
+        border-bottom-style: solid;
+        color: ${FtDrawerCssVariables.headerColor};
+        background-color: ${FtDrawerCssVariables.headerBackgroundColor};
+        flex-shrink: 0;
+    }
+
+    [part=heading] {
+        flex-grow: 1;
+        word-break: break-word;
+    }
+
+    [part=actions] {
+        display: flex;
+        align-items: center;
+        gap: ${FtDrawerCssVariables.actionsGap};
+        padding: ${FtDrawerCssVariables.actionsPadding};
+        border-color: ${FtDrawerCssVariables.actionsBorderColor};
+        border-top-width: ${FtDrawerCssVariables.actionsBorderWidth};
+        border-top-style: solid;
+        background-color: ${FtDrawerCssVariables.actionsBackgroundColor};
+    }
+
+    [part=closing-button] {
+        color: ${FtDrawerCssVariables.closingButtonColor};
+        order: -1;
+    }
+
+    [part=body] {
+        flex-shrink: 1;
+        flex-grow: 1;
+        padding: ${FtDrawerCssVariables.contentPadding};
+        display: flex;
+        flex-direction: column;
+        gap: ${FtDrawerCssVariables.contentGap};
+        color: ${FtDrawerCssVariables.contentColor};
+        background-color: ${FtDrawerCssVariables.contentBackgroundColor};
+        overflow: ${FtDrawerCssVariables.contentOverflow};
+    }
+
+    [part=content] {
+        flex-grow: 1;
+        overflow: ${FtDrawerCssVariables.contentOverflow};
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ft-drawer.styles";
+export * from "./ft-drawer.properties";
+export * from "./ft-drawer";

package/build/index.js

@@ -0,0 +1,6 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtDrawer } from "./ft-drawer";
+export * from "./ft-drawer.styles";
+export * from "./ft-drawer.properties";
+export * from "./ft-drawer";
+customElement("ft-drawer")(FtDrawer);

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@fluid-topics/ft-drawer",
+    "version": "1.3.56",
+    "description": "A drawer component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ft-drawer.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/ft-wc-utils": "1.3.56",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "1.3.56"
+    },
+    "gitHead": "01868f9694982c27cc22b788567208da17c855e2"
+}