@hortiview/shared-components 0.0.1 → 0.0.4529

package/README.md

@@ -2,33 +2,213 @@
 
 [![Build Status](https://dev.azure.com/sdundc/HV%20Platform/_apis/build/status%2FHortiView-Frontend-Shared-Publish?branchName=main)](https://dev.azure.com/sdundc/HV%20Platform/_build/latest?definitionId=88&branchName=main)
 
-# React + TypeScript + Vite
+# HortiView Shared Components
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a shared component library. It should used in the HortiView platform and its modules.
 
-Currently, two official plugins are available:
+## Install
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+`npm i @hortiview/shared-components`
 
-## Expanding the ESLint configuration
+`yarn add @hortiview/shared-components`
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Remarks
 
-- Configure the top-level `parserOptions` property like this:
+For the best experience use [react-router](https://reactrouter.com/en/main) in your solution, because some of the component rely on properties like pathname, hash or components like `Link` out of `react-router`.
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
+## Available packages:
+
+1. [BaseView](#baseview)
+1. [BasicHeading](#basicheading)
+1. [BlockView](#blockview)
+1. [EmptyView](#emptyview)
+1. [HashTabView](#hashtabview)
+1. [Iconify](#iconify)
+1. [ListArea](#listarea)
+1. [SearchBar](#searchbar)
+1. [VerticalDivider](#verticaldivider)
+
+### 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.
+
+```typescript
+import { BaseListElement, BaseView } from '@hortiview/shared-components';
+import { Link, useLocation } from 'react-router-dom';
+
+...
+const { pathname } = useLocation();
+
+const elements: BaseListElement[] = [{
+    id: '1',
+    title: 'First',
+    subTitle: 'First Subtilte',
+    type: 'Primary',
+    icon: 'grid_view',
+    route: '/first',
+    component: <MyComponentToShowOnClick />,
   },
-}
+  {
+    id: '2',
+    title: 'Second',
+    subTitle: 'Second Subtilte',
+    type: 'Primary',
+    icon: 'add',
+    route: '/second',
+    component: <MyComponentToShowOnClickSecond />,
+  }];
+
+...
+
+return (
+  <BaseView
+      routerLinkElement={Link}
+      pathname={pathname}
+      elements={elements}
+      heading='Header'
+      hasSearch
+      emptyText='Empty'
+    />
+  );
+```
+
+### BasicHeading
+
+Provides a heading component with optional children which are rendered on the right side of the heading.
+
+```typescript
+import { BasicHeading } from '@hortiview/shared-components';
+
+...
+  <BasicHeading heading={'Header'}>
+      <button>Test</button>
+  </BasicHeading>
+...
+
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+### BlockView
+
+This is a component showing blocks in a row/column view.
+
+```typescript
+import { BlockView, BlockDto } from '@hortiview/shared-components';
+
+...
+  const blocks: BlockDto = [{
+    position: { row: 1, column:1 },
+    fieldId: '1',
+  }];
+
+  <BlockView
+    blocks={blocks}
+    columns={1}
+    rows={1}
+  />
+...
+
+```
+
+### EmptyView
+
+A basic view if no content is available.
+
+```typescript
+import { EmptyView } from '@hortiview/shared-components';
+
+<EmptyView title='No Content' subtitle='nothing' icon='grass' />;
+```
+
+### HashTabView
+
+A tab view component, which can use the hash value in the url to render the tab regarding to the hash. For the best experience use `react-router`.
+
+```typescript
+import { HashTabView, HashTab } from '@hortiview/shared-components';
+
+const tabs: HashTab[] = [
+  {
+    title: 'My Map',
+    hash: 'map',
+    leadingIcon: 'map',
+    component: <>My map Component to show in the tab</>,
+  },
+];
+
+<HashTabView tabs={tabs} elevation={1} />;
+```
+
+### Iconify
+
+Provides some custom icons based on the elements Icon API. Currently supported:
+
+- block
+- block-delete
+- cloud-rain
+- cloud-sunny
+- cloud
+- farm-delete
+- farm
+- greenhouse-delete
+- subscription
+- wind
+
+```typescript
+import { Iconify } from '@hortiview/shared-components';
+
+<Iconify icon='wind' iconSize='large' />;
+```
+
+### ListArea
+
+Shows some items in a list. The list can be used as a navigation list and provides search. For the best experience use `react-router`.
+
+```typescript
+import { BaseListElement, ListArea } from '@hortiview/shared-components';
+import { Link, useLocation } from 'react-router-dom';
+
+const { pathname } = useLocation();
+
+const elements: BaseListElement[] = [{
+  route: `/my/route/${1}`,
+  id: 1,
+  title: 'name',
+  subTitle: 'sub-name',
+  icon: <Icon icon={'grass'} />,
+}]
+
+<ListArea
+  hasSearch
+  searchPlaceholder={'Search....'}
+  elements={elements}
+  isSorted={false}
+  pathname={pathname}
+  routerLinkElement={Link}
+/>;
+```
+
+### SearchBar
+
+Provides a searchbar component.
+
+```typescript
+import { SearchBar } from '@hortiview/shared-components';
+
+const [searchValue, setSearchValue] = useState('');
+<SearchBar
+  searchTerm={searchValue}
+  setSearchTerm={setSearchValue}
+  dense
+  placeholder={'Search....'}
+/>;
+```
+
+### VerticalDivider
+
+Provides a simple vertical divider.
+
+```typescript
+import { VerticalDivider } from '@hortiview/shared-components';
+
+<VerticalDivider className={'custom'} height='3rem' />;
+```

package/dist/ListAreaService-BPp_O2BH.js

@@ -0,0 +1,67 @@
+import "./assets/ListAreaService.css";
+import { jsx as s } from "react/jsx-runtime";
+import { TypoButton as b, TypoSubtitle as q, TypoBody as k, Icon as L } from "@element/react-components";
+import { Iconify as C } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as x } from "./enums/AvailableCustomIcons.js";
+const E = "_fullWidth_1l0qh_1", N = "_mainElevation_1l0qh_5", W = "_searchbar_1l0qh_11", $ = "_roundedBottom_1l0qh_19", j = "_list_1l0qh_24", S = "_listItem_1l0qh_48", w = "_trailingIcon_1l0qh_52", A = "_groupedListItem_1l0qh_64", _ = {
+  fullWidth: E,
+  mainElevation: N,
+  searchbar: W,
+  roundedBottom: $,
+  list: j,
+  listItem: S,
+  trailingIcon: w,
+  groupedListItem: A
+}, J = (o, i, n, r) => {
+  const l = o.reduce((e, a) => {
+    const { groupName: t, ...m } = a;
+    return !t || typeof t != "string" || (e[t] || (e[t] = {
+      groupName: /* @__PURE__ */ s(b, { children: t }),
+      id: t,
+      items: []
+    }), e[t].items = [
+      ...e[t].items,
+      g(m, i, n, !0, r)
+    ]), e;
+  }, {});
+  return Object.values(l);
+}, K = (o, i, n, r) => o.map((l) => g(l, i, n, !1, r)), g = (o, i, n, r, l) => {
+  const {
+    title: e,
+    subTitle: a,
+    route: t,
+    value: m,
+    noNavigation: d,
+    disabled: I,
+    icon: h,
+    iconType: p,
+    trailingIcon: v,
+    trailingIconType: y,
+    actionButton: f,
+    onClick: T,
+    customTitle: u
+  } = o, c = i === t;
+  return {
+    select: c,
+    primaryText: u ?? /* @__PURE__ */ s(q, { level: 1, bold: c, themeColor: c ? "primary" : void 0, children: e }),
+    secondaryText: a && !u ? /* @__PURE__ */ s(k, { level: 2, themeColor: c ? "primary" : void 0, children: a }) : void 0,
+    trailingBlock: f ?? v ?? /* @__PURE__ */ s(L, { icon: "arrow_right" }),
+    leadingBlock: G(h),
+    nonInteractive: I,
+    value: m,
+    componentProps: {
+      leadingBlockType: p ?? "icon",
+      trailingBlockType: y ?? "icon",
+      className: `${p === "avatar" ? "" : _.listItem} ${n} ${r ? _.groupedListItem : ""}`,
+      onClick: (O, B) => T?.(B),
+      tag: d ? void 0 : l ?? "a",
+      to: d ? void 0 : t
+    }
+  };
+}, G = (o) => typeof o == "string" && o in x ? /* @__PURE__ */ s(C, { icon: o }) : o;
+export {
+  K as a,
+  J as g,
+  g as m,
+  _ as s
+};

package/dist/assets/BaseView.css

@@ -1 +1 @@
-._divider_1uelt_1{margin:0 2rem}
+._divider_anyyu_1{margin:0 2rem}

package/dist/assets/BasicHeading.css

@@ -1 +1 @@
-._pageHeader_1hm8h_1{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;margin-bottom:1rem;align-self:end}._headlineContainer_1hm8h_21,._actionButtonContainer_1hm8h_31{display:flex;align-items:center}._actionButtonContainer_1hm8h_31>button{max-height:48px}._content_1hm8h_49{display:flex;justify-content:space-between;gap:1.5rem}._leadingIcon_1hm8h_61{margin-right:.8rem}._headingWrapper_1hm8h_75{display:flex;align-items:center}._headingContainer_1hm8h_85{display:flex;flex-direction:column}._invisible_1hm8h_95{visibility:hidden}._withAvatar_1hm8h_103{margin-left:.25rem;padding-right:1rem;margin-top:0rem}._withAvatar_1hm8h_103>._iconContainer_1hm8h_113{scale:1.1}._iconContainer_1hm8h_113{padding-right:.5rem}
+._pageHeader_fwns1_1{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;margin-bottom:1rem;align-self:end}._headlineContainer_fwns1_11,._actionButtonContainer_fwns1_16{display:flex;align-items:center}._actionButtonContainer_fwns1_16>button{max-height:48px}._content_fwns1_25{display:flex;justify-content:space-between;gap:1.5rem}._leadingIcon_fwns1_31{margin-right:.8rem}._headingWrapper_fwns1_38{display:flex;align-items:center}._headingContainer_fwns1_43{display:flex;flex-direction:column}._invisible_fwns1_48{visibility:hidden}._withAvatar_fwns1_52{margin-left:.25rem;padding-right:1rem;margin-top:0rem}._withAvatar_fwns1_52>._iconContainer_fwns1_57{scale:1.1}._iconContainer_fwns1_57{padding-right:.5rem}

package/dist/assets/BlockView.css

@@ -1 +1 @@
-._grid_8fci1_1{display:flex;padding-bottom:0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;align-self:stretch}._black_8fci1_21{color:#000}._blockLayout_8fci1_29{padding:.5rem;gap:.5rem;display:flex;flex-direction:column;border-radius:.5rem;background:var(--secondary-color-ramp-200, #b9e5ff);width:15rem;height:15rem}._blockRow_8fci1_53{display:flex;flex-direction:row;gap:.5rem;height:100%;align-self:stretch}._block_8fci1_29{flex:auto;border-radius:.25rem;background:var(--secondary-color-ramp-600, #3599d1);align-items:center;display:flex;justify-content:center;position:relative}._block_8fci1_29._active_8fci1_91{border:2px solid var(--lmnt-theme-primary, #673ab7);background:var(--primary-color-ramp-100, #c7b7e4);margin:-2px}._block_8fci1_29._error_8fci1_103{border:2px solid var(--danger-danger, #cf2d22);background:var(--danger-color-ramp-050, #ffeaed);margin:-2px}._block_8fci1_29._empty_8fci1_115{margin:-2px;border:2px solid var(--lmnt-theme-on-surface-disabled);background:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-disabled)}._blockText_8fci1_129{display:flex;justify-content:center;position:absolute;width:1vw;height:1vh;align-items:center}
+._grid_g18cu_1{display:flex;padding-bottom:0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;align-self:stretch}._black_g18cu_11{color:#000}._blockLayout_g18cu_15{padding:.5rem;gap:.5rem;display:flex;flex-direction:column;border-radius:.5rem;background:var(--secondary-color-ramp-200, #b9e5ff);width:15rem;height:15rem}._blockRow_g18cu_27{display:flex;flex-direction:row;gap:.5rem;height:100%;align-self:stretch}._block_g18cu_15{flex:auto;border-radius:.25rem;background:var(--secondary-color-ramp-600, #3599d1);align-items:center;display:flex;justify-content:center;position:relative}._block_g18cu_15._active_g18cu_46{border:2px solid var(--lmnt-theme-primary, #673ab7);background:var(--primary-color-ramp-100, #c7b7e4);margin:-2px}._block_g18cu_15._error_g18cu_52{border:2px solid var(--danger-danger, #cf2d22);background:var(--danger-color-ramp-050, #ffeaed);margin:-2px}._block_g18cu_15._empty_g18cu_58{margin:-2px;border:2px solid var(--lmnt-theme-on-surface-disabled);background:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-disabled)}._blockText_g18cu_65{display:flex;justify-content:center;position:absolute;width:1vw;height:1vh;align-items:center}

package/dist/assets/HashTabView.css

@@ -1 +1 @@
-._elevation_1whcw_1{width:100%;border-radius:.5rem}._themeBackground_1whcw_11{background:var(--lmnt-theme-background)}._tabBar_1whcw_19{background:transparent;align-self:flex-end;border-radius:.5rem}._tabWrapper_1whcw_31{border-bottom:1px solid var(--lmnt-theme-on-surface-stroke)}._tabButton_1whcw_39{height:3.5rem!important}._childContainer_1whcw_47{width:25rem}._childContainerLg_1whcw_55{width:100%}
+._elevation_1rcw6_1{width:100%;border-radius:.5rem}._themeBackground_1rcw6_6{background:var(--lmnt-theme-background)}._tabBar_1rcw6_10{background:transparent;align-self:flex-end;border-radius:.5rem}._tabWrapper_1rcw6_16{border-bottom:1px solid var(--lmnt-theme-on-surface-stroke)}._tabButton_1rcw6_20{height:3.5rem!important}._childContainer_1rcw6_24{width:25rem}._childContainerLg_1rcw6_28{width:100%}

package/dist/assets/Iconify.css

@@ -1 +1 @@
-._image_diw9r_1>svg{width:inherit;height:inherit;color:inherit}
+._image_178sv_1>svg{width:inherit;height:inherit;color:inherit}

package/dist/assets/ListAreaService.css

@@ -1 +1 @@
-._fullWidth_tiknm_1{width:100%}._mainElevation_tiknm_9{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_tiknm_21 div{border:none}._searchbar_tiknm_21 button{margin-right:.5rem}._roundedBottom_tiknm_37{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._list_tiknm_47{padding-top:0;padding-bottom:0;overflow-y:auto}._list_tiknm_47::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_tiknm_47::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_tiknm_47::-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_tiknm_95{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_tiknm_95 i:not(._trailingIcon_tiknm_103){color:var(--lmnt-theme-on-surface-inactive)}._listItem_tiknm_95 i._trailingIcon_tiknm_103{color:var(--lmnt-theme-on-surface-disabled)}._listItem_tiknm_95 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_tiknm_127{height:4.5rem!important}
+._fullWidth_1l0qh_1{width:100%}._mainElevation_1l0qh_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_1l0qh_11 div{border:none}._searchbar_1l0qh_11 button{margin-right:.5rem}._roundedBottom_1l0qh_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._list_1l0qh_24{padding-top:0;padding-bottom:0;overflow-y:auto}._list_1l0qh_24::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_1l0qh_24::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_1l0qh_24::-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_1l0qh_48{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_1l0qh_48 i:not(._trailingIcon_1l0qh_52){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1l0qh_48 i._trailingIcon_1l0qh_52{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1l0qh_48 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_1l0qh_64{height:4.5rem!important}

package/dist/assets/SearchBar.css

@@ -1 +1 @@
-._searchbar_1fl50_1 button{color:var(--lmnt-theme-on-surface-inactive)!important}
+._searchbar_gnvwc_1 button{color:var(--lmnt-theme-on-surface-inactive)!important}

package/dist/assets/VerticalDivider.css

@@ -1 +1 @@
-._divider_dqwln_1{border-left:1px solid var(--lmnt-theme-on-surface-stroke)}
+._divider_opvom_1{border-left:1px solid var(--lmnt-theme-on-surface-stroke)}

package/dist/components/BaseView/BaseView.js

@@ -3,12 +3,12 @@ import { jsx as t, Fragment as w, jsxs as e } from "react/jsx-runtime";
 import { useMemo as n } from "react";
 import { EmptyView as x } from "../EmptyView/EmptyView.js";
 import { ListArea as k } from "../ListArea/ListArea.js";
-import { VerticalDivider as A } from "../VerticalDivider/VerticalDivider.js";
-import { u as H } from "../../useBreakpoint-DyAmuka7.js";
-import { Grid as L, GridRow as V, GridCol as u, Group as m } from "@element/react-components";
+import { VerticalDivider as y } from "../VerticalDivider/VerticalDivider.js";
+import { u as A } from "../../useBreakpoint-DyAmuka7.js";
+import { Grid as H, GridRow as L, GridCol as u, Group as m } from "@element/react-components";
 import { BasicHeading as a } from "../BasicHeading/BasicHeading.js";
-const W = "_divider_1uelt_1", _ = {
-  divider: W
+const V = "_divider_anyyu_1", W = {
+  divider: V
 }, q = ({
   action: d,
   heading: c,
@@ -22,8 +22,8 @@ const W = "_divider_1uelt_1", _ = {
   pathname: l,
   routerLinkElement: C
 }) => {
-  const { isLg: r } = H(), i = n(() => o.find((b) => b.route === l), [l, o]), B = n(() => i?.component ?? (r ? /* @__PURE__ */ t(x, { subtitle: s }) : /* @__PURE__ */ t(w, {})), [i, r, s]), G = n(() => r ? !0 : !i, [i, r]);
-  return /* @__PURE__ */ t(L, { className: f ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ e(V, { children: [
+  const { isLg: r } = A(), i = n(() => o.find((b) => b.route === l), [l, o]), B = n(() => i?.component ?? (r ? /* @__PURE__ */ t(x, { subtitle: s }) : /* @__PURE__ */ t(w, {})), [i, r, s]), G = n(() => r ? !0 : !i, [i, r]);
+  return /* @__PURE__ */ t(H, { className: f ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ e(L, { children: [
     G && /* @__PURE__ */ e(u, { desktopCol: 4, tabletCol: 12, phoneCol: 12, children: [
       /* @__PURE__ */ e(m, { direction: "vertical", fullWidth: !0, children: [
         c && /* @__PURE__ */ t(a, { heading: c, level: 4, marginBottom: 0, children: d }),
@@ -39,7 +39,7 @@ const W = "_divider_1uelt_1", _ = {
           }
         )
       ] }),
-      r && /* @__PURE__ */ t(A, { className: _.divider, height: "100%" })
+      r && /* @__PURE__ */ t(y, { className: W.divider, height: "100%" })
     ] }),
     /* @__PURE__ */ t(u, { desktopCol: 8, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ e(m, { direction: "vertical", fullWidth: !0, children: [
       /* @__PURE__ */ t(

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

@@ -1,7 +1,7 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
 import { a as l } from "../../useBreakpoint-DyAmuka7.js";
 import { BaseView as r } from "./BaseView.js";
-import { d as p, b as u, t as i, r as n, g as t, s as e, v as c, f as d } from "../../vi.JYQecGiw-D8gb8QJV.js";
+import { d as p, b as u, t as i, r as n, g as t, s as e, v as c, f as d } from "../../vi.JYQecGiw-8gz0k16C.js";
 p("BaseView Test", () => {
   u(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({

package/dist/components/BasicHeading/BasicHeading.js

@@ -1,42 +1,42 @@
 import "../../assets/BasicHeading.css";
 import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import { TypoDisplay as f, TypoBody as u, Icon as y } from "@element/react-components";
-import { u as I } from "../../useBreakpoint-DyAmuka7.js";
-import { Iconify as B } from "../Iconify/Iconify.js";
-import { AvailableCustomIcons as N } from "../../enums/AvailableCustomIcons.js";
-const H = "_pageHeader_1hm8h_1", b = "_headlineContainer_1hm8h_21", A = "_actionButtonContainer_1hm8h_31", W = "_content_1hm8h_49", $ = "_leadingIcon_1hm8h_61", w = "_headingWrapper_1hm8h_75", x = "_headingContainer_1hm8h_85", T = "_invisible_1hm8h_95", j = "_withAvatar_1hm8h_103", z = "_iconContainer_1hm8h_113", n = {
-  pageHeader: H,
-  headlineContainer: b,
-  actionButtonContainer: A,
-  content: W,
-  leadingIcon: $,
-  headingWrapper: w,
+import { TypoDisplay as C, TypoBody as u, Icon as w } from "@element/react-components";
+import { u as y } from "../../useBreakpoint-DyAmuka7.js";
+import { Iconify as I } from "../Iconify/Iconify.js";
+import { AvailableCustomIcons as B } from "../../enums/AvailableCustomIcons.js";
+const N = "_pageHeader_fwns1_1", H = "_headlineContainer_fwns1_11", b = "_actionButtonContainer_fwns1_16", A = "_content_fwns1_25", W = "_leadingIcon_fwns1_31", $ = "_headingWrapper_fwns1_38", x = "_headingContainer_fwns1_43", T = "_invisible_fwns1_48", j = "_withAvatar_fwns1_52", z = "_iconContainer_fwns1_57", n = {
+  pageHeader: N,
+  headlineContainer: H,
+  actionButtonContainer: b,
+  content: A,
+  leadingIcon: W,
+  headingWrapper: $,
   headingContainer: x,
   invisible: T,
   withAvatar: j,
   iconContainer: z
-}, L = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ i("div", { className: n.iconContainer, children: e }) : e in N ? /* @__PURE__ */ i(
-  B,
+}, L = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ i("div", { className: n.iconContainer, children: e }) : e in B ? /* @__PURE__ */ i(
+  I,
   {
     icon: e,
     className: n.leadingIcon,
     iconSize: "large",
     iconType: "filled"
   }
-) : /* @__PURE__ */ i(y, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, q = ({
+) : /* @__PURE__ */ i(w, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, q = ({
   children: e,
   marginBottom: t,
   heading: l,
   icon: d,
-  className: h,
+  className: p,
   subHeading: o,
-  subHeadingLevel: m = 2,
-  invisibleButton: p = !1,
+  subHeadingLevel: _ = 2,
+  invisibleButton: f = !1,
   level: r = 4,
   fontWeight: s = 400,
-  withAvatar: _ = !1
+  withAvatar: g = !1
 }) => {
-  const { isLg: c } = I(), g = c ? r : r + 1, v = s === "bold" ? 500 : s, C = () => {
+  const { isLg: c } = y(), h = c ? r : r + 1, m = s === "bold" ? 500 : s, v = () => {
     if (t !== void 0)
       return typeof t == "number" ? `${t}px` : "2rem";
   };
@@ -44,29 +44,29 @@ const H = "_pageHeader_1hm8h_1", b = "_headlineContainer_1hm8h_21", A = "_action
     "div",
     {
       className: n.pageHeader,
-      style: { marginBottom: C() },
+      style: { marginBottom: v() },
       "data-testid": "HeaderContainer",
       children: [
-        /* @__PURE__ */ a("div", { className: `${_ && c ? n.withAvatar : ""} ${n.headingWrapper}`, children: [
+        /* @__PURE__ */ a("div", { className: `${g && c ? n.withAvatar : ""} ${n.headingWrapper}`, children: [
           /* @__PURE__ */ i(L, { icon: d }),
           /* @__PURE__ */ a("div", { className: o ? n.headingContainer : "", children: [
             /* @__PURE__ */ i(
-              f,
+              C,
               {
-                level: g,
+                level: h,
                 "data-testid": "Header",
-                className: h ?? "",
-                style: { fontWeight: v },
+                className: p ?? "",
+                style: { fontWeight: m },
                 children: l
               }
             ),
-            /* @__PURE__ */ i(u, { level: m, children: o })
+            /* @__PURE__ */ i(u, { level: _, children: o })
           ] })
         ] }),
         /* @__PURE__ */ i(
           "div",
           {
-            className: `${n.actionButtonContainer} ${p && n.invisible}`,
+            className: `${n.actionButtonContainer} ${f && n.invisible}`,
             "data-testid": "RightPart",
             children: e
           }

package/dist/components/BasicHeading/BasicHeading.test.js

@@ -1,7 +1,7 @@
 import { jsx as o, Fragment as c } from "react/jsx-runtime";
 import { Button as g } from "@element/react-components";
 import { BasicHeading as a } from "./BasicHeading.js";
-import { d as h, t as i, r as s, s as n, g as e } from "../../vi.JYQecGiw-D8gb8QJV.js";
+import { d as h, t as i, r as s, s as n, g as e } from "../../vi.JYQecGiw-8gz0k16C.js";
 h("BasicHeading-Test", () => {
   i("render small container without content", () => {
     s(/* @__PURE__ */ o(a, { heading: "Test" }));

package/dist/components/BlockView/BlockView.js

@@ -1,9 +1,9 @@
 import "../../assets/BlockView.css";
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
 import { TypoSubtitle as x, TypoDisplay as T } from "@element/react-components";
 import { useState as L, useEffect as R, useMemo as B } from "react";
 import { getBlockNumberByDto as C } from "../../services/BlockService.js";
-const A = "_grid_8fci1_1", D = "_black_8fci1_21", E = "_blockLayout_8fci1_29", S = "_blockRow_8fci1_53", V = "_block_8fci1_29", M = "_active_8fci1_91", j = "_error_8fci1_103", q = "_empty_8fci1_115", F = "_blockText_8fci1_129", o = {
+const A = "_grid_g18cu_1", D = "_black_g18cu_11", E = "_blockLayout_g18cu_15", S = "_blockRow_g18cu_27", V = "_block_g18cu_15", M = "_active_g18cu_46", j = "_error_g18cu_52", q = "_empty_g18cu_58", F = "_blockText_g18cu_65", o = {
   grid: A,
   black: D,
   blockLayout: E,
@@ -16,44 +16,44 @@ const A = "_grid_8fci1_1", D = "_black_8fci1_21", E = "_blockLayout_8fci1_29", S
 }, O = ({
   rows: s,
   columns: t,
-  hideText: m = !1,
+  hideText: u = !1,
   errorBlocks: p = [],
   showNumbers: y = !0,
   clickable: h = !0,
-  size: b = 15,
-  onClick: _ = null,
+  size: m = 15,
+  onClick: b = null,
   currentBlock: i,
-  blocks: k,
+  blocks: _,
   blockViewTitle: v,
-  blockLabel: N
+  blockLabel: f
 }) => {
-  const [d, u] = L(0);
+  const [k, d] = L(0);
   R(() => {
     if (!i)
       return;
     const c = C(i, t);
-    u(c);
+    d(c);
   }, [i, t]);
-  const g = B(() => s * t, [s, t]), $ = (c) => {
-    _ && _(c, i ?? void 0);
-  }, w = ({ row: c, column: r }) => k.length === 0 ? !0 : k.some((n) => n.position?.row === c && n.position?.column === r);
-  return /* @__PURE__ */ f("div", { className: o.grid, children: [
-    !m && /* @__PURE__ */ l(x, { level: 1, bold: !0, className: o.black, children: v }),
-    /* @__PURE__ */ l("div", { className: o.blockLayout, style: { width: `${b}rem`, height: `${b}rem` }, children: Array.from({ length: s }).map((c, r) => /* @__PURE__ */ l("div", { className: o.blockRow, children: Array.from({ length: t }).map((n, a) => {
+  const N = B(() => s * t, [s, t]), $ = (c) => {
+    b && b(c, i ?? void 0);
+  }, w = ({ row: c, column: r }) => _.length === 0 ? !0 : _.some((n) => n.position?.row === c && n.position?.column === r);
+  return /* @__PURE__ */ g("div", { className: o.grid, children: [
+    !u && /* @__PURE__ */ l(x, { level: 1, bold: !0, className: o.black, children: v }),
+    /* @__PURE__ */ l("div", { className: o.blockLayout, style: { width: `${m}rem`, height: `${m}rem` }, children: Array.from({ length: s }).map((c, r) => /* @__PURE__ */ l("div", { className: o.blockRow, children: Array.from({ length: t }).map((n, a) => {
       const e = t * r + a + 1;
       return /* @__PURE__ */ l(
         "div",
         {
           "data-testid": "blockViewBlock",
-          className: `${o.block} ${d === e ? o.active : ""} ${w({ row: r + 1, column: a + 1 }) ? "" : o.empty} ${p.includes(e) ? o.error : ""}`,
+          className: `${o.block} ${k === e ? o.active : ""} ${w({ row: r + 1, column: a + 1 }) ? "" : o.empty} ${p.includes(e) ? o.error : ""}`,
           id: `block${e}`,
           onClick: h ? () => {
-            u(e), $({ row: r + 1, column: a + 1 });
+            d(e), $({ row: r + 1, column: a + 1 });
           } : void 0,
           children: y && /* @__PURE__ */ l(
             "div",
             {
-              className: `${o.blockText} ${d === e ? o.black : ""}`,
+              className: `${o.blockText} ${k === e ? o.black : ""}`,
               children: e
             }
           )
@@ -61,10 +61,10 @@ const A = "_grid_8fci1_1", D = "_black_8fci1_21", E = "_blockLayout_8fci1_29", S
         e
       );
     }) }, r)) }),
-    !m && /* @__PURE__ */ f(T, { themeColor: "primary", level: 6, children: [
-      g,
+    !u && /* @__PURE__ */ g(T, { themeColor: "primary", level: 6, children: [
+      N,
       " ",
-      N
+      f
     ] })
   ] });
 };

package/dist/components/BlockView/BlockView.test.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { d as n, v as B, t as s, r as i, g as o, s as t, f as a } from "../../vi.JYQecGiw-D8gb8QJV.js";
+import { d as n, v as B, t as s, r as i, g as o, s as t, f as a } from "../../vi.JYQecGiw-8gz0k16C.js";
 import { BlockView as k } from "./BlockView.js";
 n("BlockView Test", () => {
   const c = B.fn(), e = {

package/dist/components/EmptyView/EmptyView.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { d as r, t as s, r as d, g as e, s as n } from "../../vi.JYQecGiw-D8gb8QJV.js";
+import { d as r, t as s, r as d, g as e, s as n } from "../../vi.JYQecGiw-8gz0k16C.js";
 import { EmptyView as i } from "./EmptyView.js";
 r("EmptyView", () => {
   s("should render", () => {