@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,79 @@
+"use client";
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../Button/Button.js";
+import n from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import r from "./components/FileDetails/FileDetails.js";
+import { DropZone as i, List as a, Root as o } from "./FileUpload.styled.js";
+import s from "../../internal/composeRefs/composeRefs.js";
+import c, { useCallback as l, useEffect as u, useRef as d } from "react";
+import { FileTrigger as f, Text as p } from "react-aria-components";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/components/FileUpload/FileUpload.tsx
+var g = c.forwardRef(({ onSelectionChange: c, acceptedFileTypes: g, allowsMultiple: y = !1, files: b, formGroupWrapperProps: x, className: S, style: C, isDisabled: w = !1 }, T) => {
+	let E = e(_), D = d(null), O = !!b?.length && !y;
+	u(() => {
+		x.htmlForId && D.current?.setAttribute("id", x.htmlForId);
+	}, [x.htmlForId, D]);
+	let k = l((e) => {
+		O || c(y ? e : [e[0]]);
+	}, [
+		y,
+		O,
+		c
+	]);
+	return /* @__PURE__ */ h(o, {
+		className: S,
+		style: C,
+		children: [/* @__PURE__ */ m(n, {
+			...x,
+			children: /* @__PURE__ */ h(i, {
+				isDisabled: w,
+				getDropOperation: (e) => O ? "cancel" : v(e, g),
+				onDrop: async (e) => {
+					let t = [], n = e.items.filter((e) => e.kind === "file");
+					for (let e of n) t.push(await e.getFile());
+					k(t);
+				},
+				children: [/* @__PURE__ */ m(f, {
+					"aria-label": x.label,
+					ref: s(T, D),
+					onSelect: (e) => {
+						if (!e) return console.error("No file selected");
+						let t = Array.from(e);
+						k(t);
+					},
+					acceptedFileTypes: g,
+					allowsMultiple: y,
+					children: /* @__PURE__ */ m(t, {
+						text: E.trigger,
+						mode: "secondary",
+						disabled: w || O
+					})
+				}), /* @__PURE__ */ m(p, {
+					slot: "label",
+					children: y ? E.dropHerePlural : E.dropHere
+				})]
+			})
+		}), !!b?.length && /* @__PURE__ */ m(a, { children: b.map((e) => /* @__PURE__ */ m(r, { ...e }, e.id)) })]
+	});
+}), _ = {
+	en: {
+		trigger: "Browse",
+		dropHere: "Or drop your file here",
+		dropHerePlural: "Or drop your files here"
+	},
+	fr: {
+		trigger: "Parcourir",
+		dropHere: "Ou déposer votre fichier ici",
+		dropHerePlural: "Ou déposer vos fichiers ici"
+	}
+};
+function v(e, t) {
+	if (!t?.length) return "copy";
+	let n = !1;
+	return t.forEach((t) => {
+		e.has(t) && (n = !0);
+	}), n ? "copy" : "cancel";
+}
+//#endregion
+export { g as default };

package/dist/components/FileUpload/FileUpload.styled.js

@@ -0,0 +1,39 @@
+import { styled as e } from "styled-components";
+import { DropZone as t } from "react-aria-components";
+//#region packages/components/FileUpload/FileUpload.styled.tsx
+var n = e.div`
+  width: 100%;
+  min-width: 313px;
+`, r = e.ul`
+  list-style: none;
+  margin: var(--spacing-xs) 0 0 0;
+  padding: 0;
+`, i = e(t)`
+  padding: var(--spacing-xs);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: var(--spacing-xs);
+  width: 100%;
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  font-style: normal;
+  font-weight: 400;
+  border-radius: var(--radius-rounded);
+  border: 1px dashed var(--color-content-neutral-stroke);
+  background: var(--color-background-neutral-ground);
+
+  &[data-drop-target] {
+    border-color: var(--color-content-action-action);
+    background: var(--color-content-action-action-lighter);
+  }
+
+  &[data-disabled="true"] {
+    border-color: var(--color-content-neutral-stroke);
+    background: var(--color-content-neutral-tertiary);
+    cursor: not-allowed;
+  }
+`;
+//#endregion
+export { i as DropZone, r as List, n as Root };

package/dist/components/FileUpload/components/FileDetails/FileDetails.js

@@ -0,0 +1,43 @@
+import e from "../../../../internal/usetranslations/usetranslations.js";
+import t from "../../../Button/Button.js";
+import { FileIcon as n, FileName as r, FileSize as i, Informations as a, Root as o } from "./FileDetails.styled.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/components/FileUpload/components/FileDetails/FileDetails.tsx
+function l({ id: l, fileName: d, fileSize: f, isUploading: p, onDelete: m }) {
+	let h = e(u);
+	return /* @__PURE__ */ c(o, {
+		id: l,
+		children: [
+			/* @__PURE__ */ s(n, {
+				name: "text_snippet",
+				"data-is-uploading": p
+			}),
+			/* @__PURE__ */ c(a, { children: [/* @__PURE__ */ s(r, {
+				title: d,
+				children: d
+			}), /* @__PURE__ */ s(i, {
+				title: f,
+				children: f
+			})] }),
+			/* @__PURE__ */ s(t, {
+				mode: "secondary",
+				iconLeft: "delete_outline",
+				onClick: m,
+				isLoading: p,
+				"aria-label": p ? h.isLoading : h.delete
+			})
+		]
+	});
+}
+var u = {
+	en: {
+		isLoading: "Loading in progress...",
+		delete: "Delete"
+	},
+	fr: {
+		isLoading: "Chargement en cours...",
+		delete: "Supprimer"
+	}
+};
+//#endregion
+export { l as default };

package/dist/components/FileUpload/components/FileDetails/FileDetails.styled.js

@@ -0,0 +1,43 @@
+import e from "../../../Icon/Icon.js";
+import { styled as t } from "styled-components";
+//#region packages/components/FileUpload/components/FileDetails/FileDetails.styled.tsx
+var n = t.li`
+  display: flex;
+  align-items: center;
+  column-gap: var(--spacing-sm);
+  padding: var(--spacing-xs) 0;
+  list-style: none;
+`, r = t(e)`
+  flex: none;
+  font-size: var(--text-font-size-xl);
+  color: var(--color-content-brand-brand-2);
+
+  &[data-is-uploading="true"] {
+    color: var(--color-content-neutral-tertiary);
+  }
+`, i = t.div`
+  flex: 1;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+`, a = t.div`
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-sm);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--text-line-height-sm);
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`, o = t.div`
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-xs);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-xs);
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+//#endregion
+export { r as FileIcon, a as FileName, o as FileSize, i as Informations, n as Root };

package/dist/components/Filter/Filter.js

@@ -0,0 +1,105 @@
+"use client";
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../Button/Button.js";
+import n from "../Chip/Chip.js";
+import { DialogActions as r, DialogContent as i } from "../../internal-components/DialogLayout/DialogLayout.styled.js";
+import a from "../Drawer/Drawer.js";
+import { ActiveFilters as o, Container as s, MainActions as c, TextInput as l } from "./Filter.styled.js";
+import { useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region packages/components/Filter/Filter.tsx
+function p({ extraLeftContent: p, extraRightContent: h, divProps: g, onDownloadClick: _, onSettingsClick: v, table: y, searchAriaLabel: b, searchPlaceholder: x }) {
+	let S = e(m), [C, w] = u(!1), T = () => y.resetColumnFilters?.(), E = typeof y.state.globalFilter == "string", D = y.getAllColumns(), O = [], k = [];
+	return D.forEach((e) => {
+		let t = e.columnDef.meta, n = e;
+		if (t?.FilterInDrawer && O.push({
+			column: e,
+			FilterComponent: t.FilterInDrawer
+		}), t?.filterChips) {
+			let n = t.filterChips({ column: e });
+			n && (k = k.concat(n));
+		} else if (!t?.skipFilterChips) {
+			let t = n.getFilterValue?.();
+			(typeof t == "string" || typeof t == "number") && k.push({
+				value: `${e.id}: ${t.toString()}`,
+				onClose: () => n.setFilterValue?.(null)
+			}), Array.isArray(t) && t.length > 0 && (typeof t[0] == "string" || typeof t[0] == "number") && t.forEach((t) => {
+				k.push({
+					value: `${e.id}: ${t.toString()}`,
+					onClose: () => n.setFilterValue?.((e) => e.filter((e) => e !== t))
+				});
+			});
+		}
+	}), /* @__PURE__ */ f(s, {
+		...g,
+		children: [
+			/* @__PURE__ */ f(c, { children: [
+				p,
+				!!E && /* @__PURE__ */ d(l, {
+					"aria-label": b,
+					placeholder: x,
+					value: y.state.globalFilter,
+					onChange: (e) => y.setGlobalFilter?.(e.target.value),
+					inputIcon: "search"
+				}),
+				_ && /* @__PURE__ */ d(t, {
+					onClick: _,
+					iconLeft: "download",
+					mode: "secondary",
+					"aria-label": S.download
+				}),
+				v && /* @__PURE__ */ d(t, {
+					onClick: v,
+					iconLeft: "settings",
+					mode: "secondary",
+					"aria-label": S.settings
+				}),
+				O.length > 0 && /* @__PURE__ */ d(t, {
+					onClick: () => w(!0),
+					iconLeft: "filter_alt",
+					mode: "secondary",
+					text: S.filter
+				}),
+				h
+			] }),
+			k.length > 0 && /* @__PURE__ */ f(o, { children: [k?.map((e) => /* @__PURE__ */ d(n, { ...e }, e.value)), /* @__PURE__ */ d(t, {
+				onClick: T,
+				mode: "tertiary",
+				text: S.reset
+			})] }),
+			/* @__PURE__ */ f(a, {
+				isOpen: C,
+				onOpenChange: w,
+				title: S.filters,
+				children: [/* @__PURE__ */ d(i, { children: O.map(({ column: e, FilterComponent: t }) => /* @__PURE__ */ d(t, { column: e }, e.id)) }), /* @__PURE__ */ f(r, { children: [/* @__PURE__ */ d(t, {
+					onClick: T,
+					text: S.reset,
+					mode: "secondary"
+				}), /* @__PURE__ */ d(t, {
+					onClick: () => w(!1),
+					text: S.apply
+				})] })]
+			})
+		]
+	});
+}
+var m = {
+	en: {
+		download: "Download",
+		settings: "Settings",
+		filter: "Filter",
+		filters: "Filters",
+		reset: "Reset",
+		apply: "Apply"
+	},
+	fr: {
+		download: "Télécharger",
+		settings: "Paramètres",
+		filter: "Filtrer",
+		filters: "Filtres",
+		reset: "Réinitialiser",
+		apply: "Appliquer"
+	}
+};
+//#endregion
+export { p as default };

package/dist/components/Filter/Filter.styled.js

@@ -0,0 +1,24 @@
+import e from "../TextInput/TextInput.js";
+import { styled as t } from "styled-components";
+//#region packages/components/Filter/Filter.styled.ts
+var n = t.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+`, r = t.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+`, i = t.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+`, a = t(e)`
+  width: 284px;
+`;
+//#endregion
+export { i as ActiveFilters, n as Container, r as MainActions, a as TextInput };

package/dist/components/Header/Header.js

@@ -0,0 +1,52 @@
+"use client";
+import e from "../Icon/Icon.js";
+import t from "../../internal/usetranslations/usetranslations.js";
+import n from "../Button/Button.js";
+import { ActionsBar as r, BreadcrumbsAndTitleGroup as i, BreadcrumbsWrapper as a, ButtonWrapper as o, EverythingButTabs as s, Header as c, LogoWrapper as l, MobileAppBar as u, StyledLogo as d, SubtitleAndTagGroup as f, Title as p, TitleGroup as m } from "./Header.styled.js";
+import { usePageLayoutContext as h } from "../PageLayout/context.js";
+import "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region packages/components/Header/Header.tsx
+function y({ title: y, subtitle: x, tagComponent: S, logo: C, onGoBack: w, breadcrumbsComponent: T, helperIconComponent: E, notificationIconComponent: D, additionalActions: O, tabsComponent: k, ...A }) {
+	let j = t(b), M = h(), N = !!E || !!D || !!O;
+	return /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ v(c, {
+		"data-has-tabs": !!k,
+		...A,
+		children: [/* @__PURE__ */ v(u, { children: [C && /* @__PURE__ */ _(l, { children: /* @__PURE__ */ _(d, {
+			title: C,
+			"data-title": C
+		}) }), M && /* @__PURE__ */ _(o, {
+			type: "button",
+			"aria-label": j.menuMobile,
+			onClick: () => M.setIsCollapsed((e) => !e),
+			children: /* @__PURE__ */ _(e, { name: "menu" })
+		})] }), /* @__PURE__ */ v(s, {
+			"data-has-tabs": !!k,
+			children: [/* @__PURE__ */ v(i, { children: [/* @__PURE__ */ _(a, { children: T }), /* @__PURE__ */ v(m, {
+				"data-has-breadcrumbs": !!T,
+				children: [w && /* @__PURE__ */ _("div", { children: /* @__PURE__ */ _(n, {
+					onClick: w,
+					iconLeft: "arrow_back",
+					mode: "tertiary",
+					"aria-label": j.goBack
+				}) }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _(p, { children: y }), /* @__PURE__ */ v(f, { children: [!!S && /* @__PURE__ */ _("div", { children: S }), !!x && /* @__PURE__ */ _("div", { children: x })] })] })]
+			})] }), N && /* @__PURE__ */ v(r, { children: [
+				E,
+				D,
+				O
+			] })]
+		})]
+	}), k] });
+}
+var b = {
+	en: {
+		goBack: "Go back",
+		menuMobile: "Mobile menu"
+	},
+	fr: {
+		goBack: "Retour",
+		menuMobile: "Menu mobile"
+	}
+};
+//#endregion
+export { y as default };

package/dist/components/Header/Header.styled.js

@@ -0,0 +1,131 @@
+import e from "../../internal-components/Logo/Logo.js";
+import { styled as t } from "styled-components";
+//#region packages/components/Header/Header.styled.ts
+var n = t.div`
+  padding: 0;
+
+  &[data-has-tabs="false"] {
+    border-bottom: 1px solid var(--color-content-neutral-stroke);
+  }
+
+  & ~ [data-design-system-component="Tabs"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media screen and (min-width: 768px) {
+    padding: var(--spacing-lg);
+
+    & ~ [data-design-system-component="Tabs"] [role="tablist"] {
+      padding-top: var(--spacing-xs);
+      padding-inline: var(--spacing-lg);
+    }
+
+    &[data-has-tabs="true"] {
+      padding-bottom: 0;
+    }
+  }
+`, r = t.div`
+  display: flex;
+  justify-content: space-between;
+  background: var(--color-background-neutral-ground-reversed);
+  min-height: var(--text-line-height-3xl);
+
+  @media screen and (min-width: 768px) {
+    display: none;
+  }
+`, i = t.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 var(--spacing-sm);
+`, a = t(e)`
+  &[data-title="agregio"] {
+    width: 121px;
+    height: 56px;
+  }
+  &[data-title="connection-management"] {
+    width: calc(121px * 0.7);
+    height: calc(56px * 0.7);
+  }
+  &[data-title="iris"] {
+    width: calc(121px * 0.7);
+    height: calc(56px * 0.7);
+  }
+  &[data-title="vpp"] {
+    width: calc(121px * 0.7);
+    height: calc(56px * 0.7);
+  }
+  &[data-title="obi"] {
+    width: calc(121px * 0.7);
+    height: calc(56px * 0.7);
+  }
+`, o = t.button`
+  background: var(--color-background-neutral-ground-reversed);
+  color: var(--color-background-neutral-ground);
+  cursor: pointer;
+  border: none;
+  padding: 0 var(--spacing-sm);
+  margin-left: auto;
+`, s = t.header`
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+  column-gap: var(--spacing-sm);
+  padding: var(--spacing-xs);
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    padding: 0;
+
+    [data-has-tabs="true"] {
+      padding-bottom: var(--spacing-xs);
+    }
+  }
+`, c = t.div`
+  flex: 1;
+`, l = t.div`
+  display: none;
+
+  @media screen and (min-width: 768px) {
+    display: block;
+  }
+`, u = t.div`
+  display: flex;
+  column-gap: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+
+  [data-has-breadcrumbs="true"] {
+    padding-top: var(--spacing-sm);
+  }
+
+  @media screen and (min-width: 768px) {
+    margin-top: 0;
+  }
+`, d = t.h1`
+  margin: 0;
+  padding: 0;
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-2xl);
+  line-height: var(--text-line-height-2xl);
+  font-style: normal;
+  font-weight: 700;
+`, f = t.div`
+  display: flex;
+  column-gap: var(--spacing-xs);
+  align-items: center;
+`, p = t.div`
+  display: flex;
+  align-self: flex-end;
+  column-gap: var(--spacing-xs);
+  padding-right: var(--spacing-xs);
+
+  @media screen and (min-width: 768px) {
+    align-self: flex-start;
+    padding-right: 0;
+  }
+`;
+//#endregion
+export { p as ActionsBar, c as BreadcrumbsAndTitleGroup, l as BreadcrumbsWrapper, o as ButtonWrapper, s as EverythingButTabs, n as Header, i as LogoWrapper, r as MobileAppBar, a as StyledLogo, f as SubtitleAndTagGroup, d as Title, u as TitleGroup };