@ukic/canary-web-components 3.0.0-canary.10 → 3.0.0-canary.12

package/dist/collection/components/ic-data-table/ic-data-table.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table.types.js","sourceRoot":"","sources":["../../../src/components/ic-data-table/ic-data-table.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcDataTableSortOrderOptions =\n  | \"unsorted\"\n  | \"ascending\"\n  | \"descending\";\n\nexport type IcDataTableDensityOptions = \"default\" | \"dense\" | \"spacious\";\n\nexport type IcDataTableColumnDataTypes =\n  | \"string\"\n  | \"number\"\n  | \"address\"\n  | \"element\"\n  | \"date\";\n\nexport type IcDataTableColumnWidthTypes = {\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\nexport type IcDataTableColumnObject = {\n  key: string;\n  title: string;\n  dataType: IcDataTableColumnDataTypes;\n  columnAlignment?: {\n    horizontal?: string;\n    vertical?: string;\n  };\n  rowOptions?: {\n    textWrap: boolean;\n  };\n  columnWidth?: string | IcDataTableColumnWidthTypes;\n  textWrap?: boolean;\n  cellAlignment?: string;\n  emphasis?: string;\n  colspan?: number;\n  icon?: {\n    icon: string;\n    onAllCells?: boolean;\n    hideOnHeader?: boolean;\n  };\n};\n\nexport type IcLoadingOptions = {\n  monochrome?: boolean;\n  description?: string;\n  label?: string;\n  labelDuration?: number;\n  max?: number;\n  min?: number;\n  progress?: number;\n  showBackground?: boolean;\n  overlay?: boolean;\n};\n\nexport type IcDataTableRowHeights = number | \"auto\";\n\nexport interface IcDensityUpdateEventDetail {\n  value: IcDataTableDensityOptions;\n}\nexport type IcDataTableTruncationTypes = \"tooltip\" | \"show-hide\" | undefined;\n\nexport interface IcSortEventDetail {\n  columnName: string;\n  sorted: IcDataTableSortOrderOptions;\n}\n\nexport type truncWrapperDetailsTypes = {\n  scrollHeight: number | null;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type IcDataTableDataType = { [key: string]: any };\n"]}
+{"version":3,"file":"ic-data-table.types.js","sourceRoot":"","sources":["../../../src/components/ic-data-table/ic-data-table.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcDataTableSortOrderOptions =\n  | \"unsorted\"\n  | \"ascending\"\n  | \"descending\";\n\nexport type IcDataTableDensityOptions = \"default\" | \"dense\" | \"spacious\";\n\nexport type IcDataTableColumnDataTypes =\n  | \"string\"\n  | \"number\"\n  | \"address\"\n  | \"element\"\n  | \"date\";\n\nexport type IcDataTableColumnWidthTypes = {\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\nexport type IcDataTableColumnObject = {\n  key: string;\n  title: string;\n  dataType: IcDataTableColumnDataTypes;\n  columnAlignment?: {\n    horizontal?: string;\n    vertical?: string;\n  };\n  rowOptions?: {\n    textWrap: boolean;\n  };\n  columnWidth?: string | IcDataTableColumnWidthTypes;\n  textWrap?: boolean;\n  cellAlignment?: string;\n  emphasis?: string;\n  colspan?: number;\n  icon?: {\n    icon: string;\n    onAllCells?: boolean;\n    hideOnHeader?: boolean;\n  };\n  excludeColumnFromSort?: boolean;\n};\n\nexport type IcLoadingOptions = {\n  monochrome?: boolean;\n  description?: string;\n  label?: string;\n  labelDuration?: number;\n  max?: number;\n  min?: number;\n  progress?: number;\n  overlay?: boolean;\n};\n\nexport type IcDataTableRowHeights = number | \"auto\";\n\nexport interface IcDensityUpdateEventDetail {\n  value: IcDataTableDensityOptions;\n}\nexport type IcDataTableTruncationTypes = \"tooltip\" | \"show-hide\" | undefined;\n\nexport interface IcSortEventDetail {\n  columnName: string;\n  sorted: IcDataTableSortOrderOptions;\n}\n\nexport type truncWrapperDetailsTypes = {\n  scrollHeight: number | null;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type IcDataTableDataType = { [key: string]: any };\n"]}

package/dist/collection/components/ic-data-table/story-data.js

@@ -77,6 +77,36 @@ export const COLS_WIDTH = [
         dataType: "address",
     },
 ];
+export const COLS_EXCLUDE_SORT = [
+    {
+        key: "firstName",
+        title: "First name",
+        dataType: "string",
+        excludeColumnFromSort: true,
+    },
+    {
+        key: "lastName",
+        title: "Last name",
+        dataType: "string",
+    },
+    {
+        key: "age",
+        title: "Age",
+        dataType: "number",
+    },
+    {
+        key: "jobTitle",
+        title: "Job title",
+        dataType: "string",
+        excludeColumnFromSort: true,
+    },
+    {
+        key: "address",
+        title: "Address",
+        dataType: "address",
+        excludeColumnFromSort: true,
+    },
+];
 export const VERY_LONG_DATA = (rows = 100) => {
     const nextData = [];
     for (let i = 0; i < rows; i++) {
@@ -842,6 +872,34 @@ export const COLS_ELEMENTS = [
         dataType: "address",
     },
 ];
+export const COLS_ELEMENTS_SINGLE_ACTION = [
+    {
+        key: "actions",
+        title: "Actions",
+        dataType: "element",
+        columnAlignment: { horizontal: "center" },
+    },
+    {
+        key: "firstName",
+        title: "First name",
+        dataType: "string",
+    },
+    {
+        key: "age",
+        title: "Age",
+        dataType: "number",
+    },
+    {
+        key: "jobTitle",
+        title: "Job title",
+        dataType: "string",
+    },
+    {
+        key: "address",
+        title: "Address",
+        dataType: "address",
+    },
+];
 export const DATA_ELEMENTS = [
     {
         actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
@@ -892,6 +950,86 @@ export const DATA_ELEMENTS = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
+export const DATA_ELEMENTS_PAGINATION = [
+    {
+        actions: `<ic-button onClick='console.log("1")'>1</ic-button>`,
+        firstName: {
+            data: "Joe",
+            href: "https://www.example.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
+        },
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("2")'>2</ic-button>`,
+        firstName: {
+            data: "Sarah",
+            href: "https://www.example.org",
+        },
+        age: 28,
+        jobTitle: "Senior Software Developer, Site Reliability Engineering",
+        address: "2 Main Street, Town, Country, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("3")'>3</ic-button>`,
+        firstName: "Mark",
+        age: 45,
+        jobTitle: "Team Lead",
+        address: "12 Key Street, Town, Country, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("4")'>4</ic-button>`,
+        firstName: "Naomi",
+        age: 32,
+        jobTitle: "Analyst",
+        address: "8 Side Street, Town, Country, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("5")'>5</ic-button>`,
+        firstName: "Luke",
+        age: 18,
+        jobTitle: "Junior Developer",
+        address: "5 New Street, Town, Country, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("6")'>6</ic-button>`,
+        firstName: "Dave",
+        age: 33,
+        jobTitle: "Analyst",
+        address: "4 Extra Street, Town, County, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("7")'>7</ic-button>`,
+        firstName: "Amy",
+        age: 27,
+        jobTitle: "Analyst",
+        address: "3 Main Street, Town, Country, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("8")'>8</ic-button>`,
+        firstName: "Mary",
+        age: 31,
+        jobTitle: "Developer",
+        address: "8 Main Street, Town, County, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("9")'>9</ic-button>`,
+        firstName: "Alice",
+        age: 38,
+        jobTitle: "Team Lead",
+        address: "10 High Street, Town, Country, Postcode",
+    },
+    {
+        actions: `<ic-button onClick='console.log("10")'>10</ic-button>`,
+        firstName: "Ben",
+        age: 40,
+        jobTitle: "Team Lead",
+        address: "14 High Street, Town, Country, Postcode",
+    },
+];
 export const DATA_REACT_ELEMENTS = [
     {
         firstName: {
@@ -932,6 +1070,39 @@ export const DATA_REACT_ELEMENTS = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
+export const DATA_REACT_ELEMENTS_PAGINATION = [
+    ...DATA_REACT_ELEMENTS,
+    {
+        firstName: "Dave",
+        age: 33,
+        jobTitle: "Analyst",
+        address: "4 Extra Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Amy",
+        age: 27,
+        jobTitle: "Analyst",
+        address: "3 Main Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Mary",
+        age: 31,
+        jobTitle: "Developer",
+        address: "8 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Alice",
+        age: 38,
+        jobTitle: "Team Lead",
+        address: "10 High Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Ben",
+        age: 40,
+        jobTitle: "Team Lead",
+        address: "14 High Street, Town, Country, Postcode",
+    },
+];
 export const DATA_REACT_ELEMENTS_WITH_ICONS = [
     {
         firstName: {
@@ -1318,6 +1489,11 @@ export const DisableSort = () => {
     });
     return dataTable;
 };
+export const ExcludeColumnsFromSort = () => {
+    const dataTable = createDataTableElement("Sort", COLS_EXCLUDE_SORT, DATA);
+    dataTable.setAttribute("sortable", "true");
+    return dataTable;
+};
 export const Pagination = () => {
     const dataTable = createDataTableElement("Pagination", LONG_COLS, LONG_DATA);
     dataTable.setAttribute("show-pagination", "true");
@@ -1336,6 +1512,20 @@ export const ColumnOverrides = () => createDataTableElement("Column Overrides",
 export const RowOverrides = () => createDataTableElement("Row Overrides", ROW_HEADER_COLS, ROW_ALIGNMENT);
 export const CellOverrides = () => createDataTableElement("Cell Overrides", COLS, DATA_CELL_ALIGNMENT);
 export const LinksHTMLElements = () => createDataTableElement("Links and HTML Elements Overrides", COLS_ELEMENTS, DATA_ELEMENTS);
+export const SlottedElementsWithPagination = () => {
+    const dataTable = createDataTableElement("Slotted elements with pagination", COLS_ELEMENTS_SINGLE_ACTION, DATA_ELEMENTS_PAGINATION);
+    dataTable.setAttribute("show-pagination", "true");
+    dataTable.paginationBarOptions = {
+        itemsPerPageOptions: [
+            { label: "5", value: "5" },
+            { label: "10", value: "10" },
+        ],
+        showItemsPerPageControl: true,
+        showGoToPageControl: true,
+        selectedItemsPerPage: 5,
+    };
+    return dataTable;
+};
 export const Empty = () => createDataTableElement("Empty State", COLS, null);
 export const EmptySlotted = () => {
     const dataTable = createDataTableElement("Empty State", COLS, null);