@ukic/canary-web-components 2.0.0-canary.34 → 2.0.0-canary.36

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 = [
     {
@@ -934,7 +934,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 +1241,40 @@ 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 Pagination = () => {
     const dataTable = createDataTableElement("Pagination", LONG_COLS, LONG_DATA);
     dataTable.setAttribute("show-pagination", "true");