@hortiview/shared-components 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [2.7.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.6.1...v2.7.0) (2025-10-24)
+
+### Features
+
+* create getFormattedDateTime function ([2c0bee8](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/2c0bee8ab990f28cf4d9cbc198863ca411070b6c))
+
+### Documentation
+
+* mention using formats from Time.ts for consistency ([0026a3a](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0026a3acb5422cfdda722b69020c9cbc1521ebd8))
+* update README ([846bca1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/846bca135f16d3f673ef1db3a8c37700371eb115))
+
+### Code Refactoring
+
+* add Date prop ([f962c7c](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/f962c7c106c66e0a55dcd7f49642233cf69344fe))
+* create Time file and import/export date formats ([d7b6fd9](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d7b6fd974bf4634d8300426ece110881090e2653))
+
+## [2.6.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.6.0...v2.6.1) (2025-10-02)
+
+### Styles
+
+* adjust title and subtitle ([3aab84c](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/3aab84c8bd07f6d01c21a5653ab609cd41de7e4f))
+
 ## [2.6.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.5.0...v2.6.0) (2025-09-30)
 
 ### Features

package/README.md

@@ -66,6 +66,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [capitalizeFirstLetters](#capitalizefirstletters)
 1. [trimLeadingAndTrailingSpaces](#trimleadingandtrailingspaces)
 1. [getNumberAsLocaleString](#getnumberaslocalestring)
+1. [getFormattedDateTime](#getformatteddatetime)
 
 ## Available constants
 
@@ -1108,6 +1109,18 @@ const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t(
 )}`;
 ```
 
+### getFormattedDateTime
+
+Formats a date (string) with Intl.DateTimeFormat.
+If locale is a plain code ("en" | "es" | "tr"), it’s mapped to a regional tag ("en-US", "es-MX", "tr-TR").
+
+For consistency, please use the date and time formats defined in `Time.ts`.
+
+```typescript
+getFormattedDateTime('2025-10-02T14:30:00Z', 'en-US', { dateStyle: 'medium' })
+// -> Oct 2, 2025
+```
+
 ## Available constants
 
 ### Languages and countries

package/dist/OfflineView-BUSWAKez.js

@@ -0,0 +1,48 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { G as o } from "./index.es-CbBdaRO2.js";
+import { Iconify as _ } from "./components/Iconify/Iconify.js";
+import { b as m, d as y, T as h } from "./index.es--yyG47az.js";
+import { B as A } from "./index.es-Bx1E5MPK.js";
+import './assets/OfflineView.css';const T = "_gapAndTextAlign_10nts_1", v = "_container_10nts_6", x = "_bgWhite_10nts_12", G = "_bgGrey_10nts_17", W = "_subtitle_10nts_22", t = {
+  gapAndTextAlign: T,
+  container: v,
+  bgWhite: x,
+  bgGrey: G,
+  subtitle: W
+}, j = ({
+  title: i = "You’re currently offline",
+  subtitle: n = "This feature is unavailable until you reconnect",
+  icon: l = "cloud_off",
+  size: c = "large",
+  variant: d = "basic",
+  "data-testid": g = "offline-view-container",
+  buttonLabel: a,
+  fullWidth: f = !1,
+  className: b,
+  onClick: p
+}) => {
+  const s = c === "large", u = d === "filled";
+  return /* @__PURE__ */ r(
+    o,
+    {
+      className: `${b} ${t.container} ${u ? t.bgGrey : t.bgWhite}`,
+      gap: "standard",
+      direction: "vertical",
+      "data-testid": g,
+      secondaryAlign: "center",
+      fullWidth: f,
+      children: [
+        /* @__PURE__ */ r(o, { direction: "vertical", secondaryAlign: "center", className: t.gapAndTextAlign, children: [
+          /* @__PURE__ */ e(_, { icon: l, iconSize: s ? "xlarge" : "medium" }),
+          s ? /* @__PURE__ */ e(m, { level: 6, children: i }) : /* @__PURE__ */ e(y, { level: 1, bold: !0, children: i })
+        ] }),
+        n && /* @__PURE__ */ e(h, { className: t.subtitle, level: 2, children: n }),
+        a && /* @__PURE__ */ e(A, { "data-testid": "offline-view-action-button", label: a, onClick: p })
+      ]
+    }
+  );
+};
+export {
+  j as O,
+  t as s
+};

package/dist/assets/OfflineView.css

@@ -1 +1 @@
-._gap_18we6_1{gap:.125rem!important}._container_18we6_5{border-radius:.5rem;padding:2.5rem 2rem;width:auto}._bgWhite_18we6_11{background:var(--lmnt-theme-surface);color:var(--lmnt-theme-on-surface-active)}._bgGrey_18we6_16{background:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-active)}._subtitle_18we6_21{color:var(--on-colors-on-surface-inactive-medium, #000000BA);font-weight:500}
+._gapAndTextAlign_10nts_1{gap:.125rem!important;text-align:center}._container_10nts_6{border-radius:.5rem;padding:2.5rem 2rem;width:auto}._bgWhite_10nts_12{background:var(--lmnt-theme-surface);color:var(--lmnt-theme-on-surface-active)}._bgGrey_10nts_17{background:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-active)}._subtitle_10nts_22{color:var(--on-colors-on-surface-inactive-medium, #000000BA);font-weight:500;text-align:center}

package/dist/components/BaseView/BaseView.js

@@ -6,7 +6,7 @@ import { EmptyView as N } from "../EmptyView/EmptyView.js";
 import { ListArea as A } from "../ListArea/ListArea.js";
 import { u as H } from "../../useBreakpoints-MzTZ0tCT.js";
 import { VerticalDivider as V } from "../VerticalDivider/VerticalDivider.js";
-import { O as j } from "../../OfflineView-HbuDPpQL.js";
+import { O as j } from "../../OfflineView-BUSWAKez.js";
 import '../../assets/BaseView.css';const E = "_parentGroup_w7vsz_1", I = "_divider_w7vsz_5", $ = "_maxWidth_w7vsz_10", y = "_desktopList_w7vsz_14", F = "_mobileList_w7vsz_19", M = "_desktopDetail_w7vsz_23", O = "_mobileDetail_w7vsz_28", o = {
   parentGroup: E,
   divider: I,

package/dist/components/ContextMenu/ContextMenu.js

@@ -3,7 +3,7 @@ import { I as _ } from "../../index.es-Kg9soDed.js";
 import { M as k, L as p, a as w } from "../../index.es-CPqaUyn3.js";
 import { useState as I, useCallback as a, useEffect as M } from "react";
 import { u as x } from "../../uniqueId-NU3-C36A.js";
-import { O as C } from "../../OfflineView-HbuDPpQL.js";
+import { O as C } from "../../OfflineView-BUSWAKez.js";
 import '../../assets/ContextMenu.css';const v = "_menu_1xwk3_1", y = "_icon_1xwk3_5", V = "_listItem_1xwk3_9", g = "_offlineViewMargin_1xwk3_19", s = {
   menu: v,
   icon: y,

package/dist/components/Filter/Filter.js

@@ -18,12 +18,13 @@ import "../../get-B8c-T4F8.js";
 import "../../omit-1Eom1PmQ.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
+import "../../types/Time.js";
 import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBadge_qtl7a_10", E = "_dense_qtl7a_17", u = {
   filterButton: K,
   relativeParent: T,
   filterBadge: V,
   dense: E
-}, ct = ({
+}, ut = ({
   clearFilterText: m,
   closeCallback: s,
   currentFilter: i,
@@ -184,5 +185,5 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
   );
 };
 export {
-  ct as Filter
+  ut as Filter
 };

package/dist/components/GenericTable/GenericTable.js

@@ -23,12 +23,13 @@ import { a as hl } from "../../util-DA21pZXj.js";
 import "../../isEmpty-DsdC9UUD.js";
 import { u as ml } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
-import { O as Fa } from "../../OfflineView-HbuDPpQL.js";
+import { O as Fa } from "../../OfflineView-BUSWAKez.js";
 import "../../uniqueId-NU3-C36A.js";
 import "react-hook-form";
 import "../../get-B8c-T4F8.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
+import "../../types/Time.js";
 import { useGenerateColumns as yl, useGenerateTableData as bl } from "./GenericTableService.js";
 import { GenericCardList as wl } from "./Mobile/GenericCardList.js";
 import '../../assets/GenericTable.css';function Rl(r, o) {
@@ -10407,7 +10408,7 @@ const cd = "_topBar_1tmb3_1", fd = "_filterBar_1tmb3_5", pd = "_start_1tmb3_10",
   elevation: vd,
   table: hd,
   noBorder: md
-}, Jd = ({
+}, Qd = ({
   data: r = [],
   hiddenColumns: o = [],
   order: e = [],
@@ -10527,5 +10528,5 @@ const cd = "_topBar_1tmb3_1", fd = "_filterBar_1tmb3_5", pd = "_start_1tmb3_10",
   );
 };
 export {
-  Jd as GenericTable
+  Qd as GenericTable
 };

package/dist/components/Modal/Modal.js

@@ -11,7 +11,7 @@ import { A as Dt } from "../../animationframe-EMBh6XeO.js";
 import { P as It } from "../../index.es-D-ph6ImM.js";
 import { b as Nt } from "../../index.es--yyG47az.js";
 import { Iconify as Lt } from "../Iconify/Iconify.js";
-import { O as Ft } from "../../OfflineView-HbuDPpQL.js";
+import { O as Ft } from "../../OfflineView-BUSWAKez.js";
 import '../../assets/Modal.css';/**
  * @license
  * Copyright 2016 Google Inc.

package/dist/components/ModulePadding/ModulePadding.js

@@ -11,7 +11,8 @@ import "../../get-B8c-T4F8.js";
 import "../../omit-1Eom1PmQ.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
-const x = ({ children: o }) => {
+import "../../types/Time.js";
+const j = ({ children: o }) => {
   const { isDesktop: t } = m();
   return /* @__PURE__ */ i(
     r,
@@ -24,5 +25,5 @@ const x = ({ children: o }) => {
   );
 };
 export {
-  x as ModulePadding
+  j as ModulePadding
 };

package/dist/components/OfflineView/OfflineView.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../index.es-CbBdaRO2.js";
 import "../Iconify/Iconify.js";
 import "../../index.es--yyG47az.js";
-import { O as f } from "../../OfflineView-HbuDPpQL.js";
+import { O as f } from "../../OfflineView-BUSWAKez.js";
 import "../../index.es-Bx1E5MPK.js";
 export {
   f as OfflineView

package/dist/components/OfflineView/OfflineView.test.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { a as n, s as t, f as u } from "../../react.esm-CX1WJ2Pp.js";
-import { s as r, O as i } from "../../OfflineView-HbuDPpQL.js";
+import { s as r, O as i } from "../../OfflineView-BUSWAKez.js";
 import { d as B, t as l, g as e, a as c } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 B("OfflineView", () => {
   l("should render OfflineView with title and subtitle", () => {

package/dist/main.d.ts

@@ -42,7 +42,7 @@ export { FormToggle } from './components/FormComponents/FormToggle/FormToggle';
 export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
 export { ThemeColor } from './enums/ThemeColor';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export { capitalizeFirstLetters, getNumberAsLocaleString, trimLeadingAndTrailingSpaces, } from './services/UtilService';
+export { capitalizeFirstLetters, getFormattedDateTime, getNumberAsLocaleString, trimLeadingAndTrailingSpaces, } from './services/UtilService';
 export type { ActionProps } from './components/ContextMenu/ContextMenu';
 export type { FormSelectOption, FormSelectProps, } from './components/FormComponents/FormSelect/FormSelect';
 export type { FormTextProps } from './components/FormComponents/FormText/FormText';
@@ -54,5 +54,6 @@ export type { FilterData, FilterOption, FilterSelection } from './types/Filter';
 export type { CellTemplate, CellTemplateProps, TableLayoutProps } from './types/GenericTable';
 export type { HashTab } from './types/HashTab';
 export type { BaseListElement, ListElement } from './types/ListElement';
+export { DATE_FORMAT, TIME_FORMAT, DATE_TIME_FORMAT } from './types/Time';
 export { AVAILABLE_COUNTRY_KEYS, AVAILABLE_LOCALES, ENGLISH_LANGUAGE_ID, GERMAN_LANGUAGE_ID, LANGUAGE_CODES_MAPPER, LANGUAGE_ID_MAPPER, SPANISH_LANGUAGE_ID, TURKISH_LANGUAGE_ID, } from './types/Languages';
 export type { AVAILABLE_LANGUAGE_CODES, LANGUAGE_COUNTRY_CODES } from './types/Languages';

package/dist/main.js

@@ -2,26 +2,26 @@ import { A as e } from "./AlertBanner-JnX0tJGC.js";
 import { LinkBanner as m } from "./components/AlertBanner/LinkBanner.js";
 import { BaseView as f } from "./components/BaseView/BaseView.js";
 import { BasicHeading as a } from "./components/BasicHeading/BasicHeading.js";
-import { BlockView as l } from "./components/BlockView/BlockView.js";
-import { ChipCard as A } from "./components/ChipCard/ChipCard.js";
-import { ContextMenu as d } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as S } from "./components/DeleteModal/DeleteModal.js";
-import { DetailContentWrapper as E } from "./components/DetailContentWrapper/DetailContentWrapper.js";
-import { Disclaimer as _ } from "./components/Disclaimer/Disclaimer.js";
-import { EmptyView as F } from "./components/EmptyView/EmptyView.js";
+import { BlockView as A } from "./components/BlockView/BlockView.js";
+import { ChipCard as n } from "./components/ChipCard/ChipCard.js";
+import { ContextMenu as E } from "./components/ContextMenu/ContextMenu.js";
+import { DeleteModal as L } from "./components/DeleteModal/DeleteModal.js";
+import { DetailContentWrapper as _ } from "./components/DetailContentWrapper/DetailContentWrapper.js";
+import { Disclaimer as F } from "./components/Disclaimer/Disclaimer.js";
+import { EmptyView as G } from "./components/EmptyView/EmptyView.js";
 import { Filter as D } from "./components/Filter/Filter.js";
-import { FormattedNumberDisplay as C } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
-import { GenericTable as b } from "./components/GenericTable/GenericTable.js";
-import { HashTabView as T } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as U } from "./components/HeaderFilter/HeaderFilter.js";
-import { HealthCheckFailed as h } from "./components/HealthCheckFailed/HealthCheckFailed.js";
-import { Iconify as O } from "./components/Iconify/Iconify.js";
-import { InfoGroup as k } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as R } from "./components/ListArea/ListArea.js";
+import { FormattedNumberDisplay as M } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
+import { GenericTable as B } from "./components/GenericTable/GenericTable.js";
+import { HashTabView as O } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as u } from "./components/HeaderFilter/HeaderFilter.js";
+import { HealthCheckFailed as H } from "./components/HealthCheckFailed/HealthCheckFailed.js";
+import { Iconify as V } from "./components/Iconify/Iconify.js";
+import { InfoGroup as P } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as w } from "./components/ListArea/ListArea.js";
 import { LoadingSpinner as y } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
 import { Modal as K } from "./components/Modal/Modal.js";
 import { ModulePadding as W } from "./components/ModulePadding/ModulePadding.js";
-import { O as j } from "./OfflineView-HbuDPpQL.js";
+import { O as j } from "./OfflineView-BUSWAKez.js";
 import { OnboardingBanner as J } from "./components/OnboardingBanner/OnboardingBanner.js";
 import { OverflowTooltip as Z } from "./components/OverflowTooltip/OverflowTooltip.js";
 import { ScrollbarX as rr, ScrollbarY as or } from "./components/Scrollbar/Scrollbar.js";
@@ -29,76 +29,81 @@ import { SearchBar as tr } from "./components/SearchBar/SearchBar.js";
 import { Select as pr } from "./components/Select/Select.js";
 import { StepperHeader as xr } from "./components/Stepper/components/StepperHeader.js";
 import { StepperIndicator as ir } from "./components/Stepper/components/StepperIndicator.js";
-import { Stepper as nr } from "./components/Stepper/Stepper.js";
-import { VerticalDivider as cr } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as Lr } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as sr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormNumber as Gr } from "./components/FormComponents/FormNumber/FormNumber.js";
-import { FormRadio as Ir } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as Nr } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as Br } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { Stepper as lr } from "./components/Stepper/Stepper.js";
+import { VerticalDivider as dr } from "./components/VerticalDivider/VerticalDivider.js";
+import { FormCheckBox as cr } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as Sr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormNumber as sr } from "./components/FormComponents/FormNumber/FormNumber.js";
+import { FormRadio as Tr } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as Ir } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as Nr } from "./components/FormComponents/FormSlider/FormSlider.js";
 import { FormText as gr } from "./components/FormComponents/FormText/FormText.js";
-import { FormToggle as ur } from "./components/FormComponents/FormToggle/FormToggle.js";
-import { AvailableCustomIcons as Hr } from "./enums/AvailableCustomIcons.js";
-import { ThemeColor as Vr } from "./enums/ThemeColor.js";
-import { u as Mr } from "./useBreakpoints-MzTZ0tCT.js";
-import { capitalizeFirstLetters as Pr, getNumberAsLocaleString as kr, trimLeadingAndTrailingSpaces as wr } from "./services/UtilService.js";
-import { AVAILABLE_COUNTRY_KEYS as vr, AVAILABLE_LOCALES as yr, ENGLISH_LANGUAGE_ID as Yr, GERMAN_LANGUAGE_ID as Kr, LANGUAGE_CODES_MAPPER as zr, LANGUAGE_ID_MAPPER as Wr, SPANISH_LANGUAGE_ID as Xr, TURKISH_LANGUAGE_ID as jr } from "./types/Languages.js";
+import { FormToggle as Cr } from "./components/FormComponents/FormToggle/FormToggle.js";
+import { AvailableCustomIcons as br } from "./enums/AvailableCustomIcons.js";
+import { ThemeColor as Rr } from "./enums/ThemeColor.js";
+import { u as Ur } from "./useBreakpoints-MzTZ0tCT.js";
+import { capitalizeFirstLetters as hr, getFormattedDateTime as Pr, getNumberAsLocaleString as kr, trimLeadingAndTrailingSpaces as wr } from "./services/UtilService.js";
+import { DATE_FORMAT as yr, DATE_TIME_FORMAT as Yr, TIME_FORMAT as Kr } from "./types/Time.js";
+import { AVAILABLE_COUNTRY_KEYS as Wr, AVAILABLE_LOCALES as Xr, ENGLISH_LANGUAGE_ID as jr, GERMAN_LANGUAGE_ID as qr, LANGUAGE_CODES_MAPPER as Jr, LANGUAGE_ID_MAPPER as Qr, SPANISH_LANGUAGE_ID as Zr, TURKISH_LANGUAGE_ID as $r } from "./types/Languages.js";
 export {
-  vr as AVAILABLE_COUNTRY_KEYS,
-  yr as AVAILABLE_LOCALES,
+  Wr as AVAILABLE_COUNTRY_KEYS,
+  Xr as AVAILABLE_LOCALES,
   e as AlertBanner,
-  Hr as AvailableCustomIcons,
+  br as AvailableCustomIcons,
   f as BaseView,
   a as BasicHeading,
-  l as BlockView,
-  A as ChipCard,
-  d as ContextMenu,
-  S as DeleteModal,
-  E as DetailContentWrapper,
-  _ as Disclaimer,
-  Yr as ENGLISH_LANGUAGE_ID,
-  F as EmptyView,
+  A as BlockView,
+  n as ChipCard,
+  E as ContextMenu,
+  yr as DATE_FORMAT,
+  Yr as DATE_TIME_FORMAT,
+  L as DeleteModal,
+  _ as DetailContentWrapper,
+  F as Disclaimer,
+  jr as ENGLISH_LANGUAGE_ID,
+  G as EmptyView,
   D as Filter,
-  Lr as FormCheckBox,
-  sr as FormDatePicker,
-  Gr as FormNumber,
-  Ir as FormRadio,
-  Nr as FormSelect,
-  Br as FormSlider,
+  cr as FormCheckBox,
+  Sr as FormDatePicker,
+  sr as FormNumber,
+  Tr as FormRadio,
+  Ir as FormSelect,
+  Nr as FormSlider,
   gr as FormText,
-  ur as FormToggle,
-  C as FormattedNumberDisplay,
-  Kr as GERMAN_LANGUAGE_ID,
-  b as GenericTable,
-  T as HashTabView,
-  U as HeaderFilter,
-  h as HealthCheckFailed,
-  O as Iconify,
-  k as InfoGroup,
-  zr as LANGUAGE_CODES_MAPPER,
-  Wr as LANGUAGE_ID_MAPPER,
+  Cr as FormToggle,
+  M as FormattedNumberDisplay,
+  qr as GERMAN_LANGUAGE_ID,
+  B as GenericTable,
+  O as HashTabView,
+  u as HeaderFilter,
+  H as HealthCheckFailed,
+  V as Iconify,
+  P as InfoGroup,
+  Jr as LANGUAGE_CODES_MAPPER,
+  Qr as LANGUAGE_ID_MAPPER,
   m as LinkBanner,
-  R as ListArea,
+  w as ListArea,
   y as LoadingSpinner,
   K as Modal,
   W as ModulePadding,
   j as OfflineView,
   J as OnboardingBanner,
   Z as OverflowTooltip,
-  Xr as SPANISH_LANGUAGE_ID,
+  Zr as SPANISH_LANGUAGE_ID,
   rr as ScrollbarX,
   or as ScrollbarY,
   tr as SearchBar,
   pr as Select,
-  nr as Stepper,
+  lr as Stepper,
   xr as StepperHeader,
   ir as StepperIndicator,
-  jr as TURKISH_LANGUAGE_ID,
-  Vr as ThemeColor,
-  cr as VerticalDivider,
-  Pr as capitalizeFirstLetters,
+  Kr as TIME_FORMAT,
+  $r as TURKISH_LANGUAGE_ID,
+  Rr as ThemeColor,
+  dr as VerticalDivider,
+  hr as capitalizeFirstLetters,
+  Pr as getFormattedDateTime,
   kr as getNumberAsLocaleString,
   wr as trimLeadingAndTrailingSpaces,
-  Mr as useBreakpoints
+  Ur as useBreakpoints
 };

package/dist/services/UtilService.d.ts

@@ -23,3 +23,24 @@ export declare const trimLeadingAndTrailingSpaces: <T extends Record<string, unk
  * @returns The language-specific formatted number.
  */
 export declare const getNumberAsLocaleString: (locale: AVAILABLE_LANGUAGE_CODES, value?: number, maximumFractionDigits?: number) => string;
+/**
+ * Formats a date using `Intl.DateTimeFormat`.
+ *
+ * @param date - The date to format (ISO string or any valid date string).
+ * @param locale - Locale to use. Defaults to `"en-US"`.
+ * - If it matches an entry in `AVAILABLE_LOCALES` (e.g. `"en"`, `"es"`, `"tr"`),
+ * it's mapped via `LANGUAGE_CODES_MAPPER` to a full tag (e.g. `"en-US"`).
+ * - Otherwise, used directly as a BCP-47 locale (e.g. `"fr-FR"`).
+ * @param options - Optional `Intl.DateTimeFormatOptions`.
+ * @returns The formatted date/time string.
+ *
+ * @example
+ * // Uses the default locale "en-US"
+ * getFormattedDateTime('2025-10-02T14:30:00Z', undefined, { dateStyle: 'medium' });
+ * // → "Oct 2, 2025"
+ *
+ * // Short code is mapped via LANGUAGE_CODES_MAPPER (e.g., "es" → "es-MX")
+ * getFormattedDateTime('2025-10-02', 'es', { dateStyle: 'long' });
+ * // → "2 de octubre de 2025"
+ */
+export declare const getFormattedDateTime: (date: Date | string, locale?: string, options?: Intl.DateTimeFormatOptions) => string;

package/dist/services/UtilService.js

@@ -1,15 +1,19 @@
-import { i as o } from "../isArray-Dub1wGJM.js";
+import { i as m } from "../isArray-Dub1wGJM.js";
 import { i as s, a } from "../isString-BW9UHONv.js";
-import { LANGUAGE_CODES_MAPPER as c } from "../types/Languages.js";
-const A = (r) => r.split(" ").map((t) => t.charAt(0).toUpperCase() + t.slice(1).toLowerCase()).join(" "), m = (r) => Object.fromEntries(
-  Object.entries(r).map(([t, i]) => [t, n(i)])
-), n = (r) => o(r) ? r.map(n) : s(r) ? m(r) : a(r) ? r.trim() : r, L = (r, t, i = 2) => {
-  if (!t) return "0";
-  const e = c[r];
-  return t.toLocaleString(e, { maximumFractionDigits: i });
-};
+import { AVAILABLE_LOCALES as c, LANGUAGE_CODES_MAPPER as n } from "../types/Languages.js";
+const L = (t) => t.split(" ").map((r) => r.charAt(0).toUpperCase() + r.slice(1).toLowerCase()).join(" "), f = (t) => Object.fromEntries(
+  Object.entries(t).map(([r, e]) => [r, i(e)])
+), i = (t) => m(t) ? t.map(i) : s(t) ? f(t) : a(t) ? t.trim() : t, S = (t, r, e = 2) => {
+  if (!r) return "0";
+  const o = n[t];
+  return r.toLocaleString(o, { maximumFractionDigits: e });
+}, u = (t, r = "en-US", e) => c.includes(r) ? new Intl.DateTimeFormat(
+  n[r],
+  e
+).format(new Date(t)) : new Intl.DateTimeFormat(r, e).format(new Date(t));
 export {
-  A as capitalizeFirstLetters,
-  L as getNumberAsLocaleString,
-  m as trimLeadingAndTrailingSpaces
+  L as capitalizeFirstLetters,
+  u as getFormattedDateTime,
+  S as getNumberAsLocaleString,
+  f as trimLeadingAndTrailingSpaces
 };

package/dist/services/services.test.js

@@ -1,47 +1,48 @@
-import { getBlockNumberByDto as r } from "./BlockService.js";
-import { capitalizeFirstLetters as a, trimLeadingAndTrailingSpaces as o } from "./UtilService.js";
-import { d as n, t as e, g as s } from "../vi.CjhMlMwf-CKxPQtd6.js";
-n("Services Test", () => {
-  n("capitalizeFirstLetters", () => {
+import { getBlockNumberByDto as i } from "./BlockService.js";
+import { capitalizeFirstLetters as d, trimLeadingAndTrailingSpaces as a, getFormattedDateTime as r } from "./UtilService.js";
+import { DATE_FORMAT as n, TIME_FORMAT as l } from "../types/Time.js";
+import { d as c, t as e, g as o } from "../vi.CjhMlMwf-CKxPQtd6.js";
+c("Services Test", () => {
+  c("capitalizeFirstLetters", () => {
     e("should capitalize first letters of a lower case string", () => {
-      const t = a("farm location");
-      s(t).toBe("Farm Location");
+      const t = d("farm location");
+      o(t).toBe("Farm Location");
     }), e("should turn other letters of an all caps string into lower case", () => {
-      const t = a("FARM LOCATION");
-      s(t).toBe("Farm Location");
+      const t = d("FARM LOCATION");
+      o(t).toBe("Farm Location");
     });
-  }), n("getBlockNumberByDto", () => {
+  }), c("getBlockNumberByDto", () => {
     e("should get zero", () => {
-      const t = r({ position: void 0 }, 3);
-      s(t).toBe(0);
+      const t = i({ position: void 0 }, 3);
+      o(t).toBe(0);
     }), e("should get 3", () => {
-      const t = r({ position: { row: 1, column: 3 } }, 3);
-      s(t).toBe(3);
+      const t = i({ position: { row: 1, column: 3 } }, 3);
+      o(t).toBe(3);
     });
-  }), n("Test trimLeadingAndTrailingSpaces", () => {
+  }), c("Test trimLeadingAndTrailingSpaces", () => {
     e("should remove leading spaces", () => {
-      s(o({ test: "   test-1" })).toEqual({ test: "test-1" });
+      o(a({ test: "   test-1" })).toEqual({ test: "test-1" });
     }), e("should remove trailing spaces", () => {
-      s(o({ test: "test-1   " })).toEqual({ test: "test-1" });
+      o(a({ test: "test-1   " })).toEqual({ test: "test-1" });
     }), e("should not remove other spaces than the leading and trailing once", () => {
-      s(o({ test: "  t e s t 1   " })).toEqual({ test: "t e s t 1" });
+      o(a({ test: "  t e s t 1   " })).toEqual({ test: "t e s t 1" });
     }), e("should remove leading and trailing spaces", () => {
-      s(o({ test1: "  test-1   ", test2: "test-2   " })).toEqual({
+      o(a({ test1: "  test-1   ", test2: "test-2   " })).toEqual({
         test1: "test-1",
         test2: "test-2"
       });
     }), e("should not change other values than strings", () => {
-      s(o({ test1: "  test-1   ", test2: 123456 })).toEqual({
+      o(a({ test1: "  test-1   ", test2: 123456 })).toEqual({
         test1: "test-1",
         test2: 123456
       });
     }), e("should remove spaces from strings in an nested object", () => {
-      s(o({ test1: "  test-1   ", test2: { nestedObjectKey: "test-2   " } })).toEqual({
+      o(a({ test1: "  test-1   ", test2: { nestedObjectKey: "test-2   " } })).toEqual({
         test1: "test-1",
         test2: { nestedObjectKey: "test-2" }
       });
     }), e("should remove spaces from strings of an array", () => {
-      s(o({
+      o(a({
         test1: "  test-1   ",
         test2: { nestedObjectKey: ["test-2   ", "  test-3 ", 2345] }
       })).toEqual({
@@ -50,7 +51,53 @@ n("Services Test", () => {
       });
     }), e("should not trim date instances", () => {
       const t = { date: /* @__PURE__ */ new Date() };
-      s(o(t)).toEqual(t);
+      o(a(t)).toEqual(t);
+    });
+  }), c("getFormattedDateTime", () => {
+    const t = "2025-01-20T16:01:50.097Z";
+    e('should format date correctly for locale "undefined"', () => {
+      const s = r(t, void 0, n);
+      o(s).toBe("01/20/2025");
+    }), e('should format date correctly for locale "de"', () => {
+      const s = r(t, "de", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric"
+      });
+      o(s).toBe("20.01.2025");
+    }), e('should format date correctly for locale "en"', () => {
+      const s = r(t, "en", n);
+      o(s).toBe("01/20/2025");
+    }), e('should format datetime correctly for local "en"', () => {
+      const s = r(t, "en", {
+        ...l,
+        timeZone: "America/New_York"
+      });
+      o(s).toBe("11:01 AM");
+    }), e('should format date correctly for locale "es', () => {
+      const s = r(t, "es", n);
+      o(s).toBe("20/01/2025");
+    }), e('should format datetime correctly for local "es"', () => {
+      const s = r(t, "es", {
+        ...l,
+        timeZone: "America/Mexico_City"
+      });
+      o(s).toBe("10:01 a.m.");
+    }), e('should format date correctly for locale "tr', () => {
+      const s = r(t, "tr", n);
+      o(s).toBe("20.01.2025");
+    }), e('should format datetime correctly for local "tr"', () => {
+      const s = r(t, "tr", {
+        ...l,
+        timeZone: "Europe/Istanbul"
+      });
+      o(s).toBe("ÖS 07:01");
+    }), e('should format date correctly for locale "gb', () => {
+      const s = r(t, "en-GB", n);
+      o(s).toBe("20/01/2025");
+    }), e('should format date correctly for locale "fr', () => {
+      const s = r(t, "fr", n);
+      o(s).toBe("20/01/2025");
     });
   });
 });

package/dist/types/Time.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Date and time format options to be used in the {@link getFormattedDateTime} function.
+ */
+export declare const DATE_FORMAT: {
+    readonly day: "2-digit";
+    readonly month: "2-digit";
+    readonly year: "numeric";
+};
+export declare const TIME_FORMAT: {
+    readonly hour: "2-digit";
+    readonly minute: "2-digit";
+    readonly hour12: true;
+};
+export declare const DATE_TIME_FORMAT: {
+    readonly hour: "2-digit";
+    readonly minute: "2-digit";
+    readonly hour12: true;
+    readonly day: "2-digit";
+    readonly month: "2-digit";
+    readonly year: "numeric";
+};

package/dist/types/Time.js

@@ -0,0 +1,17 @@
+const t = {
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric"
+}, i = {
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: !0
+}, o = {
+  ...t,
+  ...i
+};
+export {
+  t as DATE_FORMAT,
+  o as DATE_TIME_FORMAT,
+  i as TIME_FORMAT
+};

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

package/dist/OfflineView-HbuDPpQL.js

@@ -1,48 +0,0 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { G as s } from "./index.es-CbBdaRO2.js";
-import { Iconify as _ } from "./components/Iconify/Iconify.js";
-import { b as m, d as y, T as h } from "./index.es--yyG47az.js";
-import { B as v } from "./index.es-Bx1E5MPK.js";
-import './assets/OfflineView.css';const w = "_gap_18we6_1", G = "_container_18we6_5", T = "_bgWhite_18we6_11", x = "_bgGrey_18we6_16", W = "_subtitle_18we6_21", i = {
-  gap: w,
-  container: G,
-  bgWhite: T,
-  bgGrey: x,
-  subtitle: W
-}, z = ({
-  title: t = "You’re currently offline",
-  subtitle: a = "This feature is unavailable until you reconnect",
-  icon: l = "cloud_off",
-  size: c = "large",
-  variant: d = "basic",
-  "data-testid": f = "offline-view-container",
-  buttonLabel: n,
-  fullWidth: g = !1,
-  className: b,
-  onClick: p
-}) => {
-  const r = c === "large", u = d === "filled";
-  return /* @__PURE__ */ o(
-    s,
-    {
-      className: `${b} ${i.container} ${u ? i.bgGrey : i.bgWhite}`,
-      gap: "standard",
-      direction: "vertical",
-      "data-testid": f,
-      secondaryAlign: "center",
-      fullWidth: g,
-      children: [
-        /* @__PURE__ */ o(s, { direction: "vertical", secondaryAlign: "center", className: i.gap, children: [
-          /* @__PURE__ */ e(_, { icon: l, iconSize: r ? "xlarge" : "medium" }),
-          r ? /* @__PURE__ */ e(m, { level: 6, children: t }) : /* @__PURE__ */ e(y, { level: 1, bold: !0, children: t })
-        ] }),
-        a && /* @__PURE__ */ e(h, { className: i.subtitle, level: 2, children: a }),
-        n && /* @__PURE__ */ e(v, { "data-testid": "offline-view-action-button", label: n, onClick: p })
-      ]
-    }
-  );
-};
-export {
-  z as O,
-  i as s
-};