@getflip/swirl-components 0.298.0 → 0.300.0

package/README.md

@@ -1,8 +1,8 @@
 # Swirl Web Component Library
 
-The Swirl Web Component Library provides a framework-agnostic foundation for UI
-development for the Flip App. It implements a set of solid UI components that
-are composable, performant, accessible and well-tested, while also satisfying
-the UX and UI design requirements of the Swirl Design System.
+The Swirl Web Component library provides a framework-agnostic foundation for UI
+development for the Flip apps and integrations. It implements a set of solid UI
+components that are composable, performant, accessible and well-tested, while
+also satisfying the UX and UI design requirements of the Swirl Design System.
 
 [Check the Documentation](https://swirl-storybook.flip-app.dev/)

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-02-26T10:37:58",
+  "timestamp": "2025-03-04T15:03:52",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.1",
@@ -50982,10 +50982,10 @@
         },
         {
           "name": "borderRadius",
-          "type": "\"base\" | \"pill\" | \"s\" | \"sm\"",
+          "type": "\"base\" | \"none\" | \"pill\" | \"s\" | \"sm\"",
           "complexType": {
             "original": "SwirlSkeletonBoxBorderRadius",
-            "resolved": "\"base\" | \"pill\" | \"s\" | \"sm\"",
+            "resolved": "\"base\" | \"none\" | \"pill\" | \"s\" | \"sm\"",
             "references": {
               "SwirlSkeletonBoxBorderRadius": {
                 "location": "local",
@@ -51005,6 +51005,10 @@
               "value": "base",
               "type": "string"
             },
+            {
+              "value": "none",
+              "type": "string"
+            },
             {
               "value": "pill",
               "type": "string"
@@ -56047,7 +56051,7 @@
     },
     {
       "filePath": "src/components/swirl-table/swirl-table.tsx",
-      "encapsulation": "shadow",
+      "encapsulation": "scoped",
       "tag": "swirl-table",
       "docs": "",
       "docsTags": [
@@ -56083,6 +56087,48 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "dragDropHandle",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "drag-drop-handle",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "dragDropInstructions",
+          "type": "{ end: string; initial: string; moved: string; start: string; }",
+          "complexType": {
+            "original": "{ end: string; initial: string; moved: string; start: string; }",
+            "resolved": "{ end: string; initial: string; moved: string; start: string; }",
+            "references": {}
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "defaultDragDropInstructions",
+          "values": [
+            {
+              "type": "{ end: string; initial: string; moved: string; start: string; }"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "emptyStateLabel",
           "type": "string",
@@ -56105,6 +56151,27 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "enableDragDrop",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "enable-drag-drop",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -56151,7 +56218,28 @@
           "docsTags": []
         }
       ],
-      "events": [],
+      "events": [
+        {
+          "event": "dropRow",
+          "detail": "Pick<SortableEvent, \"item\" | \"oldIndex\" | \"newIndex\"> & { itemId: string; newNextSiblingItemId: string; newPrevSiblingItemId: string; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "SwirlTableDropRowEvent",
+            "resolved": "Pick<SortableEvent, \"item\" | \"oldIndex\" | \"newIndex\"> & { itemId: string; newNextSiblingItemId: string; newPrevSiblingItemId: string; }",
+            "references": {
+              "SwirlTableDropRowEvent": {
+                "location": "local",
+                "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-table/swirl-table.tsx",
+                "id": "src/components/swirl-table/swirl-table.tsx::SwirlTableDropRowEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "listeners": [
         {
           "event": "resize",
@@ -62188,7 +62276,7 @@
       "path": "src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.tsx"
     },
     "src/components/swirl-skeleton-box/swirl-skeleton-box.tsx::SwirlSkeletonBoxBorderRadius": {
-      "declaration": "export type SwirlSkeletonBoxBorderRadius = \"s\" | \"sm\" | \"base\" | \"pill\";",
+      "declaration": "export type SwirlSkeletonBoxBorderRadius =\n  | \"s\"\n  | \"sm\"\n  | \"base\"\n  | \"pill\"\n  | \"none\";",
       "docstring": "",
       "path": "src/components/swirl-skeleton-box/swirl-skeleton-box.tsx"
     },
@@ -62237,6 +62325,11 @@
       "docstring": "",
       "path": "src/components/swirl-tab-bar/swirl-tab-bar.tsx"
     },
+    "src/components/swirl-table/swirl-table.tsx::SwirlTableDropRowEvent": {
+      "declaration": "export type SwirlTableDropRowEvent = Pick<\n  SortableEvent,\n  \"oldIndex\" | \"newIndex\" | \"item\"\n> & {\n  itemId: string;\n  newNextSiblingItemId: string | undefined;\n  newPrevSiblingItemId: string | undefined;\n};",
+      "docstring": "",
+      "path": "src/components/swirl-table/swirl-table.tsx"
+    },
     "src/components/swirl-table-column/swirl-table-column.tsx::SwirlTableColumnSort": {
       "declaration": "export type SwirlTableColumnSort = \"ascending\" | \"descending\";",
       "docstring": "",

package/dist/cjs/file-manager.cjs.entry.js

@@ -62,7 +62,7 @@ const FileManager = class {
             onClick: () => this.selectItem(item) }, "type" in item ? (index.h("swirl-icon-file", { slot: "media" })) : (index.h("swirl-icon-folder-shared", { slot: "media" })))))) : (index.h("swirl-box", { padding: "16" }, index.h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (index.h(index.Host, { key: 'a646901e811c2b01e8c26d08dcd7eacee52f8716' }, index.h("swirl-app-layout", { key: '9749db15091be64d25eac767ea762fc67bc8e40d', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, index.h("swirl-resource-list", { key: '121e13b98f9040e4603f90d2144f614ad061c290', label: "Documents", slot: "navigation" }, this.renderNavigation()), index.h("swirl-popover-trigger", { key: '432a46a472b8e74bb2b4ba7996157742a40f68f8', swirlPopover: this.sortMenu, slot: "navigation-controls" }, index.h("swirl-button", { key: '229e5cfedaeb8e02e0646ae8a17e5e2a9b06011a', label: "Sort items" })), index.h("swirl-stack", { key: 'ca4b984d0ea43322377a1792ca8af7e69f3b398b', orientation: "horizontal", slot: "app-bar" }, index.h("swirl-stack", { key: '83f2d8c2062a7e9b342c6201cb8df84fde83c128' }, index.h("swirl-heading", { key: '909d0eba1bb47de0d4fb00eeb9945f54310b7490', as: "h2", level: 4, text: this.selectedFile?.name }), index.h("swirl-text", { key: 'a2624b5a8cd2f35f0ff4cf37854c2027df80407a', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (index.h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (index.h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, index.h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), index.h("div", { key: '49432c3fd1a329549893045a8e4e4bd23815e2ec', slot: "app-bar-controls" }, this.selectedFile && (index.h("swirl-button", { key: '7be0a44b5a0c6b775018274409a900fb0a6ffd9d', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), index.h("swirl-box", { key: '17af77fa485f3f5cd26762504aa16b67989c203a', padding: "16", slot: "sidebar" }, index.h("swirl-text", { key: 'fddf7dac1114dd8cd2b87fe703457b88cc3b1dfb', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), index.h("swirl-popover", { key: '328ec24bbae951e40a6be30ad74544db279ae6d4', label: "Sort items", ref: (el) => (this.sortMenu = el) }, index.h("swirl-option-list", { key: '947be717cf392facad72e8c68015c827127a818f', value: ["ascending"] }, index.h("swirl-option-list-item", { key: '037a85c211cedfb0a07c818bec2863f645cff3e9', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), index.h("swirl-option-list-item", { key: '4a09b62c61e718a4138e1d50a18e1788aee774f1', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), index.h("swirl-option-list-item", { key: '9d985f191349675473aea0b50ca7f6db3e9175f9', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (index.h(index.Host, { key: 'dc473b901d453e1b0980f62f76e030e5c650609f' }, index.h("swirl-app-layout", { key: '6938c8a6a118e49ef53f8009d177b5f6ff3805e8', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, index.h("swirl-resource-list", { key: '4ad4e6e12405cd46efa3f9b33bea0a718e6b0594', label: "Documents", slot: "navigation" }, this.renderNavigation()), index.h("swirl-popover-trigger", { key: 'a01cd588c27c4e6b9f65d48a2095004c42025ecd', swirlPopover: this.sortMenu, slot: "navigation-controls" }, index.h("swirl-button", { key: 'af671ee911a4c4520ca26f95898b8a5ff6e04047', label: "Sort items" })), index.h("swirl-stack", { key: '48a776cae0a67d6c106bc776c2b247d36f752d3c', orientation: "horizontal", slot: "app-bar" }, index.h("swirl-stack", { key: 'eb97701ffda9e7439ab8a694d2de19f7ca5bf419' }, index.h("swirl-heading", { key: '56c977917238f1d32c27c0ea74cacbb51727d049', as: "h2", level: 4, text: this.selectedFile?.name }), index.h("swirl-text", { key: 'c733306ebbc6b77cb98a82d844bf3d6ecff176d1', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (index.h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (index.h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, index.h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), index.h("div", { key: 'f4466a0140ac8a66fa9c24dffb24795e04112fab', slot: "app-bar-controls" }, this.selectedFile && (index.h("swirl-button", { key: 'd17daa71572541013700c488fd38ba2ff46cf9c7', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), index.h("swirl-box", { key: '45736379c49155d92b830a9757bb40e3c1805ded', padding: "16", slot: "sidebar" }, index.h("swirl-text", { key: 'c41112d3485f708078d6c7d5acf5a285f32a2c04', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), index.h("swirl-popover", { key: '7bc3a06ac4862c1decbe32daaa5e3157d4c16b29', label: "Sort items", ref: (el) => (this.sortMenu = el) }, index.h("swirl-option-list", { key: 'd6e855c087af52a4285619f11ddc82b91456fd6c', value: ["ascending"] }, index.h("swirl-option-list-item", { key: 'c41aaee1fc568cc0dde1c3c0f9f6ae6dfd8635ba', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), index.h("swirl-option-list-item", { key: '6d94d601d7e13f475511ada26e2c0fe507d34b3c', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), index.h("swirl-option-list-item", { key: '6743665b2e70eb26bbea83a509e4967b3eab082c', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 };