@finsemble/finsemble-ui 7.3.8 → 7.3.10

package/react/components/common/css/application-list.css

@@ -1,41 +1,62 @@
 .app-list-table {
-	margin-top: 10px;
 	width: 100%;
+	max-height: 300px;
+	overflow-y: scroll;
+	border-collapse: collapse;
 }
 
-.app-list-table .app-name {
-	text-decoration: none;
-	color: #fff;
-	padding: 0.7em;
-	font-weight: bold;
-	border-radius: 1.45em;
-	cursor: pointer;
+.app-list-table,
+i::before {
+	cursor: inherit;
+}
+
+i.ff-dots-vert::before {
+	position: relative;
+	top: 1px;
 }
 
 .app-list-row {
-	text-decoration: none;
-	color: #fff;
-	font-weight: bold;
-	border-radius: 1.45em;
-	transition: all 0.25s;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
+	height: 30px;
+}
+
+.app-list-row td {
+	padding: 0;
+	margin: 0;
 	cursor: pointer;
 }
 
-.app-list-row div {
-	align-items: center;
-	margin-left: auto;
-	text-align: center;
+.app-list-row td:nth-child(1) {
+	width: 20px;
 	vertical-align: middle;
+	text-align: center;
+	border-top-left-radius: 1.45em;
+	border-bottom-left-radius: 1.45em;
 }
 
-.app-list-row .icon-bar .button-container-icon:hover .finsemble-icon-trash {
-	color: #f26666;
+.app-list-row td:nth-child(2) {
+	width: 200px;
+}
+
+.app-list-row td:nth-child(3) {
+	width: 30px;
+	text-align: right;
+}
+
+.app-list-row td:nth-child(4) {
+	width: 30px;
+	text-align: right;
+}
+
+.app-list-row td .finsemble-icon__btn {
+	width: fit-content;
+}
+
+.app-list-row td:nth-child(5) {
+	width: 12px;
+	border-top-right-radius: 1.45em;
+	border-bottom-right-radius: 1.45em;
 }
 
-.app-list-row:focus,
 .app-list-row:hover {
 	background-color: #3d4455;
 }
@@ -51,3 +72,13 @@
 .app-list-empty.no-dropzone {
 	border-style: solid;
 }
+
+.item-icon-container img,
+.item-icon-container i {
+	height: 16px;
+	width: 16px;
+}
+
+.item-icon-container i {
+	color: var(--font-color);
+}

package/react/components/common/css/button.css

@@ -5,7 +5,7 @@ button {
 	padding: 0.5em 1em;
 	background-color: transparent;
 	border: 0 solid transparent;
-	color: #fff;
+	color: var(--font-color);
 	font-size: 0.9rem;
 	transition: all 0.2s ease-in;
 	cursor: pointer;
@@ -15,6 +15,7 @@ button {
 .button-container-tile,
 .button-container-primary,
 .button-container-icon,
+.button-container-hollow,
 .button-container-danger,
 .button-container-ghost,
 .button-container-danger-ghost {
@@ -46,7 +47,7 @@ button {
 }
 
 .button-container-icon:hover .finsemble-icon-trash {
-	color: #f26666;
+	color: var(--accent-negative);
 }
 
 .button-container-icon .finsemble-icon-life-ring {
@@ -69,11 +70,15 @@ button {
 	cursor: pointer;
 }
 
+.button-container-icon span.btn-label {
+	padding-left: 5px;
+}
+
 /* Primary */
 
 .button-container-primary button {
 	border-radius: 2em;
-	background-color: #171a20;
+	background-color: var(--core-primary-1);
 	padding: 1.2em 1.1em 1.2em 1em;
 	display: flex;
 	height: 1em;
@@ -85,30 +90,26 @@ button {
 }
 
 .button-container-primary button:hover {
-	background-color: #acb2c0;
+	background-color: var(--core-primary-3);
 }
 
-.button-container-primary button[disabled] {
-	color: #acb2c0;
-	background-color: #acb2c0;
+.button-container-secondary button[disabled],
+.button-container-primary button[disabled],
+.button-container-secondary button[disabled]:hover,
+.button-container-primary button[disabled]:hover {
 	cursor: default;
+	background-color: var(--core-primary-4);
 }
 
 /* Secondary */
 
 .button-container-secondary button {
-	color: #000;
-	background-color: #42a5ba;
+	color: var(--font-color-2);
+	background-color: var(--accent-primary);
 }
 
 .button-container-secondary button:hover {
-	background-color: #36788b;
-}
-
-.button-container-secondary button[disabled] {
-	color: #000000b3;
-	background-color: #acb2c0;
-	cursor: default;
+	background-color: var(--accent-primary-1);
 }
 
 /* Tile */
@@ -123,7 +124,7 @@ button {
 	align-items: center;
 	padding-top: 0.5em;
 	margin: 0.5em;
-	background-color: #171a20;
+	background-color: var(--core-primary-1);
 	border-radius: 0.5em;
 	font-size: 1.1em;
 	transition: all 0.25s;
@@ -133,7 +134,7 @@ button {
 }
 
 .button-container-tile button:hover {
-	border-color: #36788b;
+	border-color: var(--accent-primary-1);
 }
 
 .button-container-tile div {
@@ -144,17 +145,39 @@ button {
 	font-size: 2.5em;
 }
 
+/* Hollow */
+
+.button-container-hollow button {
+	background-color: transparent;
+	color: var(--font-color);
+	border-radius: 5px;
+	border: solid 2px var(--accent-primary);
+	padding-top: calc(0.5em - 1px);
+	padding-bottom: calc(0.5em - 1px);
+}
+
+.button-container-hollow button:hover {
+	background-color: var(--accent-primary-1);
+}
+
+.button-container-hollow button[disabled],
+.button-container-hollow button[disabled]:hover {
+	cursor: default;
+	background-color: transparent;
+	border-color: var(--core-primary-4);
+}
+
 /* Danger */
 
 .button-container-danger button {
 	background-color: transparent;
-	color: #f26666;
+	color: var(--accent-negative);
 	border-radius: 5px;
-	border: solid 1px #f26666;
+	border: solid 1px var(--accent-negative);
 }
 
 .button-container-danger button:hover {
-	background-color: #b54f4f;
+	background-color: var(--accent-negative-1);
 }
 
 /* Ghost */
@@ -167,5 +190,18 @@ button {
 /* Danger Ghost */
 
 .button-container-danger-ghost button {
-	color: #f26666;
+	color: var(--accent-negative);
+}
+
+.back-button svg {
+	transform: scale(2);
+	margin-left: 0.3em;
+}
+
+.back-button button {
+	width: 2.5em;
+}
+
+.back-button {
+	margin-left: -1.7rem;
 }

package/react/components/common/css/dropdown.css

@@ -0,0 +1,56 @@
+.dropdown-wrapper .targetBox {
+	background-color: #171a20;
+	border-radius: 4px;
+	border: 2px solid white;
+	color: white;
+	width: fit-content;
+	padding: 5px;
+	position: relative;
+}
+
+.dropdown-wrapper .targetBox .text {
+	min-width: 100px;
+	text-align: center;
+	margin-right: 20px;
+}
+
+.dropdown-wrapper .options {
+	background-color: #171a20;
+	border-radius: 4px;
+	border: 2px solid white;
+	color: white;
+	width: fit-content;
+	min-width: 100px;
+	padding: 8px;
+	margin-top: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+.dropdown-wrapper .options .option {
+	width: auto;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	padding-left: 10px;
+	border-radius: 4px;
+}
+
+.dropdown-wrapper .option:is(:hover, :focus) {
+	background-color: #5b606f;
+}
+
+.dropdown-wrapper .targetBox[aria-expanded="false"] + .options {
+	display: none;
+}
+
+.dropdown-wrapper .finsemble-icon {
+	position: absolute;
+	right: 5px;
+	top: 10px;
+	transition-duration: 0.3s;
+	transition-property: all;
+}
+
+.dropdown-wrapper .targetBox[aria-expanded="true"] .finsemble-icon {
+	transform: rotate(180deg);
+}

package/react/components/common/css/selector.css

@@ -19,7 +19,7 @@
 	align-items: center;
 }
 
-.emperorOption label > span {
+.emperorOption > label span:not(.highlight) {
 	margin-left: 10px;
 }
 
@@ -28,7 +28,7 @@
 	left: -1000px;
 }
 
-.emperorOption label {
+.emperorOption > label {
 	width: fit-content;
 	min-width: 20em;
 	display: flex;
@@ -48,4 +48,10 @@
 
 .highlight {
 	background-color: var(--accent-primary-1);
+	margin: 0;
+	padding: 0;
+}
+
+.emperorOption .finsembleToggle label {
+	top: -9px;
 }

package/react/components/common/css/tab.css

@@ -22,6 +22,7 @@
 	letter-spacing: normal;
 	border-bottom: solid 3px transparent;
 	transition: border-bottom 0.2s ease-in;
+	cursor: pointer;
 }
 
 .horizontal-tabs [role="tab"][aria-selected="true"] {

package/react/components/common/css/toggle.css

@@ -1,63 +1,48 @@
-.finsembleToggle {
-	position: relative;
-	display: inline-block;
-	margin-right: 20px;
+:root {
+	--toggle-button-height: 13px;
+	--toggle-button-gap: 2px;
+	--toggle-diameter: calc(var(--toggle-button-height) - (2 * var(--toggle-button-gap)));
 }
 
 .finsembleToggle input[type="checkbox"] {
-	margin: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 1;
-	position: absolute;
-	top: 0;
-	left: 0;
-	opacity: 0;
-	cursor: pointer;
-}
-
-.finsembleToggle.disabled input[type="checkbox"] {
-	cursor: default;
-}
-
-.toggle-text-label-wrapper {
-	display: flex;
-	max-width: 330px;
-	border: #22262f 2px solid;
-	border-radius: 7px;
-	background: #22262f;
-}
-
-.toggle-text-label {
-	background: #22262f;
-	padding: 2px 10px;
-	border-radius: 2px;
-}
-
-.finsembleToggle .toggle-text-label[aria-selected="true"] {
-	background-color: #0a8cf4;
-}
-
-.finsembleToggle .toggle-text-label[aria-selected="false"]:hover {
-	background-color: #3d4455;
+	height: 0;
+	width: 0;
+	visibility: hidden;
 }
 
-.finsembleToggle .finsembleToggle-icon {
-	font-size: 1.7rem;
+.finsembleToggle label {
+	cursor: pointer;
+	text-indent: -9999px;
+	width: calc(var(--toggle-button-height) * 2);
+	height: var(--toggle-button-height);
+	background: var(--core-primary-3);
+	display: block;
+	border-radius: var(--toggle-button-height);
+	position: relative;
+	transition: 0.3s;
 }
 
-.finsembleToggle-off .finsembleToggle-icon {
-	color: #5b606f;
+.finsembleToggle label::after {
+	content: "";
+	position: absolute;
+	top: var(--toggle-button-gap);
+	left: var(--toggle-button-gap);
+	width: var(--toggle-diameter);
+	height: var(--toggle-diameter);
+	background: var(--font-color);
+	border-radius: var(--toggle-diameter);
+	transition: 0.3s;
 }
 
-.finsembleToggle-on .finsembleToggle-icon {
-	color: #0a8cf4;
+.finsembleToggle input:checked + label {
+	background: var(--accent-primary-1);
 }
 
-.finsembleToggle:hover .finsembleToggle-icon {
-	color: #087ddb;
+.finsembleToggle input:checked + label::after {
+	left: calc(100% - var(--toggle-button-gap));
+	transform: translateX(-100%);
 }
 
-.finsembleToggle.disabled {
-	filter: grayscale(10%) brightness(65%);
+.finsembleToggle input:disabled + label {
+	opacity: 0.5;
 }

package/react/components/downloadManager/DownloadItem.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import "../../assets/css/download.css";
+export declare type DownloadItemProps = {
+    downloadItem: any;
+    remove: (any: any) => void;
+    onClick?: () => void;
+    onKeyDown?: () => void;
+    className?: string;
+};
+/**
+ * Entry for each individual download with information about the download and it's state.
+ * Downloads can be paused/canceled/resumed based on completion status.
+ * A removal function is passed down from the parent Download Manager to allow removing downloads based on completion state
+ */
+export declare const DownloadItem: React.FunctionComponent<DownloadItemProps>;
+//# sourceMappingURL=DownloadItem.d.ts.map

package/react/components/downloadManager/DownloadItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadItem.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/DownloadItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,+BAA+B,CAAC;AAEvC,oBAAY,iBAAiB,GAAG;IAC/B,YAAY,EAAE,GAAG,CAAC;IAClB,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAsFF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAkCnE,CAAC"}

package/react/components/downloadManager/DownloadItem.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { FEAGlobals } from "../../../common/Globals";
+import { ButtonIcon } from "../common/ButtonIcon";
+import "../../assets/css/download.css";
+const renderPauseButton = (id) => (React.createElement(ButtonIcon, { displayText: true, className: "finsemble-download-pause", text: "Pause", icon: "pause", onClick: () => {
+        FEAGlobals.fin.desktop.System.pauseDownload(id);
+    } }));
+const renderCancelButton = (id) => (React.createElement(ButtonIcon, { displayText: true, className: "finsemble-download-cancel", text: "Cancel", icon: "cancel", onClick: () => {
+        FEAGlobals.fin.desktop.System.cancelDownload(id);
+    } }));
+const renderResumeButton = (id) => (React.createElement(ButtonIcon, { displayText: true, className: "finsemble-download-resume", text: "Resume", icon: "resume", onClick: () => {
+        FEAGlobals.fin.desktop.System.resumeDownload(id);
+    } }));
+const renderShowInFolderButton = (id) => (React.createElement(ButtonIcon, { className: "finsemble-download-folder", displayText: true, text: "Show in folder", icon: "search", onClick: () => {
+        FEAGlobals.fin.desktop.System.showDownloadedFileInFolder(id);
+    } }));
+/**
+ * Determines which buttons to render based on the current state.
+ * The available actions are:
+ * Progressing(download in progress): pause, cancel
+ * Paused: resume, cancel
+ * Completed: show in folder
+ * Canceled, interrupted(download failed): none - it's currently not possible to resume/retry a canceled download
+ * All downloads in a state of "completion" (completed, cancelled, interrupted) can be removed from the list
+ */
+const renderButtons = (id, state) => {
+    switch (state) {
+        case "progressing":
+            return (React.createElement("span", null,
+                renderPauseButton(id),
+                renderCancelButton(id)));
+        case "paused":
+            return (React.createElement("span", null,
+                renderResumeButton(id),
+                renderCancelButton(id)));
+        case "completed":
+            return renderShowInFolderButton(id);
+        case "cancelled":
+        case "interrupted":
+        default:
+            break;
+    }
+};
+const bytesToMB = (bytes) => Math.round((bytes / (1024 * 1024)) * 1e2) / 1e2;
+/**
+ * Entry for each individual download with information about the download and it's state.
+ * Downloads can be paused/canceled/resumed based on completion status.
+ * A removal function is passed down from the parent Download Manager to allow removing downloads based on completion state
+ */
+export const DownloadItem = ({ downloadItem, remove }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    // Completed, canceled, interrupted downloads can be removed
+    const removableState = ((_a = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _a === void 0 ? void 0 : _a.state) === "completed" ||
+        ((_b = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _b === void 0 ? void 0 : _b.state) === "cancelled" ||
+        ((_c = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _c === void 0 ? void 0 : _c.state) === "interrupted";
+    const receivedMB = bytesToMB((_d = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _d === void 0 ? void 0 : _d.receivedBytes);
+    const totalMB = bytesToMB((_e = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _e === void 0 ? void 0 : _e.totalBytes);
+    const removeDownloadItem = async () => {
+        await FEAGlobals.fin.desktop.System.removeDownloadItem(downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.id);
+        remove(downloadItem);
+    };
+    return (React.createElement("div", { className: "download-row" },
+        React.createElement("div", { className: "download-remove" }, removableState && (React.createElement(ButtonIcon, { text: "Cancel", className: "finsemble-download-remove", icon: "times", onClick: removeDownloadItem }))),
+        React.createElement("div", { className: "download-name" }, (_f = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _f === void 0 ? void 0 : _f.filename),
+        React.createElement("div", { title: (_g = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _g === void 0 ? void 0 : _g.url, className: "download-url" }, (_h = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _h === void 0 ? void 0 : _h.url),
+        React.createElement("div", { className: "download-progress-button-row" },
+            React.createElement("span", { className: "download-progress" },
+                receivedMB,
+                "MB/",
+                totalMB,
+                "MB"),
+            React.createElement("span", { className: "download-buttons" }, renderButtons(downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.id, (_j = downloadItem === null || downloadItem === void 0 ? void 0 : downloadItem.displayInfo) === null || _j === void 0 ? void 0 : _j.state)))));
+};
+//# sourceMappingURL=DownloadItem.js.map

package/react/components/downloadManager/DownloadItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadItem.js","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/DownloadItem.tsx"],"names":[],"mappings":"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"}

package/react/components/downloadManager/DownloadManager.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "../../assets/css/download.css";
+export declare type DownloadManagerProps = {
+    className?: string;
+};
+/**
+ * UI for the Download Manager containing a list and data for downloads initiated across all windows.
+ */
+export declare const DownloadManager: React.FunctionComponent<DownloadManagerProps>;
+//# sourceMappingURL=DownloadManager.d.ts.map

package/react/components/downloadManager/DownloadManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadManager.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/DownloadManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAMzC,OAAO,+BAA+B,CAAC;AACvC,oBAAY,oBAAoB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CA2DzE,CAAC"}

package/react/components/downloadManager/DownloadManager.js

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { Title } from "../../hooks/useTitle";
+import { DownloadItem } from "./DownloadItem";
+import useDownloadItems from "../../hooks/useDownloadItems";
+import { ButtonIcon } from "../common/ButtonIcon";
+import { FEAGlobals } from "../../../common/Globals";
+import "../../assets/css/download.css";
+/**
+ * UI for the Download Manager containing a list and data for downloads initiated across all windows.
+ */
+export const DownloadManager = (props) => {
+    const { downloadItems, initDownloadItems, removeDownloadItem } = useDownloadItems();
+    const launchPreferences = () => {
+        FEAGlobals.FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
+            preferencesTab: "General",
+        });
+        FEAGlobals.FSBL.Clients.LauncherClient.showWindow({
+            componentType: "UserPreferences",
+        }, {
+            monitor: "mine",
+            left: "center",
+            top: "center",
+        });
+    };
+    useEffect(() => {
+        FEAGlobals.fin.desktop.System.getDownloadList((downloadList) => {
+            initDownloadItems(downloadList);
+        });
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(Title, { title: "Download Manager" }),
+        React.createElement("div", { className: "download-wrapper" },
+            React.createElement("div", { className: "download-row" },
+                React.createElement("div", { className: "download-header" },
+                    React.createElement("div", { className: "download-title" }, "Downloads"),
+                    React.createElement("div", { className: "download-settings" },
+                        React.createElement(ButtonIcon, { text: "Settings", className: "download-settings-button", icon: "gear", onClick: launchPreferences })))),
+            (downloadItems === null || downloadItems === void 0 ? void 0 : downloadItems.length) > 0 ? (React.createElement("div", null, downloadItems.map((downloadItem) => (React.createElement(DownloadItem, Object.assign({ key: `download-item-${downloadItem.id}`, downloadItem: downloadItem, remove: removeDownloadItem }, props)))))) : (React.createElement("div", { className: "no-downloads" }, "No Downloads to Display")))));
+};
+//# sourceMappingURL=DownloadManager.js.map

package/react/components/downloadManager/DownloadManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadManager.js","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/DownloadManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,gBAAgB,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,+BAA+B,CAAC;AAKvC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAkD,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEpF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC9B,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,iCAAiC,EAAE;YAChF,cAAc,EAAE,SAAS;SACzB,CAAC,CAAC;QACH,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CAChD;YACC,aAAa,EAAE,iBAAiB;SAChC,EACD;YACC,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;SACb,CACD,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,YAAY,EAAE,EAAE;YAC9D,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN;QACC,oBAAC,KAAK,IAAC,KAAK,EAAC,kBAAkB,GAAG;QAClC,6BAAK,SAAS,EAAC,kBAAkB;YAChC,6BAAK,SAAS,EAAC,cAAc;gBAC5B,6BAAK,SAAS,EAAC,iBAAiB;oBAC/B,6BAAK,SAAS,EAAC,gBAAgB,gBAAgB;oBAC/C,6BAAK,SAAS,EAAC,mBAAmB;wBACjC,oBAAC,UAAU,IACV,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,iBAAiB,GACzB,CACG,CACD,CACD;YACL,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,CAC5B,iCACE,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CACpC,oBAAC,YAAY,kBACZ,GAAG,EAAE,iBAAiB,YAAY,CAAC,EAAE,EAAE,EACvC,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,kBAAkB,IACtB,KAAK,EACR,CACF,CAAC,CACG,CACN,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,cAAc,8BAA8B,CAC3D,CACI,CACD,CACN,CAAC;AACH,CAAC,CAAC"}

package/react/components/downloadManager/index.d.ts

@@ -0,0 +1,2 @@
+export { DownloadManager } from "./DownloadManager";
+//# sourceMappingURL=index.d.ts.map

package/react/components/downloadManager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/react/components/downloadManager/index.js

@@ -0,0 +1,2 @@
+export { DownloadManager } from "./DownloadManager";
+//# sourceMappingURL=index.js.map

package/react/components/downloadManager/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/downloadManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/react/components/favorites/FavoriteMaker.d.ts

@@ -14,3 +14,4 @@ declare type FavoriteMakerProps = Favorite & {
  */
 export declare const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps>;
 export {};
+//# sourceMappingURL=FavoriteMaker.d.ts.map

package/react/components/favorites/FavoriteMaker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteMaker.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD,aAAK,kBAAkB,GAAG,QAAQ,GAAG;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CA2CrE,CAAC"}

package/react/components/favorites/FavoriteMaker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoriteMaker.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAWxD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAgD,CAAC,EAC1E,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACL,EAAE,EAAE;IACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpE,sEAAsE;IACtE,MAAM,cAAc,GAAmB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI;QAC9C,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;KAClB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC9C,cAAc,CAAC;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE;YACpB,cAAc,CAAC,EAAE,CAAC,CAAC;SACnB;aAAM;YACN,WAAW,CAAC;gBACX,EAAE;gBACF,QAAQ;gBACR,IAAI;gBACJ,IAAI,EAAE,cAAc;aACpB,CAAC,CAAC;SACH;IACF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,OAAO,GAAG,kBAAkB,MAAM,IAAI,SAAS,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IAE1D,OAAO,CACN,6BAAK,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IACrG,QAAQ,IAAI,2BAAG,SAAS,EAAC,aAAa,GAAK,CACvC,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavorites } from \"../../hooks/useFavorites\";\nimport { Favorite } from \"../../types/favoriteTypes\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\ntype FavoriteMakerProps = Favorite & {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\n/**\n * Creates a clickable \"favorite\" that coordinates with the toolbar's pinned <FavoritesShell>.\n * @param {string} [className] - An optional CSS className to append.\n * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.\n * @param {string} [category] - \"Workspace\" | \"Application\". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.\n * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.\n * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.\n */\nexport const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps> = ({\n\tid,\n\tcategory,\n\ticon,\n\tname,\n\tchildren,\n\tclassName = \"\",\n\tstyle,\n}) => {\n\tconst { isFavorited, addFavorite, removeFavorite } = useFavorites();\n\n\t// If no icon is specified then default to an avatar based on initials\n\tconst definitiveIcon: IconDescriptor = icon ?? {\n\t\timageType: \"initials\",\n\t\tname: name,\n\t\tcategory: category,\n\t};\n\n\tconst toggleFavorite = (e: React.MouseEvent) => {\n\t\tdefinitiveIcon;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tif (isFavorited(id)) {\n\t\t\tremoveFavorite(id);\n\t\t} else {\n\t\t\taddFavorite({\n\t\t\t\tid,\n\t\t\t\tcategory,\n\t\t\t\tname,\n\t\t\t\ticon: definitiveIcon,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst active = isFavorited(id) ? \"favorited\" : \"not-favorited\";\n\tconst classes = `favorite-maker ${active} ${className}`;\n\tconst title = isFavorited(id) ? \"Unfavorite\" : \"Favorite\";\n\n\treturn (\n\t\t<div role=\"button\" tabIndex={0} onClick={toggleFavorite} className={classes} style={style} title={title}>\n\t\t\t{children || <i className=\"ff-favorite\"></i>}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"FavoriteMaker.js","sourceRoot":"","sources":["../../../../../src/ui/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AASxD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAgD,CAAC,EAC1E,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACL,EAAE,EAAE;IACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpE,sEAAsE;IACtE,MAAM,cAAc,GAAmB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI;QAC9C,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;KAClB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC9C,cAAc,CAAC;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE;YACpB,cAAc,CAAC,EAAE,CAAC,CAAC;SACnB;aAAM;YACN,WAAW,CAAC;gBACX,EAAE;gBACF,QAAQ;gBACR,IAAI;gBACJ,IAAI,EAAE,cAAc;aACpB,CAAC,CAAC;SACH;IACF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,OAAO,GAAG,kBAAkB,MAAM,IAAI,SAAS,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IAE1D,OAAO,CACN,6BAAK,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IACrG,QAAQ,IAAI,2BAAG,SAAS,EAAC,aAAa,GAAK,CACvC,CACN,CAAC;AACH,CAAC,CAAC"}

package/react/components/favorites/FavoritesShell.d.ts

@@ -5,3 +5,4 @@ import "../../assets/css/favorites.css";
  * to launch, reorder, or delete a favorited item.
  */
 export declare const FavoritesShell: () => JSX.Element;
+//# sourceMappingURL=FavoritesShell.d.ts.map