@fluid-topics/ftds-reorderable-list 2.1.0

package/build/ftds-reorderable-list.properties.d.ts

@@ -0,0 +1,20 @@
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+export interface FtdsReorderableListProperties {
+    items: FtdsReorderableListItem[];
+    editable: boolean;
+    removable: boolean;
+}
+export interface FtdsReorderableListItem {
+    id: string;
+    label: string;
+    warningMessage: string;
+    actions: FtdsReorderableListItemAction[];
+}
+export interface FtdsReorderableListItemAction {
+    label: string;
+    text?: string;
+    icon: FtdsIcons;
+    iconVariant: FtdsIconVariants;
+    disabled?: boolean;
+    run?: (event: MouseEvent | KeyboardEvent) => void;
+}

package/build/ftds-reorderable-list.properties.js

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

package/build/ftds-reorderable-list.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const FtdsReorderableListItemCssVariables: {
+    padding: import("@fluid-topics/design-system-variables").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ftds-reorderable-list.styles.js

@@ -0,0 +1,70 @@
+import { css } from "lit";
+import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { reorderableList } from "@fluid-topics/design-system-variables";
+export const FtdsReorderableListItemCssVariables = {
+    padding: FtCssVariableFactory.create("--ftds-reorderable-list-item--padding", "", "SIZE", "8px"),
+};
+// language=CSS
+export const styles = css `
+    .ftds-reorderable-list--container {
+        display: flex;
+        flex-direction: column;
+        background-color: ${reorderableList.backgroundColor};
+        border: ${reorderableList.borderWidth} solid ${reorderableList.borderColor};
+        border-radius: ${reorderableList.borderRadius};
+        padding: ${reorderableList.verticalPadding};
+        list-style-type: none;
+        gap: ${reorderableList.reorderableItemsGap};
+    }
+
+    ol[role=listbox] {
+        display: flex;
+        flex-direction: column;
+        gap: ${reorderableList.reorderableItemsGap};
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    ol li {
+        display: flex;
+        background-color: ${reorderableList.reorderableItemBackgroundColor};
+        border-radius: ${reorderableList.borderRadius};
+        box-shadow: ${reorderableList.boxShadow};
+        padding: ${FtdsReorderableListItemCssVariables.padding};
+        gap: ${reorderableList.reorderableItemsGap};
+        min-height: 40px;
+    }
+
+    ol li:hover {
+        cursor: grab
+    }
+
+    .ftds-reorderable-list-item--left {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        gap: ${reorderableList.gap};
+    }
+
+    .ftds-reorderable-list-item--left-actions {
+        display: flex;
+        gap: ${reorderableList.gap};
+    }
+
+    .ftds-reorderable-list-item--right {
+        display: flex;
+        justify-content: end;
+    }
+
+    .ftds-reorderable-list-item--drag-grip {
+        opacity: ${reorderableList.reorderableItemGripOpacity};
+    }
+
+    .ftds-reorderable-list-item--drag-grip:focus {
+        outline: 2px solid #0e98b4;
+        outline-offset: 2px;
+        border-radius: 999px;
+    }
+
+`;

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ftds-reorderable-list.styles";
+export * from "./ftds-reorderable-list.properties";
+export * from "./ftds-reorderable-list";
+import "./define";

package/build/index.js

@@ -0,0 +1,4 @@
+export * from "./ftds-reorderable-list.styles";
+export * from "./ftds-reorderable-list.properties";
+export * from "./ftds-reorderable-list";
+import "./define";

package/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@fluid-topics/ftds-reorderable-list",
+    "version": "2.1.0",
+    "description": "The design system reorderable list component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-reorderable-list.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": "2.1.0",
+        "@fluid-topics/ftds-button": "2.1.0",
+        "@fluid-topics/ftds-icon": "2.1.0",
+        "@fluid-topics/ftds-notice": "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"
+}