@sebgroup/green-core 2.19.0-rc.20251217101215078 → 2.19.0-rc.20251218133050947

package/components/table/table.d.ts

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

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

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

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

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

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

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

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

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