@hortiview/shared-components 0.0.7951 → 0.0.8286

package/README.md

@@ -27,6 +27,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [BaseView](#baseview)
 1. [BasicHeading](#basicheading)
 1. [BlockView](#blockview)
+1. [ChipCard](#chipcard)
 1. [ContextMenu](#contextmenu)
 1. [DeleteModal](#deletemodal)
 1. [Disclaimer](#disclaimer)
@@ -138,6 +139,16 @@ const blocks: BlockDto = [
 <BlockView blocks={blocks} columns={1} rows={1} />;
 ```
 
+### ChipCard
+
+A card with a chip inside, used for displaying entities. The chip displays an icon and a label. Furthermore, it is wrapped by [OverflowTooltip](#overflowtooltip) to truncate long labels. The card takes per default the width of the parent container. You can also provide custom CSS via the `className` property.
+
+```jsx
+import { ChipCard } form '@hortiview/shared-components'
+
+<ChipCard icon='domain' label='Example Label' className='custom' />
+```
+
 ### ContextMenu
 
 This is a component to render a menu button, that opens several action-points in a context-menu

package/dist/assets/chipCard.css

@@ -0,0 +1 @@
+._entityContainer_1g0x2_1{justify-content:center;align-items:center;padding:.25rem;border-radius:.5rem}

package/dist/assets/listArea.css

@@ -1 +1 @@
-._fullWidth_1norc_1{width:100%}._mainElevation_1norc_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_1norc_11 div{border:none}._searchbar_1norc_11 button{margin-right:.5rem}._roundedBottom_1norc_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_1norc_24 [class*=mdc-list-item__primary-text]{display:none!important}._list_1norc_28{padding-top:0;padding-bottom:0;overflow-y:auto}._list_1norc_28 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._list_1norc_28::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 .25rem rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_1norc_28::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_1norc_28::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_1norc_56{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_1norc_56 i:not(._trailingIcon_1norc_60){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1norc_56 i._trailingIcon_1norc_60{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1norc_56 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_1norc_72{height:4.5rem!important}._iconColor_1norc_76{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_1norc_80 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}._noOverlineTitle_1norc_85 [class*=mdc-list-item__secondary-text] [class*=lmnt-group]{margin-top:-.875rem}._truncate_1norc_89{display:-webkit-box!important;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%}._truncateOverlineText_1norc_99{margin-bottom:-1rem!important;margin-top:-1rem!important}
+._fullWidth_zewqs_1{width:100%}._mainElevation_zewqs_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_zewqs_11 div{border:none}._searchbar_zewqs_11 button{margin-right:.5rem}._roundedBottom_zewqs_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_zewqs_24 [class*=mdc-list-item__primary-text]{display:none!important}._list_zewqs_28{padding-top:0;padding-bottom:0;overflow-y:auto}._list_zewqs_28 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._list_zewqs_28::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 .25rem rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_zewqs_28::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_zewqs_28::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_zewqs_56{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_zewqs_56 i:not(._trailingIcon_zewqs_60){color:var(--lmnt-theme-on-surface-inactive)}._listItem_zewqs_56 i._trailingIcon_zewqs_60{color:var(--lmnt-theme-on-surface-disabled)}._listItem_zewqs_56 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_zewqs_72{height:4.5rem!important}._iconColor_zewqs_76{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_zewqs_80 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}._noOverlineTitle_zewqs_85 [class*=mdc-list-item__secondary-text] [class*=lmnt-group]{margin-top:-.875rem}._truncate_zewqs_89{display:-webkit-box!important;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%;word-break:break-all}._truncateOverlineText_zewqs_100{margin-bottom:-1rem!important;margin-top:-1rem!important}

package/dist/assets/overflowTooltip.css

@@ -1 +1 @@
-._truncate_m48xn_1{display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
+._truncate_wgwcv_1{display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%;word-break:break-all}._truncate_wgwcv_1 *:not([class*=lmnt-icon]){overflow:hidden;text-overflow:ellipsis;word-break:break-all}

package/dist/chipCard.module-BjpKuf1b.js

@@ -0,0 +1,7 @@
+import "./assets/chipCard.css";
+const t = "_entityContainer_1g0x2_1", e = {
+  entityContainer: t
+};
+export {
+  e as s
+};

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,6 +1,6 @@
 import { jsx as r, Fragment as l, jsxs as c } from "react/jsx-runtime";
 import { Group as m, TypoBody as p } from "@element/react-components";
-import { u as d } from "../../useBreakpoints-BNeVhjjZ.js";
+import { u as d } from "../../useBreakpoints-MzTZ0tCT.js";
 import { s as o } from "../../alertBanner.module-BPiKN0gh.js";
 const h = ({
   text: e,

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,6 +1,6 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
 import { a as t, s } from "../../react.esm-Dy4VzU4L.js";
-import { a as l } from "../../useBreakpoints-BNeVhjjZ.js";
+import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
 import { AlertBanner as n } from "./AlertBanner.js";
 import { d as c, b as p, t as r, g as o, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";
 c("AlertBanner Test", () => {

package/dist/components/BaseView/BaseView.js

@@ -5,7 +5,7 @@ import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
 import { EmptyView as L } from "../EmptyView/EmptyView.js";
 import { ListArea as W } from "../ListArea/ListArea.js";
 import { VerticalDivider as A } from "../VerticalDivider/VerticalDivider.js";
-import { u as V } from "../../useBreakpoints-BNeVhjjZ.js";
+import { u as V } from "../../useBreakpoints-MzTZ0tCT.js";
 import { s as r } from "../../baseView.module-uWbm_a5f.js";
 const C = ({
   action: c,

package/dist/components/BaseView/BaseView.test.js

@@ -1,6 +1,6 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
 import { a as r, s as e, f as p } from "../../react.esm-Dy4VzU4L.js";
-import { a as l } from "../../useBreakpoints-BNeVhjjZ.js";
+import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
 import { BaseView as i } from "./BaseView.js";
 import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";
 u("BaseView Test", () => {

package/dist/components/BasicHeading/BasicHeading.js

@@ -2,7 +2,7 @@ import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { TypoDisplay as g, TypoBody as N, Icon as I } from "@element/react-components";
 import { I as x } from "../../Iconify-CY9lZjFd.js";
 import { AvailableCustomIcons as B } from "../../enums/AvailableCustomIcons.js";
-import { u as C } from "../../useBreakpoints-BNeVhjjZ.js";
+import { u as C } from "../../useBreakpoints-MzTZ0tCT.js";
 import { OverflowTooltip as T } from "../OverflowTooltip/OverflowTooltip.js";
 import { s as e } from "../../basicHeading.module-BYb8xvuk.js";
 const $ = ({ icon: i }) => i ? typeof i != "string" ? /* @__PURE__ */ t("div", { className: e.iconContainer, children: i }) : i in B ? /* @__PURE__ */ t(

package/dist/components/ChipCard/ChipCard.d.ts

@@ -0,0 +1,24 @@
+type ChipCardProps = {
+    /**
+     * The label of the chip.
+     */
+    label: string;
+    /**
+     * The leading icon. The available icons are all material icons.
+     */
+    icon: string;
+    /**
+     * The class name to apply to the component.
+     */
+    className?: string;
+};
+/**
+ * A card with a chip inside, used for displaying entities.
+ * The chip displays an icon and a label. Furthermore, it is wrapped by {@link OverflowTooltip} to truncate long labels.
+ * The card takes per default the width of the parent container.
+ * @param label the label of the chip
+ * @param icon the leading icon. The available icons are all material icons.
+ * @param className the class name to apply to the component
+ */
+export declare const ChipCard: ({ label, icon, className }: ChipCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ChipCard/ChipCard.js

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Card as e, Chips as n } from "@element/react-components";
+import { OverflowTooltip as a } from "../OverflowTooltip/OverflowTooltip.js";
+import { s as m } from "../../chipCard.module-BjpKuf1b.js";
+const h = ({ label: r, icon: i, className: o = "" }) => /* @__PURE__ */ t(
+  e,
+  {
+    variant: "flat",
+    bodyAlignment: "centered",
+    themeColor: "primary-50",
+    className: `${m.entityContainer} ${o}`,
+    children: /* @__PURE__ */ t(a, { id: `chip_card_${r}`, text: r, children: /* @__PURE__ */ t(
+      n,
+      {
+        chips: [
+          {
+            label: r,
+            leadingIcon: i
+          }
+        ],
+        variant: "outlined"
+      }
+    ) })
+  }
+);
+export {
+  h as ChipCard
+};

package/dist/components/ChipCard/ChipCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ChipCard/ChipCard.test.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+import { a, s as i } from "../../react.esm-Dy4VzU4L.js";
+import { ChipCard as n } from "./ChipCard.js";
+import { d as s, t as c, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+s("ChipCard Component", () => {
+  const r = "Test Label", o = "domain";
+  c("renders the correct label and icon", () => {
+    a(/* @__PURE__ */ e(n, { label: r, icon: o })), t(i.getByText(r)).toBeInTheDocument(), t(i.getByText(o)).toBeInTheDocument();
+  }), c("applies OverflowTooltip correctly", () => {
+    const l = "Very looooooooooooooooooooooooooooooooooooong example label";
+    a(
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: "2rem"
+          },
+          children: /* @__PURE__ */ e(n, { label: l, icon: o })
+        }
+      )
+    );
+    const d = document.querySelector("div[data-tooltip-id]");
+    t(d).toHaveAttribute("data-tooltip-id", `chip_card_${l}`);
+  });
+});

package/dist/components/DeleteModal/DeleteModal.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as p, Fragment as s } from "react/jsx-runtime";
 import { Button as u, Group as c, Icon as D, TypoBody as t } from "@element/react-components";
 import { uniqueId as N } from "lodash";
 import { AvailableCustomIcons as S } from "../../enums/AvailableCustomIcons.js";
-import { u as x } from "../../useBreakpoints-BNeVhjjZ.js";
+import { u as x } from "../../useBreakpoints-MzTZ0tCT.js";
 import { I as M } from "../../Iconify-CY9lZjFd.js";
 import { Modal as j } from "../Modal/Modal.js";
 import { s as n } from "../../deleteModal.module-Ds3MDzdl.js";

package/dist/components/Filter/Filter.js

@@ -2,21 +2,22 @@ import { jsx as t, jsxs as B, Fragment as I } from "react/jsx-runtime";
 import { Group as y, Button as h, Select as T, Switch as W, IconButton as j, NotificationBadge as b } from "@element/react-components";
 import { useState as v } from "react";
 import { s as c } from "../../genericTable.module-Dk3yy2S3.js";
-import { u as A } from "../../useBreakpoints-BNeVhjjZ.js";
+import { u as A } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../alertBanner.module-BPiKN0gh.js";
 import { I as z } from "../../Iconify-CY9lZjFd.js";
 import "../../react-tooltip.min-BzHiZW8k.js";
-import "../../overflowTooltip.module-BN3bp9Cj.js";
+import "../../overflowTooltip.module-YyRN2MGc.js";
 import "../../basicHeading.module-BYb8xvuk.js";
 import "../../isArray-Ca4KR8TK.js";
 import "../../_baseToString-BNXOi2Mf.js";
 import "../../_equalByTag-DJhSpgVG.js";
 import "../../iconify.module-C89oaw5b.js";
 import { SearchBar as H } from "../SearchBar/SearchBar.js";
-import "../../listArea.module-CGpHPOji.js";
+import "../../listArea.module-BhO_OJ1S.js";
 import "../../verticalDivider.module-C3_GL-fH.js";
 import "../../baseView.module-uWbm_a5f.js";
 import "../../BlockView.module-BPlNT5uh.js";
+import "../../chipCard.module-BjpKuf1b.js";
 import "lodash";
 import "../../contextMenu.module-DNQ8d9Aj.js";
 import { Modal as K } from "../Modal/Modal.js";
@@ -33,7 +34,7 @@ import "react-hook-form";
 import "../../formDatePicker.module-BV3ma_7y.js";
 import "../../formSelect.module-C18N-SsT.js";
 import "../../formText.module-C0by6_DK.js";
-const xt = ({
+const St = ({
   clearFilterText: m,
   closeCallback: a,
   currentFilter: i,
@@ -175,5 +176,5 @@ const xt = ({
   );
 };
 export {
-  xt as Filter
+  St as Filter
 };

package/dist/components/Filter/Filter.test.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { a, s as t, f as c, t as u, w as d } from "../../react.esm-Dy4VzU4L.js";
-import { a as s } from "../../useBreakpoints-BNeVhjjZ.js";
+import { a as s } from "../../useBreakpoints-MzTZ0tCT.js";
 import { Filter as T } from "./Filter.js";
 import { v as x, b as f, d as y, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 const o = x.fn();

package/dist/components/GenericTable/GenericTable.js

@@ -2,20 +2,21 @@ import { jsx as r, jsxs as B } from "react/jsx-runtime";
 import { Elevation as D, Table as G, TableTopBar as u, Group as m, Padding as W, TypoDisplay as k, TypoSubtitle as C } from "@element/react-components";
 import { Fragment as j } from "react";
 import { a as t } from "../../genericTable.module-Dk3yy2S3.js";
-import { u as x } from "../../useBreakpoints-BNeVhjjZ.js";
+import { u as x } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../alertBanner.module-BPiKN0gh.js";
 import "../../iconify.module-C89oaw5b.js";
 import "../../isArray-Ca4KR8TK.js";
 import "../../react-tooltip.min-BzHiZW8k.js";
-import "../../overflowTooltip.module-BN3bp9Cj.js";
+import "../../overflowTooltip.module-YyRN2MGc.js";
 import "../../basicHeading.module-BYb8xvuk.js";
 import "../../_baseToString-BNXOi2Mf.js";
 import "../../_equalByTag-DJhSpgVG.js";
 import "../../searchBar.module-9gKyrZRT.js";
-import "../../listArea.module-CGpHPOji.js";
+import "../../listArea.module-BhO_OJ1S.js";
 import "../../verticalDivider.module-C3_GL-fH.js";
 import "../../baseView.module-uWbm_a5f.js";
 import "../../BlockView.module-BPlNT5uh.js";
+import "../../chipCard.module-BjpKuf1b.js";
 import "lodash";
 import "../../contextMenu.module-DNQ8d9Aj.js";
 import "../../modal.module-BlDp1Wiq.js";
@@ -33,9 +34,9 @@ import "../../formSelect.module-C18N-SsT.js";
 import "../../formText.module-C0by6_DK.js";
 import { useGenerateColumns as _, useGenerateTableData as $ } from "./GenericTableService.js";
 import { GenericCardList as A } from "./Mobile/GenericCardList.js";
-const fr = ({
-  data: l = [],
-  hiddenColumns: p = [],
+const hr = ({
+  data: p = [],
+  hiddenColumns: l = [],
   order: f = [],
   cellTemplates: h = void 0,
   tableActions: i = [],
@@ -49,7 +50,7 @@ const fr = ({
   cardSubTitleColumn: T
 }) => {
   const { isDesktop: o } = x(), a = _({
-    data: l,
+    data: p,
     order: f,
     cellTemplates: h,
     headerTranslation: g,
@@ -58,7 +59,7 @@ const fr = ({
     cardTitleColumn: v,
     cardSubTitleColumn: T
   }), c = $({
-    data: l,
+    data: p,
     getRowActions: s
   });
   return o ? /* @__PURE__ */ r(D, { elevation: 1, className: t.elevation, children: /* @__PURE__ */ r(
@@ -68,7 +69,7 @@ const fr = ({
       fullWidth: !0,
       alwaysUseDivTags: !0,
       layout: "standard",
-      hiddenColumns: p,
+      hiddenColumns: l,
       data: c,
       columns: a,
       leadingContent: e && i?.length === 0 ? /* @__PURE__ */ r(u, { title: e }) : i?.length > 0 && /* @__PURE__ */ r(
@@ -109,11 +110,11 @@ const fr = ({
     {
       data: c,
       columns: a,
-      hiddenColumns: p,
+      hiddenColumns: l,
       noContentText: n
     }
   );
 };
 export {
-  fr as GenericTable
+  hr as GenericTable
 };

package/dist/components/GenericTable/GenericTable.test.js

@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as B } from "react/jsx-runtime";
 import { a as o, s as e } from "../../react.esm-Dy4VzU4L.js";
-import { a as m } from "../../useBreakpoints-BNeVhjjZ.js";
+import { a as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import { GenericTable as s } from "./GenericTable.js";
 import { d as h, v as r, t as i, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 h("GenericTable Test", () => {

package/dist/components/HashTabView/HashTabView.js

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as d, Fragment as I } from "react/jsx-runtime";
 import { Elevation as N, Group as c, TabBar as b, Tab as k, Padding as x } from "@element/react-components";
 import { useState as y, useEffect as $ } from "react";
-import { u as w } from "../../useBreakpoints-BNeVhjjZ.js";
+import { u as w } from "../../useBreakpoints-MzTZ0tCT.js";
 import { s as a } from "../../HashTabView.module-DUekkiTC.js";
 const h = (n, t) => !t || !n ? 0 : n.findIndex((i) => i.hash === t.replace("#", "")) ?? 0, D = ({
   tabs: n,

package/dist/components/InfoGroup/InfoGroup.js

@@ -1,7 +1,7 @@
 import { jsxs as d, Fragment as p, jsx as t } from "react/jsx-runtime";
 import { Divider as h, Group as s, TypoCaption as g, TypoSubtitle as v } from "@element/react-components";
 import { useMemo as y, Fragment as A } from "react";
-import { u } from "../../useBreakpoints-BNeVhjjZ.js";
+import { u } from "../../useBreakpoints-MzTZ0tCT.js";
 import { s as l } from "../../infoGroup.module-Cxw88dfC.js";
 const w = ({ fields: r, bold: i }) => {
   const { isDesktop: a } = u(), e = !!r.length && Array.isArray(r.at(0)), n = y(() => e && a ? r.map((o, c) => /* @__PURE__ */ d(p, { children: [

package/dist/components/ListArea/ListArea.js

@@ -10,7 +10,7 @@ import { _ as br, i as M } from "../../Iconify-CY9lZjFd.js";
 import { useState as dr, useMemo as F } from "react";
 import { SearchBar as hr } from "../SearchBar/SearchBar.js";
 import { getGroupedItems as mr, getListedItems as Or } from "./ListAreaService.js";
-import { s as A } from "../../listArea.module-CGpHPOji.js";
+import { s as A } from "../../listArea.module-BhO_OJ1S.js";
 function Pr(r, n) {
   for (var a = -1, e = n.length, i = r.length; ++a < e; )
     r[i + a] = n[a];

package/dist/components/ListArea/ListAreaService.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as B } from "react/jsx-runtime";
 import { TypoButton as C, Group as b, TypoSubtitle as j, TypoBody as O, Icon as G } from "@element/react-components";
 import { I as L } from "../../Iconify-CY9lZjFd.js";
 import { AvailableCustomIcons as S } from "../../enums/AvailableCustomIcons.js";
-import { s as n } from "../../listArea.module-CGpHPOji.js";
+import { s as n } from "../../listArea.module-BhO_OJ1S.js";
 const D = (t, a, c, l) => {
   const o = t.reduce((i, s) => {
     const { groupName: e, ...m } = s;

package/dist/components/OverflowTooltip/OverflowTooltip.d.ts

@@ -15,7 +15,7 @@ type OverflowTooltipProps = {
 };
 /**
  * A component that displays a tooltip when the text is overflowing.
- * It can be wrapped around Element's Typography components (e.g. TypoDisplay).
+ * It can be wrapped around Element's Typography components (e.g. TypoDisplay) or single chips (see {@link ChipCard}).
  * It clones the child element and adds the tooltip functionality.
  *
  * Hint: It was not written as a component that directly takes the Typography string as child,

package/dist/components/OverflowTooltip/OverflowTooltip.js

@@ -1,40 +1,41 @@
 import { jsxs as p, Fragment as a, jsx as s } from "react/jsx-runtime";
-import { TypoBody as c } from "@element/react-components";
-import { useState as d, useMemo as h, cloneElement as f } from "react";
-import { H as w } from "../../react-tooltip.min-BzHiZW8k.js";
-import { s as u } from "../../overflowTooltip.module-BN3bp9Cj.js";
-const k = ({ id: e, text: l, children: t }) => {
-  const [r, i] = d(!1), m = h(
-    () => f(t, {
-      "data-tooltip-id": e,
+import { TypoBody as h } from "@element/react-components";
+import { useState as c, useMemo as d, cloneElement as f } from "react";
+import { H as W } from "../../react-tooltip.min-BzHiZW8k.js";
+import { s as w } from "../../overflowTooltip.module-YyRN2MGc.js";
+import { hasChildWithGreaterWidth as x } from "./OverflowTooltipService.js";
+const H = ({ id: t, text: i, children: e }) => {
+  const [l, r] = c(!1), m = d(
+    () => f(e, {
+      "data-tooltip-id": t,
       onMouseEnter: ({ currentTarget: o }) => {
-        const n = o.clientWidth < o.scrollWidth || o.clientHeight < o.scrollHeight;
-        i(n);
+        const n = o.clientWidth < o.scrollWidth || o.clientHeight < o.scrollHeight || x(o, o.parentElement?.clientWidth);
+        r(n);
       },
-      className: `${u.truncate} ${t.props.className}`
+      className: `${w.truncate} ${e.props.className}`
     }),
-    [t, e]
+    [e, t]
   );
   return /* @__PURE__ */ p(a, { children: [
     m,
     /* @__PURE__ */ s(
-      w,
+      W,
       {
-        id: e,
+        id: t,
         noArrow: !0,
         place: "bottom",
         clickable: !0,
-        hidden: !r,
+        hidden: !l,
         style: {
           whiteSpace: "normal",
           maxWidth: "90%",
           wordBreak: "break-word"
         },
-        children: /* @__PURE__ */ s(c, { level: 2, children: l })
+        children: /* @__PURE__ */ s(h, { level: 2, children: i })
       }
     )
   ] });
 };
 export {
-  k as OverflowTooltip
+  H as OverflowTooltip
 };

package/dist/components/OverflowTooltip/OverflowTooltipService.d.ts

@@ -0,0 +1 @@
+export declare const hasChildWithGreaterWidth: (element: HTMLElement, parentWidth: number | undefined) => boolean;

package/dist/components/OverflowTooltip/OverflowTooltipService.js

@@ -0,0 +1,11 @@
+const f = (t, e) => {
+  if (!e)
+    return !0;
+  for (const r of t.children)
+    if (r instanceof HTMLElement && (r.offsetWidth > e || f(r, e)))
+      return !0;
+  return !1;
+};
+export {
+  f as hasChildWithGreaterWidth
+};

package/dist/hooks/useBreakpoints.d.ts

@@ -19,9 +19,28 @@
  * - isDesktopNavbar: lg-nav, xl-nav, xxl-nav
  * @returns {Object} An object with the current breakpoint
  */
-export declare const useBreakpoints: (navBarWidth?: number) => {
+export declare const useBreakpoints: () => {
     isMobile: boolean;
     isTablet: boolean;
     isDesktop: boolean;
     isDesktopNavbar: boolean;
 };
+/**
+ * a hook that returns all breakpoints that are in the range of the desktop size (greater than 840px)
+ * - lg: 840-1023px
+ * - xl: 1024-1439px
+ * - xxl: 1440px and up
+ * - lg-nav: (840 + 256) - (1023 + 256)px
+ * - xl-nav: (1024 + 256) - (1439 + 256)px
+ * - xxl-nav: (1440 + 256)px and up
+ * @param navBarWidth
+ * @returns
+ */
+export declare const useDesktopBreakpoints: (navBarWidth?: number) => {
+    isLgNavbar: boolean;
+    isXlNavbar: boolean;
+    isXxlNavbar: boolean;
+    isLg: boolean;
+    isXl: boolean;
+    isXxl: boolean;
+};

package/dist/hooks/useBreakpoints.js

@@ -1,5 +1,6 @@
 import "react";
-import { u as p } from "../useBreakpoints-BNeVhjjZ.js";
+import { u as p, b as r } from "../useBreakpoints-MzTZ0tCT.js";
 export {
-  p as useBreakpoints
+  p as useBreakpoints,
+  r as useDesktopBreakpoints
 };

package/dist/hooks/useBreakpoints.test.js

@@ -1,5 +1,5 @@
 import { r as t, w as s } from "../react.esm-Dy4VzU4L.js";
-import { u as o } from "../useBreakpoints-BNeVhjjZ.js";
+import { u as o } from "../useBreakpoints-MzTZ0tCT.js";
 import { d as a, t as i, g as r } from "../vi.JYQecGiw-BbUbJcT8.js";
 a("useBreakpoint Test", () => {
   i("returns object", () => {

package/dist/listArea.module-BhO_OJ1S.js

@@ -0,0 +1,20 @@
+import "./assets/listArea.css";
+const t = "_fullWidth_zewqs_1", e = "_mainElevation_zewqs_5", n = "_searchbar_zewqs_11", o = "_roundedBottom_zewqs_19", i = "_primaryText_zewqs_24", s = "_list_zewqs_28", _ = "_listItem_zewqs_56", r = "_trailingIcon_zewqs_60", l = "_groupedListItem_zewqs_72", c = "_iconColor_zewqs_76", a = "_overlineTitle_zewqs_80", m = "_noOverlineTitle_zewqs_85", u = "_truncate_zewqs_89", q = "_truncateOverlineText_zewqs_100", z = {
+  fullWidth: t,
+  mainElevation: e,
+  searchbar: n,
+  roundedBottom: o,
+  primaryText: i,
+  list: s,
+  listItem: _,
+  trailingIcon: r,
+  groupedListItem: l,
+  iconColor: c,
+  overlineTitle: a,
+  noOverlineTitle: m,
+  truncate: u,
+  truncateOverlineText: q
+};
+export {
+  z as s
+};

package/dist/main.d.ts

@@ -2,6 +2,7 @@ export { AlertBanner } from './components/AlertBanner/AlertBanner';
 export { BaseView } from './components/BaseView/BaseView';
 export { BasicHeading } from './components/BasicHeading/BasicHeading';
 export { BlockView } from './components/BlockView/BlockView';
+export { ChipCard } from './components/ChipCard/ChipCard';
 export { ContextMenu } from './components/ContextMenu/ContextMenu';
 export { DeleteModal } from './components/DeleteModal/DeleteModal';
 export { Disclaimer } from './components/Disclaimer/Disclaimer';

package/dist/main.js

@@ -3,64 +3,66 @@ import { AlertBanner as t } from "./components/AlertBanner/AlertBanner.js";
 import { BaseView as p } from "./components/BaseView/BaseView.js";
 import { BasicHeading as x } from "./components/BasicHeading/BasicHeading.js";
 import { BlockView as a } from "./components/BlockView/BlockView.js";
-import { ContextMenu as c } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as s } from "./components/DeleteModal/DeleteModal.js";
-import { Disclaimer as d } from "./components/Disclaimer/Disclaimer.js";
-import { EmptyView as S } from "./components/EmptyView/EmptyView.js";
+import { ChipCard as c } from "./components/ChipCard/ChipCard.js";
+import { ContextMenu as s } from "./components/ContextMenu/ContextMenu.js";
+import { DeleteModal as F } from "./components/DeleteModal/DeleteModal.js";
+import { Disclaimer as C } from "./components/Disclaimer/Disclaimer.js";
+import { EmptyView as b } from "./components/EmptyView/EmptyView.js";
 import { Filter as u } from "./components/Filter/Filter.js";
 import { GenericTable as T } from "./components/GenericTable/GenericTable.js";
-import { HashTabView as h } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as C } from "./components/HeaderFilter/HeaderFilter.js";
-import { I } from "./Iconify-CY9lZjFd.js";
-import { InfoGroup as A } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as L } from "./components/ListArea/ListArea.js";
-import { LoadingSpinner as g } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
-import { Modal as G } from "./components/Modal/Modal.js";
-import { OverflowTooltip as E } from "./components/OverflowTooltip/OverflowTooltip.js";
-import { ScrollbarX as P, ScrollbarY as R } from "./components/Scrollbar/Scrollbar.js";
-import { SearchBar as Y } from "./components/SearchBar/SearchBar.js";
-import { VerticalDivider as q } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as K } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as Q } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormRadio as W } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as _ } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as rr } from "./components/FormComponents/FormSlider/FormSlider.js";
-import { FormText as er } from "./components/FormComponents/FormText/FormText.js";
-import { AvailableCustomIcons as mr } from "./enums/AvailableCustomIcons.js";
-import { ThemeColor as fr } from "./enums/ThemeColor.js";
-import { u as ir } from "./useBreakpoints-BNeVhjjZ.js";
-import { capitalizeFirstLetters as lr } from "./services/UtilService.js";
+import { HashTabView as k } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as I } from "./components/HeaderFilter/HeaderFilter.js";
+import { I as A } from "./Iconify-CY9lZjFd.js";
+import { InfoGroup as L } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as g } from "./components/ListArea/ListArea.js";
+import { LoadingSpinner as G } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
+import { Modal as E } from "./components/Modal/Modal.js";
+import { OverflowTooltip as P } from "./components/OverflowTooltip/OverflowTooltip.js";
+import { ScrollbarX as X, ScrollbarY as Y } from "./components/Scrollbar/Scrollbar.js";
+import { SearchBar as q } from "./components/SearchBar/SearchBar.js";
+import { VerticalDivider as K } from "./components/VerticalDivider/VerticalDivider.js";
+import { FormCheckBox as Q } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as W } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormRadio as _ } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as rr } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as er } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { FormText as mr } from "./components/FormComponents/FormText/FormText.js";
+import { AvailableCustomIcons as fr } from "./enums/AvailableCustomIcons.js";
+import { ThemeColor as ir } from "./enums/ThemeColor.js";
+import { u as lr } from "./useBreakpoints-MzTZ0tCT.js";
+import { capitalizeFirstLetters as nr } from "./services/UtilService.js";
 export {
   t as AlertBanner,
-  mr as AvailableCustomIcons,
+  fr as AvailableCustomIcons,
   p as BaseView,
   x as BasicHeading,
   a as BlockView,
-  c as ContextMenu,
-  s as DeleteModal,
-  d as Disclaimer,
-  S as EmptyView,
+  c as ChipCard,
+  s as ContextMenu,
+  F as DeleteModal,
+  C as Disclaimer,
+  b as EmptyView,
   u as Filter,
-  K as FormCheckBox,
-  Q as FormDatePicker,
-  W as FormRadio,
-  _ as FormSelect,
-  rr as FormSlider,
-  er as FormText,
+  Q as FormCheckBox,
+  W as FormDatePicker,
+  _ as FormRadio,
+  rr as FormSelect,
+  er as FormSlider,
+  mr as FormText,
   T as GenericTable,
-  h as HashTabView,
-  C as HeaderFilter,
-  I as Iconify,
-  A as InfoGroup,
-  L as ListArea,
-  g as LoadingSpinner,
-  G as Modal,
-  E as OverflowTooltip,
-  P as ScrollbarX,
-  R as ScrollbarY,
-  Y as SearchBar,
-  fr as ThemeColor,
-  q as VerticalDivider,
-  lr as capitalizeFirstLetters,
-  ir as useBreakpoints
+  k as HashTabView,
+  I as HeaderFilter,
+  A as Iconify,
+  L as InfoGroup,
+  g as ListArea,
+  G as LoadingSpinner,
+  E as Modal,
+  P as OverflowTooltip,
+  X as ScrollbarX,
+  Y as ScrollbarY,
+  q as SearchBar,
+  ir as ThemeColor,
+  K as VerticalDivider,
+  nr as capitalizeFirstLetters,
+  lr as useBreakpoints
 };

package/dist/{overflowTooltip.module-BN3bp9Cj.js → overflowTooltip.module-YyRN2MGc.js}

@@ -1,5 +1,5 @@
 import "./assets/overflowTooltip.css";
-const t = "_truncate_m48xn_1", s = {
+const t = "_truncate_wgwcv_1", s = {
   truncate: t
 };
 export {

package/dist/useBreakpoints-MzTZ0tCT.js

@@ -0,0 +1,45 @@
+import { useState as p, useEffect as m } from "react";
+const t = (s) => {
+  const [n, i] = p(!1);
+  return m(
+    () => {
+      const e = window.matchMedia(s);
+      i(e.matches);
+      const a = (o) => i(o.matches);
+      return e.addEventListener("change", a), () => e.removeEventListener("change", a);
+    },
+    []
+    // Empty array ensures effect is only run on mount and unmount
+  ), n;
+}, h = () => {
+  const { isLgNavbar: s, isXlNavbar: n, isXxlNavbar: i, isLg: e, isXl: a, isXxl: o } = c(), r = t("(max-width: 599px)"), d = t("(min-width: 600px) and (max-width: 719px)"), x = t("(min-width: 720px) and (max-width: 839px)");
+  return {
+    isMobile: r,
+    isTablet: d || x,
+    isDesktop: e || a || o,
+    isDesktopNavbar: s || n || i
+  };
+}, c = (s = 256) => {
+  const n = t(
+    `(min-width: ${840 + s}px) and (max-width: ${1023 + s}px)`
+  ), i = t(
+    `(min-width: ${1024 + s}px) and (max-width: ${1439 + s}px)`
+  ), e = t(`(min-width: ${1440 + s}px)`), a = t("(min-width: 840px) and (max-width: 1023px)"), o = t("(min-width: 1024px) and (max-width: 1439px)"), r = t("(min-width: 1440px)");
+  return {
+    isLgNavbar: n,
+    isXlNavbar: i,
+    isXxlNavbar: e,
+    isLg: a,
+    isXl: o,
+    isXxl: r
+  };
+}, w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  useBreakpoints: h,
+  useDesktopBreakpoints: c
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  w as a,
+  c as b,
+  h as u
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.7951",
+  "version": "0.0.8286",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",

package/dist/listArea.module-CGpHPOji.js

@@ -1,20 +0,0 @@
-import "./assets/listArea.css";
-const t = "_fullWidth_1norc_1", n = "_mainElevation_1norc_5", o = "_searchbar_1norc_11", e = "_roundedBottom_1norc_19", r = "_primaryText_1norc_24", i = "_list_1norc_28", c = "_listItem_1norc_56", _ = "_trailingIcon_1norc_60", l = "_groupedListItem_1norc_72", s = "_iconColor_1norc_76", a = "_overlineTitle_1norc_80", m = "_noOverlineTitle_1norc_85", u = "_truncate_1norc_89", d = "_truncateOverlineText_1norc_99", T = {
-  fullWidth: t,
-  mainElevation: n,
-  searchbar: o,
-  roundedBottom: e,
-  primaryText: r,
-  list: i,
-  listItem: c,
-  trailingIcon: _,
-  groupedListItem: l,
-  iconColor: s,
-  overlineTitle: a,
-  noOverlineTitle: m,
-  truncate: u,
-  truncateOverlineText: d
-};
-export {
-  T as s
-};

package/dist/useBreakpoints-BNeVhjjZ.js

@@ -1,33 +0,0 @@
-import { useState as p, useEffect as r } from "react";
-const t = (s) => {
-  const [a, i] = p(!1);
-  return r(
-    () => {
-      const e = window.matchMedia(s);
-      i(e.matches);
-      const n = (o) => i(o.matches);
-      return e.addEventListener("change", n), () => e.removeEventListener("change", n);
-    },
-    []
-    // Empty array ensures effect is only run on mount and unmount
-  ), a;
-}, h = (s = 256) => {
-  const a = t("(max-width: 599px)"), i = t("(min-width: 600px) and (max-width: 719px)"), e = t("(min-width: 720px) and (max-width: 839px)"), n = t("(min-width: 840px) and (max-width: 1023px)"), o = t("(min-width: 1024px) and (max-width: 1439px)"), d = t("(min-width: 1440px)"), c = t(
-    `(min-width: ${840 + s}px) and (max-width: ${1023 + s}px)`
-  ), x = t(
-    `(min-width: ${1024 + s}px) and (max-width: ${1439 + s}px)`
-  ), m = t(`(min-width: ${1440 + s}px)`);
-  return {
-    isMobile: a,
-    isTablet: i || e,
-    isDesktop: n || o || d,
-    isDesktopNavbar: c || x || m
-  };
-}, u = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  useBreakpoints: h
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  u as a,
-  h as u
-};