@ukic/canary-web-components 2.0.0-canary.35 → 2.0.0-canary.37

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":["import { IcThemeForegroundNoDefault } from \"@ukic/web-components\";\n\nexport 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  appearance?: IcThemeForegroundNoDefault;\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":["import { IcThemeForegroundNoDefault } from \"@ukic/web-components\";\n\nexport 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  appearance?: IcThemeForegroundNoDefault;\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"]}

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

@@ -14,9 +14,9 @@ const ROW_HEADER_TITLES = [
 const imageIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z"/></svg>';
 const userIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-481q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160-160v-94q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5t127.921 44.694q31.301 14.126 50.19 40.966Q800-292 800-254v94H160Zm60-60h520v-34q0-16-9.5-30.5T707-306q-64-31-117-42.5T480-360q-57 0-111 11.5T252-306q-14 7-23 21.5t-9 30.5v34Zm260-321q39 0 64.5-25.5T570-631q0-39-25.5-64.5T480-721q-39 0-64.5 25.5T390-631q0 39 25.5 64.5T480-541Zm0-90Zm0 411Z"/></svg>';
 const alertIconSVG = '<svg aria-label="alert-icon" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" fill="#000000"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"/></svg>';
-const copyButton = '<ic-button variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="copy-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg> </ic-button>';
-const cellphoneButton = '<ic-button variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="cellphone-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"/></svg> </ic-button>';
-const downloadButton = '<ic-button variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="download-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/></svg> </ic-button>';
+const copyButton = '<ic-button data-testid="copy-button" variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="copy-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg> </ic-button>';
+const cellphoneButton = '<ic-button data-testid="cellphone-button" variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="cellphone-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"/></svg> </ic-button>';
+const downloadButton = '<ic-button data-testid="download-button" variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="download-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/></svg> </ic-button>';
 // TODO: Add columnOptions
 export const COLS = [
     {
@@ -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++) {
@@ -934,7 +964,8 @@ export const ACTION_DATA_ELEMENTS = [
         firstName: {
             data: "Joe",
             actionElement: `${downloadButton}${cellphoneButton}${copyButton}`,
-            actionOnClick: () => {
+            actionOnClick: (event) => {
+                event === null || event === void 0 ? void 0 : event.stopPropagation();
                 console.log("hello");
             },
         },
@@ -1240,6 +1271,45 @@ export const SortOptions = () => {
     });
     return dataTable;
 };
+export const DisableSort = () => {
+    const originalData = [...DATA];
+    const dataTable = createDataTableElement("Sort", COLS, DATA);
+    dataTable.setAttribute("sortable", "true");
+    dataTable.setAttribute("disable-auto-sort", "true");
+    dataTable.addEventListener("icSortChange", (event) => {
+        console.log("Sort changed", event.detail);
+        if (event.detail.sorted === "ascending") {
+            DATA.sort((a, b) => {
+                const column = event.detail.columnName;
+                if (a[column] < b[column])
+                    return -1;
+                if (a[column] > b[column])
+                    return 1;
+                return 0;
+            });
+        }
+        else if (event.detail.sorted === "descending") {
+            DATA.sort((a, b) => {
+                const column = event.detail.columnName;
+                if (a[column] < b[column])
+                    return 1;
+                if (a[column] > b[column])
+                    return -1;
+                return 0;
+            });
+        }
+        else {
+            DATA.splice(0, DATA.length, ...originalData);
+        }
+        dataTable.data = [...DATA];
+    });
+    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");