@sebgroup/green-core 2.19.0-rc.20251212142916599 → 2.20.0-rc.20251215154321804

package/components/table/table.d.ts

@@ -0,0 +1,2 @@
+import { GdsTable } from './table.component';
+export { GdsTable };

package/components/table/table.imports.d.ts

@@ -0,0 +1,6 @@
+import { GdsBadge, GdsButton, GdsContextMenu, GdsDropdown, GdsFlex, GdsImg, GdsInput, GdsLink, GdsMenuItem, IconCrossSmall } from '../../pure';
+import { GdsPagination } from '../pagination/pagination.component';
+export { checkboxToggle as Checkbox } from '../../shared-styles/rbcb-toggle.template';
+export { accountsFormats as FormatAccount, dateTimeFormats as FormatDate, numberFormats as FormatNumber, } from '../formatted-text/formatters';
+export declare const Styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+export declare const Dependencies: (typeof GdsMenuItem | typeof GdsButton | typeof IconCrossSmall | typeof GdsFlex | typeof GdsBadge | typeof GdsLink | typeof GdsContextMenu | typeof GdsDropdown | typeof GdsImg | typeof GdsPagination | typeof GdsInput)[];

package/components/table/table.imports.js

@@ -0,0 +1,63 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import {
+  GdsBadge,
+  GdsButton,
+  GdsCard,
+  GdsContextMenu,
+  GdsDropdown,
+  GdsFlex,
+  GdsImg,
+  GdsInput,
+  GdsLink,
+  GdsMenuItem,
+  GdsText,
+  IconCopy,
+  IconCrossSmall,
+  IconDotGridOneHorizontal,
+  IconMagnifyingGlass,
+  IconMinusSmall,
+  IconSort,
+  IconSortDown,
+  IconSortUp
+} from "../../pure.js";
+import checkboxStyles from "../../shared-styles/rbcb-toggle.style.js";
+import { tokens } from "../../tokens.style.js";
+import { GdsPagination } from "../pagination/pagination.component.js";
+import { TableStyles } from "./table.styles.js";
+import { checkboxToggle } from "../../shared-styles/rbcb-toggle.template.js";
+import {
+  accountsFormats,
+  dateTimeFormats,
+  numberFormats
+} from "../formatted-text/formatters.js";
+const Styles = [tokens, checkboxStyles, TableStyles];
+const Dependencies = [
+  GdsButton,
+  GdsCard,
+  GdsImg,
+  GdsContextMenu,
+  GdsMenuItem,
+  GdsDropdown,
+  GdsInput,
+  GdsPagination,
+  GdsText,
+  GdsBadge,
+  GdsLink,
+  GdsFlex,
+  IconCopy,
+  IconCrossSmall,
+  IconMinusSmall,
+  IconMagnifyingGlass,
+  IconSort,
+  IconSortDown,
+  IconSortUp,
+  IconDotGridOneHorizontal
+];
+export {
+  checkboxToggle as Checkbox,
+  Dependencies,
+  accountsFormats as FormatAccount,
+  dateTimeFormats as FormatDate,
+  numberFormats as FormatNumber,
+  Styles
+};

package/components/table/table.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { GdsTable } from "./table.component.js";
+GdsTable.define();
+export {
+  GdsTable
+};

package/components/table/table.stories.data.d.ts

@@ -0,0 +1,53 @@
+import { TableColumn, TableRequest, TableResponse } from './table.types';
+interface UserData {
+    id: number;
+    name: string;
+    email: string;
+    role: 'Admin' | 'User' | 'Editor';
+    status: 'Active' | 'Inactive';
+    amount: number;
+    account: string;
+    lastLogin: string;
+    avatarUrl?: string;
+    department?: string;
+    download?: string;
+}
+interface FeedbackData {
+    id: number;
+    name: string;
+    email: string;
+    feedback: string;
+    notes: string;
+    status: 'Active' | 'Inactive';
+    department: string;
+}
+export declare const Users: {
+    Columns: TableColumn[];
+    Actions: {
+        label: string;
+        justify: string;
+        cell: {
+            type: string;
+            items: ({
+                label: (row: UserData) => "Activate" | "Deactivate";
+                divider?: undefined;
+            } | {
+                label: string;
+                divider?: undefined;
+            } | {
+                divider: boolean;
+                label: string;
+            })[];
+        };
+    };
+    Data: (request: TableRequest) => Promise<TableResponse<UserData>>;
+};
+export declare const Feedback: {
+    Columns: TableColumn[];
+    MultipleActions: any;
+    ActionLink: any;
+    ActionButton: any;
+    ActionContextMenu: any;
+    Data: (request: TableRequest) => Promise<TableResponse<FeedbackData>>;
+};
+export {};

package/components/table/table.stories.data.js

@@ -0,0 +1,401 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+const USERS = {
+  FIRST_NAMES: [
+    "Alexandra",
+    "Benjamin",
+    "Caroline",
+    "David",
+    "Elena",
+    "Fredrik"
+  ],
+  LAST_NAMES: ["Andersson", "Bergstr\xF6m", "Carlsson", "Dahlstr\xF6m", "Eriksson"],
+  ROLES: ["Admin", "User", "Editor"],
+  STATUSES: ["Active", "Inactive"],
+  DEPARTMENTS: ["Engineering", "Sales", "Marketing", "Support", "HR"],
+  COUNT: 100
+};
+const generateUserRecord = (index) => {
+  const id = index + 1;
+  const firstName = USERS.FIRST_NAMES[index % USERS.FIRST_NAMES.length];
+  const lastName = USERS.LAST_NAMES[index % USERS.LAST_NAMES.length];
+  return {
+    id,
+    name: `${firstName} ${lastName}`,
+    email: `${firstName.toLowerCase()}@domain.tld`,
+    role: USERS.ROLES[index % USERS.ROLES.length],
+    status: USERS.STATUSES[index % USERS.STATUSES.length],
+    department: USERS.DEPARTMENTS[index % USERS.DEPARTMENTS.length],
+    amount: Math.floor(Math.random() * 5e5) + 1e4,
+    account: `5440${String(index * 7919 % 1e7).padStart(7, "0")}`,
+    lastLogin: new Date(
+      Date.now() - Math.random() * 30 * 864e5
+    ).toISOString(),
+    avatarUrl: `https://api.dicebear.com/7.x/avataaars/svg?seed=${firstName}${lastName}`,
+    download: `#`
+  };
+};
+const generateUserDataset = () => Array.from({ length: USERS.COUNT }, (_, i) => generateUserRecord(i));
+const userDataProvider = async (request) => {
+  await new Promise((resolve) => setTimeout(resolve, 1e3));
+  const allData = generateUserDataset();
+  let processedData = [...allData];
+  if (request.searchQuery) {
+    const query = request.searchQuery.toLowerCase();
+    processedData = processedData.filter(
+      (item) => Object.values(item).some(
+        (value) => String(value).toLowerCase().includes(query)
+      )
+    );
+  }
+  if (request.sortColumn) {
+    processedData.sort((a, b) => {
+      const aValue = String(a[request.sortColumn]);
+      const bValue = String(b[request.sortColumn]);
+      return request.sortDirection === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+    });
+  }
+  const startIndex = (request.page - 1) * request.rows;
+  const endIndex = startIndex + request.rows;
+  const paginatedData = processedData.slice(startIndex, endIndex);
+  return {
+    rows: paginatedData,
+    total: processedData.length
+  };
+};
+const Users = {
+  Columns: [
+    {
+      key: "id",
+      label: "ID",
+      sortable: false
+    },
+    {
+      key: "name",
+      label: "Name",
+      sortable: true,
+      cell: {
+        lead: {
+          type: "image",
+          src: (row) => row.avatarUrl,
+          alt: (row) => row.name,
+          width: "xl",
+          height: "xl"
+        }
+      }
+    },
+    {
+      key: "email",
+      label: "Email",
+      sortable: true,
+      justify: "space-between",
+      cell: {
+        trail: {
+          type: "button",
+          rank: "tertiary",
+          value: (row) => row.email,
+          /*  size: 'xs', */
+          template: "email-copy"
+        }
+      }
+    },
+    {
+      key: "role",
+      label: "Role",
+      sortable: true,
+      visible: false,
+      value: (row) => `${row.role.toUpperCase()} (${row.department || "N/A"})`
+    },
+    {
+      key: "status",
+      label: "Status",
+      sortable: true,
+      cell: {
+        value: {
+          type: "badge",
+          value: (row) => row.status,
+          variant: (row) => row.status === "Active" ? "positive" : "negative"
+        }
+      }
+    },
+    {
+      key: "department",
+      label: "Department",
+      sortable: true,
+      cell: {
+        lead: {
+          type: "icon",
+          template: "department-icon"
+        }
+      }
+    },
+    {
+      key: "amount",
+      label: "Amount",
+      sortable: true,
+      justify: "end",
+      cell: {
+        value: {
+          type: "formatted-number",
+          value: (row) => row.amount
+        },
+        trail: {
+          type: "badge",
+          value: "SEK"
+        }
+      }
+    },
+    {
+      key: "account",
+      label: "Account",
+      sortable: true,
+      cell: {
+        value: {
+          type: "formatted-account",
+          value: (row) => row.account,
+          format: "seb-account"
+        }
+      }
+    },
+    {
+      key: "lastLogin",
+      label: "Last Login",
+      sortable: true,
+      cell: {
+        value: {
+          type: "formatted-date",
+          value: (row) => row.lastLogin,
+          locale: "sv-SE",
+          format: "dateLong"
+        }
+      }
+    },
+    {
+      key: "download",
+      label: "Download",
+      cell: {
+        value: {
+          type: "link",
+          href: (row) => row.download,
+          download: true,
+          template: "download-image",
+          label: "Download file"
+        }
+      }
+    }
+  ],
+  Actions: {
+    label: "Actions",
+    justify: "end",
+    cell: {
+      type: "context-menu",
+      items: [
+        {
+          label: (row) => row.status === "Active" ? "Deactivate" : "Activate"
+          /*  onClick: (row: UserData) => console.log('Toggle status', row), */
+        },
+        {
+          label: "View Details"
+          /* onClick: (row: UserData) => console.log('View user', row), */
+        },
+        {
+          label: "Edit Profile"
+          /* onClick: (row: UserData) => console.log('Edit user', row), */
+        },
+        {
+          divider: true,
+          label: "Delete User"
+          /* onClick: (row: UserData) => {
+            if (confirm(`Delete ${row.name}?`)) {
+              console.log('Delete user', row)
+            }
+          }, */
+        }
+      ]
+    }
+  },
+  Data: userDataProvider
+};
+const FEEDBACK = {
+  FIRST_NAMES: ["Sophie", "Marcus", "Isabella", "Johan", "Emma", "Lucas"],
+  LAST_NAMES: ["Str\xF6m", "Nord", "Berg", "Gren", "Holm"],
+  DEPARTMENTS: ["Engineering", "Sales", "Marketing", "Support", "HR"],
+  STATUSES: ["Active", "Inactive"],
+  FEEDBACK_TEXTS: [
+    "Excellent user experience with intuitive interface and smooth navigation.",
+    "Performance needs improvement when handling large datasets.",
+    "Documentation is comprehensive but could benefit from more code examples.",
+    "Outstanding accessibility features and WCAG compliance implementation.",
+    "Mobile experience is good but some minor UI inconsistencies observed.",
+    "Feature request: Please add real-time collaboration capabilities.",
+    "Integration with third-party APIs works seamlessly.",
+    "User support team is responsive and helpful.",
+    "Suggest adding dark mode and customizable themes.",
+    "Security audit results are impressive and thorough."
+  ],
+  NOTES: [
+    "Customer upgraded to premium plan. All features activated.",
+    "Q1 planning meeting scheduled for next week at 10 AM.",
+    "Bug fix deployed in production. Monitor system for 24 hours.",
+    "Account manager assigned: John Smith.",
+    "Scheduled maintenance window: Saturday 2-4 AM.",
+    "Training session completed successfully.",
+    "Custom integration request in progress.",
+    "Contract renewal due in 30 days.",
+    "Performance optimization completed.",
+    "Security certificates updated to latest version."
+  ],
+  COUNT: 50
+};
+const generateFeedbackRecord = (index) => {
+  const id = index + 1;
+  const firstName = FEEDBACK.FIRST_NAMES[index % FEEDBACK.FIRST_NAMES.length];
+  const lastName = FEEDBACK.LAST_NAMES[index % FEEDBACK.LAST_NAMES.length];
+  return {
+    id,
+    name: `${firstName} ${lastName}`,
+    email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@company.com`,
+    feedback: FEEDBACK.FEEDBACK_TEXTS[index % FEEDBACK.FEEDBACK_TEXTS.length],
+    notes: FEEDBACK.NOTES[index % FEEDBACK.NOTES.length],
+    status: index % 3 === 0 ? "Inactive" : "Active",
+    department: FEEDBACK.DEPARTMENTS[index % FEEDBACK.DEPARTMENTS.length]
+  };
+};
+const generateFeedbackDataset = () => Array.from({ length: FEEDBACK.COUNT }, (_, i) => generateFeedbackRecord(i));
+const feedbackDataProvider = async (request) => {
+  await new Promise((resolve) => setTimeout(resolve, 800));
+  const allData = generateFeedbackDataset();
+  let processedData = [...allData];
+  if (request.searchQuery) {
+    const query = request.searchQuery.toLowerCase();
+    processedData = processedData.filter(
+      (item) => Object.values(item).some(
+        (value) => String(value).toLowerCase().includes(query)
+      )
+    );
+  }
+  if (request.sortColumn) {
+    processedData.sort((a, b) => {
+      const aValue = String(a[request.sortColumn]);
+      const bValue = String(b[request.sortColumn]);
+      return request.sortDirection === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+    });
+  }
+  const startIndex = (request.page - 1) * request.rows;
+  const endIndex = startIndex + request.rows;
+  const paginatedData = processedData.slice(startIndex, endIndex);
+  return {
+    rows: paginatedData,
+    total: processedData.length
+  };
+};
+const Feedback = {
+  Columns: [
+    {
+      key: "name",
+      label: "Name",
+      sortable: true,
+      align: "start"
+    },
+    {
+      key: "feedback",
+      label: "Feedback",
+      width: "350px"
+    },
+    {
+      key: "notes",
+      label: "Notes",
+      align: "start",
+      width: "300px"
+    },
+    {
+      key: "department",
+      label: "Department",
+      align: "start",
+      width: "120px"
+    },
+    {
+      key: "status",
+      label: "Status",
+      sortable: true,
+      align: "start",
+      justify: "end",
+      width: "100px",
+      cell: {
+        value: {
+          type: "badge",
+          value: (row) => row.status,
+          variant: (row) => row.status === "Active" ? "positive" : "negative",
+          size: "small"
+        }
+      }
+    }
+  ],
+  MultipleActions: {
+    label: "Actions",
+    align: "start",
+    justify: "start",
+    cell: [
+      {
+        type: "button",
+        size: "xs",
+        template: "actions-activate"
+      },
+      {
+        type: "button",
+        size: "xs",
+        variant: "negative",
+        template: "actions-delete"
+      }
+    ]
+  },
+  ActionLink: {
+    label: "Actions",
+    align: "start",
+    justify: "end",
+    cell: [
+      {
+        type: "link",
+        href: "#",
+        label: "Link"
+      }
+    ]
+  },
+  ActionButton: {
+    label: "Actions",
+    align: "start",
+    justify: "start",
+    cell: [
+      {
+        type: "button",
+        label: "Link"
+      }
+    ]
+  },
+  ActionContextMenu: {
+    label: "Actions",
+    align: "start",
+    justify: "end",
+    cell: {
+      type: "context-menu",
+      items: [
+        {
+          label: "Activate"
+        },
+        {
+          label: "View Details"
+        },
+        {
+          label: "Edit Profile"
+        },
+        {
+          label: "Delete User"
+        }
+      ]
+    }
+  },
+  Data: feedbackDataProvider
+};
+export {
+  Feedback,
+  Users
+};

package/components/table/table.styles.d.ts

@@ -0,0 +1 @@
+export declare const TableStyles: import("lit").CSSResult;