@hortiview/shared-components 0.0.4993 → 0.0.5053

package/README.md

@@ -27,6 +27,7 @@ Additionally the library provides form components using [react-hook-form](https:
 
 ## Available packages:
 
+1. [AlertBanner](#alertbanner)
 1. [BaseView](#baseview)
 1. [BasicHeading](#basicheading)
 1. [BlockView](#blockview)
@@ -50,6 +51,20 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [SearchBar](#searchbar)
 1. [VerticalDivider](#verticaldivider)
 
+### AlertBanner
+
+Presents an Banner containing important messages. Can used in different colors and you can add an optional action.
+
+```typescript
+import { AlertBanner } from '@hortiview/shared-components';
+
+<AlertBanner 
+    text='My Alert' 
+    color='danger' // | 'info' | 'success' 
+    action={<MyButton />} 
+/>;
+```
+
 ### BaseView
 
 Can used to show a kind off main and detail view. On the left side you will have a list of elements and on the right a detail section of the element selected.
@@ -437,6 +452,7 @@ const fields: FieldItem[] = [
 ```
 
 You can also render a multiline section, that receives an array if FieldItem-Arrays instead of a single FieldItem-Array
+
 ```typescript
 import { InfoGroup } from '@hortiview/shared-components';
 
@@ -453,7 +469,7 @@ const multiLineFields: FieldItem[][] = [
     { label: 'FieldTitle2', value: 'Value2' },
     { label: 'FieldTitle3', value: 'Value3' },
     { label: 'FieldTitle4', value: 'Value4' },
-  ]  
+  ]
 ]
 
 <InfoGroup fields={multiLineFields} />

package/dist/assets/AlertBanner.css

@@ -0,0 +1 @@
+._messageContainer_92aoe_1{border-radius:.25rem;padding:.5rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._message_92aoe_1{color:var(--lmnt-theme-on-surface-active);font-weight:700}._info_92aoe_13{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_92aoe_18{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_92aoe_23{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type AlertBannerProps = {
+    text: string | JSX.Element;
+    color?: 'danger' | 'info' | 'success';
+    isOpen?: boolean;
+    action?: JSX.Element;
+};
+export declare const AlertBanner: ({ text, color, isOpen, action }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AlertBanner/AlertBanner.js

@@ -0,0 +1,20 @@
+import "../../assets/AlertBanner.css";
+import { jsx as e, Fragment as t, jsxs as c } from "react/jsx-runtime";
+import { Group as m, TypoBody as g } from "@element/react-components";
+import { a as _ } from "../../useBreakpoint-DROHPVxO.js";
+const l = "_messageContainer_92aoe_1", d = "_message_92aoe_1", p = "_info_92aoe_13", f = "_danger_92aoe_18", u = "_success_92aoe_23", n = {
+  messageContainer: l,
+  message: d,
+  info: p,
+  danger: f,
+  success: u
+}, A = ({ text: s, color: o = "info", isOpen: r = !0, action: a }) => {
+  const { isLg: i } = _();
+  return r ? /* @__PURE__ */ e("div", { className: `${n.messageContainer} ${n[o]}`, children: /* @__PURE__ */ c(m, { direction: i ? "horizontal" : "vertical", primaryAlign: "space-between", secondaryAlign: "center", children: [
+    typeof s == "string" ? /* @__PURE__ */ e(g, { bold: !0, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
+    a
+  ] }) }) : /* @__PURE__ */ e(t, {});
+};
+export {
+  A as AlertBanner
+};

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as e, Fragment as m } from "react/jsx-runtime";
+import { r as t, s } from "../../react.esm-C0LtovhP.js";
+import { u as i } from "../../useBreakpoint-DROHPVxO.js";
+import { AlertBanner as n } from "./AlertBanner.js";
+import { d as c, b as u, t as r, g as l, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";
+c("AlertBanner Test", () => {
+  u(() => {
+    a.spyOn(i, "useBreakpoints").mockReturnValue({
+      isXs: !1,
+      isSm: !1,
+      isMd: !1,
+      isLg: !0,
+      isXlg: !0,
+      active: "lg"
+    });
+  }), r("render AlertBanner with text", () => {
+    t(/* @__PURE__ */ e(n, { text: "Test" })), l(s.getByText("Test")).toBeInTheDocument();
+  }), r("render AlertBanner with element", () => {
+    t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), l(s.getByText("Element")).toBeInTheDocument();
+  }), r("renders AlertBanner with vertical style (flex-direction: column) when screen is small", () => {
+    a.spyOn(i, "useBreakpoints").mockReturnValue({
+      isXs: !1,
+      isSm: !0,
+      isMd: !1,
+      isLg: !1,
+      isXlg: !1,
+      active: "sm"
+    }), t(/* @__PURE__ */ e(n, { text: "Test" }));
+    const o = s.getByText("Test").closest(".lmnt.lmnt-group");
+    l(o).toHaveStyle(
+      "display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px;"
+    );
+  }), r("renders nothing when isOpen is false", () => {
+    t(/* @__PURE__ */ e(n, { text: "Test", isOpen: !1 })), l(s.queryByText("Test")).not.toBeInTheDocument();
+  });
+});

package/dist/components/HashTabView/HashTabView.js

@@ -1,59 +1,59 @@
 import "../../assets/HashTabView.css";
-import { jsx as r, jsxs as d, Fragment as w } from "react/jsx-runtime";
+import { jsx as a, jsxs as l, Fragment as w } from "react/jsx-runtime";
 import { Elevation as T, Group as o, TabBar as C, Tab as k, Padding as A } from "@element/react-components";
 import { useState as I, useEffect as L } from "react";
 import { a as N } from "../../useBreakpoint-DROHPVxO.js";
-const x = "_elevation_1rcw6_1", y = "_themeBackground_1rcw6_6", W = "_tabBar_1rcw6_10", $ = "_tabWrapper_1rcw6_16", j = "_tabButton_1rcw6_20", E = "_childContainer_1rcw6_24", z = "_childContainerLg_1rcw6_28", a = {
+const x = "_elevation_1rcw6_1", y = "_themeBackground_1rcw6_6", W = "_tabBar_1rcw6_10", j = "_tabWrapper_1rcw6_16", E = "_tabButton_1rcw6_20", $ = "_childContainer_1rcw6_24", z = "_childContainerLg_1rcw6_28", t = {
   elevation: x,
   themeBackground: y,
   tabBar: W,
-  tabWrapper: $,
-  tabButton: j,
-  childContainer: E,
+  tabWrapper: j,
+  tabButton: E,
+  childContainer: $,
   childContainerLg: z
-}, _ = (n, t, c) => !c || !t || !n ? 0 : n.findIndex((i) => `#${i.hash}` === t) ?? 0, q = ({
+}, p = (n, r) => !r || !n ? 0 : n.findIndex((c) => c.hash === r.replace("#", "")) ?? 0, q = ({
   tabs: n,
-  hasHash: t = !0,
+  hasHash: r = !0,
   hash: c = "",
-  clusterAlign: i = "start",
-  hasClusteredTabs: g,
-  children: l,
-  verticalGap: h = "none",
+  clusterAlign: u = "start",
+  hasClusteredTabs: _,
+  children: i,
+  verticalGap: g = "none",
   elevation: B = 0,
   backgroundColor: v = "themeBackground",
   onChange: b
 }) => {
-  const [m, p] = I(_(n, c, t)), { isLg: s } = N();
+  const [d, h] = I(p(n, c)), { isLg: s } = N();
   L(() => {
-    const e = _(n, c, t);
-    p(e);
-  }, [c, n, t]);
+    const e = p(n, c);
+    h(e);
+  }, [c, n, r]);
   const f = (e) => {
-    const u = n[e].hash;
-    u != null && t && (window.location.hash = u), p(e), b?.(e);
+    const m = n[e].hash;
+    m != null && r && (window.location.hash = m), h(e), b?.(e);
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ a(
     T,
     {
       elevation: B,
-      className: `${a.elevation} ${v === "none" ? "" : a.themeBackground}`,
-      children: /* @__PURE__ */ d(o, { direction: "vertical", gap: h, secondaryAlign: "stretch", children: [
-        /* @__PURE__ */ d(o, { direction: s ? "horizontal" : "vertical", className: a.tabWrapper, children: [
-          /* @__PURE__ */ r(
+      className: `${t.elevation} ${v === "none" ? "" : t.themeBackground}`,
+      children: /* @__PURE__ */ l(o, { direction: "vertical", gap: g, secondaryAlign: "stretch", children: [
+        /* @__PURE__ */ l(o, { direction: s ? "horizontal" : "vertical", className: t.tabWrapper, children: [
+          /* @__PURE__ */ a(
             C,
             {
-              className: a.tabBar,
-              clustered: s ? g : !1,
-              clusterAlign: i,
+              className: t.tabBar,
+              clustered: s ? _ : !1,
+              clusterAlign: u,
               variant: "surface",
-              activeTabIndex: m,
+              activeTabIndex: d,
               onTabActivated: f,
-              children: n.map((e) => /* @__PURE__ */ r(
+              children: n.map((e) => /* @__PURE__ */ a(
                 k,
                 {
                   icon: e.leadingIcon,
-                  className: l ? a.tabButton : "",
-                  children: /* @__PURE__ */ d(o, { gap: "dense", children: [
+                  className: i ? t.tabButton : "",
+                  children: /* @__PURE__ */ l(o, { gap: "dense", children: [
                     e.title,
                     e.trailingIcon
                   ] })
@@ -62,16 +62,16 @@ const x = "_elevation_1rcw6_1", y = "_themeBackground_1rcw6_6", W = "_tabBar_1rc
               ))
             }
           ),
-          l ? /* @__PURE__ */ r(
+          i ? /* @__PURE__ */ a(
             A,
             {
               variant: "dense",
-              className: s ? a.childContainer : a.childContainerLg,
-              children: /* @__PURE__ */ r(o, { gap: "dense", primaryAlign: "center", secondaryAlign: "center", children: l })
+              className: s ? t.childContainer : t.childContainerLg,
+              children: /* @__PURE__ */ a(o, { gap: "dense", primaryAlign: "center", secondaryAlign: "center", children: i })
             }
-          ) : /* @__PURE__ */ r(w, {})
+          ) : /* @__PURE__ */ a(w, {})
         ] }),
-        n[m]?.component
+        n[d]?.component
       ] })
     }
   );

package/dist/components/ListArea/ListAreaService.d.ts

@@ -22,15 +22,15 @@ export declare const getGroupedItems: (items: ListElement[], pathname: string, i
  */
 export declare const getListedItems: (items: ListElement[], pathname: string, itemClassName: string, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
     select: boolean;
-    primaryText: import("react/jsx-runtime").JSX.Element;
+    primaryText: JSX.Element;
     secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
     overlineText: string | undefined;
-    trailingBlock: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode>;
-    leadingBlock: string | import("react/jsx-runtime").JSX.Element | undefined;
+    trailingBlock: string | number | boolean | JSX.Element | Iterable<import("react").ReactNode>;
+    leadingBlock: string | JSX.Element | undefined;
     value: string | undefined;
     componentProps: {
-        leadingBlockType: "icon" | "checkbox" | "radio" | "switch" | "avatar" | "badge" | "image" | "lgImage" | "meta" | "thumbnail";
-        trailingBlockType: "icon" | "checkbox" | "radio" | "switch" | "avatar" | "badge" | "image" | "lgImage" | "meta" | "thumbnail";
+        leadingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
+        trailingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
         className: string;
         onClick: (_: ChangeEvent, value: string) => void | undefined;
         tag: string | import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>> | undefined;
@@ -48,15 +48,15 @@ export declare const getListedItems: (items: ListElement[], pathname: string, it
  */
 export declare const mapListElement: (element: ListElement, pathname: string | undefined, itemClassName: string | undefined, isGrouped: boolean, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
     select: boolean;
-    primaryText: import("react/jsx-runtime").JSX.Element;
+    primaryText: JSX.Element;
     secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
     overlineText: string | undefined;
-    trailingBlock: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode>;
-    leadingBlock: string | import("react/jsx-runtime").JSX.Element | undefined;
+    trailingBlock: string | number | boolean | JSX.Element | Iterable<import("react").ReactNode>;
+    leadingBlock: string | JSX.Element | undefined;
     value: string | undefined;
     componentProps: {
-        leadingBlockType: "icon" | "checkbox" | "radio" | "switch" | "avatar" | "badge" | "image" | "lgImage" | "meta" | "thumbnail";
-        trailingBlockType: "icon" | "checkbox" | "radio" | "switch" | "avatar" | "badge" | "image" | "lgImage" | "meta" | "thumbnail";
+        leadingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
+        trailingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
         className: string;
         onClick: (_: ChangeEvent, value: string) => void | undefined;
         tag: string | import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>> | undefined;

package/dist/main.d.ts

@@ -1,4 +1,5 @@
 import './styles/main.css';
+export { AlertBanner } from './components/AlertBanner/AlertBanner';
 export { BaseView } from './components/BaseView/BaseView';
 export { BasicHeading } from './components/BasicHeading/BasicHeading';
 export { BlockView } from './components/BlockView/BlockView';

package/dist/main.js

@@ -1,52 +1,54 @@
 import "./assets/main.css";
-import { BaseView as t } from "./components/BaseView/BaseView.js";
-import { BasicHeading as p } from "./components/BasicHeading/BasicHeading.js";
-import { BlockView as f } from "./components/BlockView/BlockView.js";
-import { ContextMenu as i } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as c } from "./components/DeleteModal/DeleteModal.js";
-import { Disclaimer as F } from "./components/Disclaimer/Disclaimer.js";
-import { EmptyView as d } from "./components/EmptyView/EmptyView.js";
-import { HashTabView as S } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as b } from "./components/HeaderFilter/HeaderFilter.js";
-import { Iconify as u } from "./components/Iconify/Iconify.js";
-import { InfoGroup as D } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as C } from "./components/ListArea/ListArea.js";
-import { ScrollbarX as I, ScrollbarY as v } from "./components/Scrollbar/Scrollbar.js";
-import { SearchBar as A } from "./components/SearchBar/SearchBar.js";
-import { VerticalDivider as M } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as g } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as E } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormRadio as P } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as X } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as j } from "./components/FormComponents/FormSlider/FormSlider.js";
-import { FormText as J } from "./components/FormComponents/FormText/FormText.js";
-import { AvailableCustomIcons as N } from "./enums/AvailableCustomIcons.js";
-import { a as Q } from "./useBreakpoint-DROHPVxO.js";
-import { capitalizeFirstLetters as W } from "./services/UtilService.js";
+import { AlertBanner as t } from "./components/AlertBanner/AlertBanner.js";
+import { BaseView as p } from "./components/BaseView/BaseView.js";
+import { BasicHeading as f } from "./components/BasicHeading/BasicHeading.js";
+import { BlockView as i } from "./components/BlockView/BlockView.js";
+import { ContextMenu as c } from "./components/ContextMenu/ContextMenu.js";
+import { DeleteModal as n } from "./components/DeleteModal/DeleteModal.js";
+import { Disclaimer as B } from "./components/Disclaimer/Disclaimer.js";
+import { EmptyView as S } from "./components/EmptyView/EmptyView.js";
+import { HashTabView as b } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as u } from "./components/HeaderFilter/HeaderFilter.js";
+import { Iconify as D } from "./components/Iconify/Iconify.js";
+import { InfoGroup as A } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as H } from "./components/ListArea/ListArea.js";
+import { ScrollbarX as v, ScrollbarY as y } from "./components/Scrollbar/Scrollbar.js";
+import { SearchBar as M } from "./components/SearchBar/SearchBar.js";
+import { VerticalDivider as g } from "./components/VerticalDivider/VerticalDivider.js";
+import { FormCheckBox as E } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as P } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormRadio as X } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as j } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as J } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { FormText as N } from "./components/FormComponents/FormText/FormText.js";
+import { AvailableCustomIcons as Q } from "./enums/AvailableCustomIcons.js";
+import { a as W } from "./useBreakpoint-DROHPVxO.js";
+import { capitalizeFirstLetters as _ } from "./services/UtilService.js";
 export {
-  N as AvailableCustomIcons,
-  t as BaseView,
-  p as BasicHeading,
-  f as BlockView,
-  i as ContextMenu,
-  c as DeleteModal,
-  F as Disclaimer,
-  d as EmptyView,
-  g as FormCheckBox,
-  E as FormDatePicker,
-  P as FormRadio,
-  X as FormSelect,
-  j as FormSlider,
-  J as FormText,
-  S as HashTabView,
-  b as HeaderFilter,
-  u as Iconify,
-  D as InfoGroup,
-  C as ListArea,
-  I as ScrollbarX,
-  v as ScrollbarY,
-  A as SearchBar,
-  M as VerticalDivider,
-  W as capitalizeFirstLetters,
-  Q as useBreakpoints
+  t as AlertBanner,
+  Q as AvailableCustomIcons,
+  p as BaseView,
+  f as BasicHeading,
+  i as BlockView,
+  c as ContextMenu,
+  n as DeleteModal,
+  B as Disclaimer,
+  S as EmptyView,
+  E as FormCheckBox,
+  P as FormDatePicker,
+  X as FormRadio,
+  j as FormSelect,
+  J as FormSlider,
+  N as FormText,
+  b as HashTabView,
+  u as HeaderFilter,
+  D as Iconify,
+  A as InfoGroup,
+  H as ListArea,
+  v as ScrollbarX,
+  y as ScrollbarY,
+  M as SearchBar,
+  g as VerticalDivider,
+  _ as capitalizeFirstLetters,
+  W as useBreakpoints
 };

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.4993",
+  "version": "0.0.5053",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",