@m4l/components 9.1.124 → 9.1.126

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as usePopoverSort } from "./usePopoverSort.js";
+import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
+import { n as PopoverStyled, o as PopoverHeaderStyled, p as PopoverHeaderIconStyled, q as PopoverHeaderTitleStyled, r as PopoverContainerFieldsStyled, s as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
+import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
+function PopoverSort() {
+  const {
+    field,
+    labelField,
+    anchorEl,
+    handleKeyDownPopper,
+    handleClosePopover,
+    onSubmit,
+    onClose,
+    sortFormValue,
+    formSort,
+    popupValidationSchema,
+    statusLoad,
+    canRender
+  } = usePopoverSort();
+  if (!canRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    PopoverStyled,
+    {
+      open: true,
+      disableRestoreFocus: true,
+      transitionDuration: 0,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      arrowType: "top-left",
+      anchorEl,
+      onKeyDown: handleKeyDownPopper,
+      onClose: handleClosePopover,
+      ownerState: {},
+      children: /* @__PURE__ */ jsxs(
+        RHFormProvider,
+        {
+          onSubmit,
+          values: sortFormValue,
+          validationSchema: popupValidationSchema,
+          statusLoad,
+          children: [
+            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
+              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
+              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
+            ] }),
+            /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
+            /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
+              /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
+              /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  PopoverSort as P
+};

package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.d.ts

@@ -1,11 +1,11 @@
 import { KeyboardEvent } from 'react';
 import { FieldValues } from 'react-hook-form';
-import { FormSortFieldApplied, Field } from '../../types';
+import { FormSortFieldApplied, SortField } from '../../types';
 /**
  * TODO: Documentar
  */
 declare function usePopoverSort(): {
-    field: Field;
+    field: SortField;
     labelField: string;
     canRender: boolean;
     anchorEl: Element;

package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.js

@@ -0,0 +1,99 @@
+import { useRef, useMemo, useCallback } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+import { f as fieldFactory } from "../FieldTypes/fieldFactory.js";
+function usePopoverSort() {
+  let anchorEl;
+  let field;
+  let formSort;
+  let sortFormValue;
+  let popupValidationSchema;
+  const { getLabel } = useModuleDictionary();
+  const popoverSortData = useDynamicSortStore((state) => state.popoverSortData);
+  const { hidePopoverSort, addSort, updateSort, getNewId } = useDynamicSortStore(
+    (state) => state.actions
+  );
+  const refPreviousPopoverSortData = useRef(popoverSortData);
+  const statusLoad = useMemo(() => {
+    let returnStatus;
+    if (popoverSortData && refPreviousPopoverSortData.current === void 0) {
+      returnStatus = "ready";
+    } else if (!popoverSortData) {
+      returnStatus = "initial";
+    } else {
+      returnStatus = "reload_values_provider";
+    }
+    refPreviousPopoverSortData.current = popoverSortData;
+    return returnStatus;
+  }, [popoverSortData]);
+  if (popoverSortData?.openFor === "add") {
+    anchorEl = popoverSortData?.fnAnchorEl();
+    field = popoverSortData.field;
+    const helperField = fieldFactory(field.type);
+    popupValidationSchema = helperField.getSchema(getLabel);
+    sortFormValue = helperField.getFormValue(field, getLabel);
+    formSort = {
+      field,
+      id: getNewId(),
+      isSet: true,
+      fixed: false,
+      ...sortFormValue
+    };
+  } else if (popoverSortData) {
+    anchorEl = popoverSortData?.fnAnchorEl();
+    field = popoverSortData?.sort.field;
+    const helperField = fieldFactory(field.type);
+    popupValidationSchema = helperField.getSchema(getLabel);
+    sortFormValue = helperField.getFormValue(field, getLabel, popoverSortData.sort);
+    formSort = { ...popoverSortData?.sort, ...sortFormValue };
+  } else {
+    sortFormValue = {};
+    field = {};
+    formSort = {};
+    anchorEl = {};
+  }
+  const onClose = useCallback(() => {
+    hidePopoverSort(false);
+  }, []);
+  const handleKeyDownPopper = useCallback((event) => {
+    if (event.key === "Escape") {
+      onClose();
+    }
+  }, []);
+  function handleClosePopover() {
+    hidePopoverSort(false);
+  }
+  async function onSubmit(dataFieldValues) {
+    const sortField = { ...sortFormValue, ...dataFieldValues };
+    const newSort = {
+      ...formSort,
+      // todo: mejorar el tipado que se le envía a getSortFromFormValue
+      ...fieldFactory(sortField.fieldType).getSortFromFormValue(sortField),
+      isSet: true
+    };
+    if (popoverSortData?.openFor === "add") {
+      addSort(newSort);
+    } else {
+      updateSort(newSort);
+    }
+    hidePopoverSort(false);
+  }
+  const labelField = field?.label ?? getLabel(field?.dictionaryId ?? "");
+  return {
+    field,
+    labelField,
+    canRender: Boolean(popoverSortData),
+    anchorEl,
+    handleKeyDownPopper,
+    handleClosePopover,
+    onSubmit,
+    onClose,
+    sortFormValue,
+    formSort,
+    popupValidationSchema,
+    statusLoad
+  };
+}
+export {
+  usePopoverSort as u
+};

package/components/DynamicSort/subcomponents/SortActions/SortActions.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as useSortActions } from "./useSortActions.js";
+import { S as SortActionsSkeleton } from "./SortActionsSkeleton.js";
+import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
+import { t as ActionsStyled, u as ActionsClearButtonStyled, v as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
+function SortActions() {
+  const {
+    isSkeleton,
+    sortIconUrl,
+    clearIconUrl,
+    canShowRemoveAction,
+    onClickClearSorts,
+    onClickSort,
+    sortButtonDictionaryTooltip,
+    ownerState
+  } = useSortActions();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(ActionsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(SortActionsSkeleton, {}) });
+  }
+  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: {}, children: [
+    canShowRemoveAction && /* @__PURE__ */ jsx(
+      ActionsClearButtonStyled,
+      {
+        src: clearIconUrl,
+        onClick: onClickClearSorts,
+        dictionaryTooltipId: getDynamicSortDictionary(DICCTIONARY.tooltip_clear_sort),
+        ownerState: {}
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionsSubmitButtonStyled,
+      {
+        src: sortIconUrl,
+        "aria-label": "settings",
+        dictionaryTooltipId: sortButtonDictionaryTooltip,
+        onClick: onClickSort,
+        ownerState: { ...ownerState }
+      }
+    )
+  ] });
+}
+export {
+  SortActions as S
+};

package/components/DynamicSort/subcomponents/SortActions/SortActionsSkeleton.js

@@ -0,0 +1,12 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Skeleton } from "@mui/material";
+import { w as ActionsSkeletonButtonStyled } from "../../slots/DynamicSortSlots.js";
+function SortActionsSkeleton() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) }),
+    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) })
+  ] });
+}
+export {
+  SortActionsSkeleton as S
+};

package/components/DynamicSort/subcomponents/SortActions/useSortActions.js

@@ -0,0 +1,39 @@
+import { useEnvironment } from "@m4l/core";
+import { u as useDynamicSortStore } from "../../store/useDynamicSortStore.js";
+import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
+import { A as ASSETS_URL, a as ASSETS } from "../../constants.js";
+function useSortActions() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const automatic = useDynamicSortStore((state) => state.automatic);
+  const isSkeleton = useDynamicSortStore((state) => state.ownerState.isSkeleton);
+  const isValid = useDynamicSortStore((state) => state.ownerState.isValid);
+  const isDirty = useDynamicSortStore((state) => state.ownerState.isDirty);
+  const appliedSorts = useDynamicSortStore((state) => state.appliedSorts);
+  const { hidePopoverSort, clearSorts, fireOnChangeSorts } = useDynamicSortStore(
+    (state) => state.actions
+  );
+  function onClickClearSorts() {
+    hidePopoverSort(false);
+    clearSorts();
+    fireOnChangeSorts();
+  }
+  const sortIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${automatic ? ASSETS.refresh : ASSETS.sort}`;
+  const clearIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${ASSETS.clean}`;
+  const canShowRemoveAction = appliedSorts.findIndex((f) => !f.fixed) > -1;
+  const sortButtonDictionaryTooltip = getDynamicSortDictionary(
+    isValid ? isDirty ? DICCTIONARY.sort_tooltip_dirty : DICCTIONARY.sort_tooltip_refresh : DICCTIONARY.sort_tooltip_invalid
+  );
+  return {
+    isSkeleton,
+    sortIconUrl,
+    clearIconUrl,
+    canShowRemoveAction,
+    onClickClearSorts,
+    onClickSort: fireOnChangeSorts,
+    sortButtonDictionaryTooltip,
+    ownerState: { isValid }
+  };
+}
+export {
+  useSortActions as u
+};

package/components/DynamicSort/types.d.ts

@@ -26,10 +26,10 @@ export interface Label<T extends FieldType = FieldType> extends FieldBase<T> {
     label: string;
     dictionaryId?: undefined;
 }
-export type Field<T extends FieldType = FieldType> = FieldDictionaryId<T> | Label<T>;
+export type SortField<T extends FieldType = FieldType> = FieldDictionaryId<T> | Label<T>;
 export interface BaseApplySort<T extends FieldType = FieldType> {
     id: number;
-    field: Field<T>;
+    field: SortField<T>;
     isSet: boolean;
     fixed: boolean;
 }
@@ -122,7 +122,7 @@ export interface DynamicSortProps {
      */
     automatic?: boolean;
     /** Array con la configuración de cada campo por el que se podrá filtrar. */
-    fields: Array<Field>;
+    fields: Array<SortField>;
     /** Array con la configuración de cada campo por el que se podrá hacer  Sort.*/
     initialAppliedSorts?: Array<InitialSortApplied>;
     /** Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion el boton de filtrar */

package/components/Icon/Icon.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import clsx from "clsx";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
-import { I as ICON_PREFIX, a as ICON_KEY_COMPONENT } from "./constants.js";
+import { I as ICON_KEY_COMPONENT, a as ICON_PREFIX } from "./constants.js";
 import { g as getComponentClasses, a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { T as TooltipStyled, R as RootStyled, I as IconStyled, a as IconSkeletonStyled } from "./slots/IconSlots.js";

package/components/Icon/constants.js

@@ -1,6 +1,6 @@
 const ICON_KEY_COMPONENT = "M4LIcon";
 const ICON_PREFIX = "Icon";
 export {
-  ICON_PREFIX as I,
-  ICON_KEY_COMPONENT as a
+  ICON_KEY_COMPONENT as I,
+  ICON_PREFIX as a
 };

package/components/Icon/slots/IconSlots.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { I as IconSlots } from "./IconEnum.js";
-import { a as ICON_KEY_COMPONENT } from "../constants.js";
+import { I as ICON_KEY_COMPONENT } from "../constants.js";
 import { i as iconStyles } from "../Icon.styles.js";
 import { T as Tooltip } from "../../mui_extended/Tooltip/Tooltip.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";

package/components/LoadingError/LoadingError.d.ts

@@ -1,17 +1,42 @@
 import { AreasLoadingErrorProps } from './types';
 /**
+ * LoadingError Component
  *
- * @param {AreasLoadingErrorProps} props El componente LoadingError espera recibir ciertas propiedades que están definidas en el tipo AreasLoadingErrorProps.
- * @param {status} props.status Indica el estado actual del componente. Puede tener valores como 'error', 'cargando' u otros estados definidos por la aplicación.
- * @param {Function} props.action - Es una función que se ejecutará cuando se presione el botón de error. Esta función puede contener lógica para manejar el error o realizar alguna acción específica cuando ocurra un error.
- * @param {string} props.title -  Es una cadena de texto que representa el título del mensaje de error. Este título se mostrará en el componente cuando ocurra un error.
- * @param {string} props.description - Es una cadena de texto que proporciona una descripción detallada del error. Esta descripción se mostrará junto al título en el componente de mensaje de error.
- * @param {string} props.recommendation -  Es una cadena de texto que proporciona una recomendación sobre cómo manejar el error o qué acciones tomar para resolverlo.
- * @param {string} props.introMessage -  Es una cadena de texto que proporciona un mensaje introductorio adicional. Este mensaje se mostrará en el componente antes de mostrar el título, la descripción y la recomendación del error.
- * @param {string} props.errorIcon - Es una cadena de texto que representa la ruta o el identificador del ícono que se mostrará junto al mensaje de error.
- * @returns {JSX.Element} Elemento JSX que representa el componente.
- */
-/**
- * TODO: Documentar
+ * Este componente se utiliza para mostrar un mensaje de error de carga en una aplicación web.
+ * Dependiendo del valor de la propiedad `status`, el componente muestra:
+ *
+ * - Un indicador de progreso (spinner) cuando el status es distinto de "error".
+ * - Un mensaje de error personalizado con título, descripción, recomendación y un botón de acción
+ * cuando el status es "error". Además, se muestra un ícono de error que puede personalizarse.
+ *
+ * El componente también se adapta al tamaño del contenedor, ajustando el contenido visualmente
+ * mediante el hook `useComponentSize`. Se utiliza un `ResizeObserver` para determinar si el contenedor
+ * es lo suficientemente grande y, en caso contrario, ocultar ciertos elementos (por ejemplo, el ícono).
+ * @param {AreasLoadingErrorProps} props - Propiedades del componente.
+ * @param {string} props.status - Estado de la carga. Si es "error", se muestra el mensaje de error; de lo contrario, se muestra un indicador de progreso.
+ * @param {() => void} props.action - Función a ejecutar al hacer clic en el botón, generalmente para reintentar la acción.
+ * @param {string} [props.title] - Título del mensaje de error. Si no se proporciona, se usa un valor por defecto obtenido del diccionario.
+ * @param {string} [props.description] - Descripción del error. Si no se proporciona, se usa un valor por defecto obtenido del diccionario.
+ * @param {string} [props.recommendation] - Texto de recomendación para el usuario. Si no se proporciona, se usa un valor por defecto obtenido del diccionario.
+ * @param {string} [props.introMessage] - Mensaje que se muestra en el botón de acción. Si no se proporciona, se usa un valor por defecto obtenido del diccionario.
+ * @param {string} [props.errorIcon] - URL del ícono que se mostrará junto al mensaje de error. Si no se especifica, se utiliza un ícono predeterminado.
+ * @param {string} [props.className] - Clases CSS adicionales para aplicar al contenedor del componente.
+ * @param {string} [props.dataTestId] - Identificador para pruebas.
+ * @param {'small' | 'medium' | 'large'} [props.size] - Tamaño del componente, que influye en la visualización de textos y elementos.
+ * @example
+ * <LoadingError
+ *   status="error"
+ *   action={() => console.log("Reintentando...")}
+ *   title="Error de carga"
+ *   description="No se pudo cargar la información requerida."
+ *   recommendation="Intente refrescar la página o contacte al soporte."
+ *   introMessage="Reintentar"
+ *   errorIcon="/path/to/custom/error-icon.svg"
+ *   className="custom-loading-error"
+ *   dataTestId="loading-error-component"
+ *   size="medium"
+ * />
+ * @returns {JSX.Element} Un componente de React que muestra un indicador de progreso o un mensaje de error
+ * dependiendo del valor de `status`.
  */
 export declare const LoadingError: (props: AreasLoadingErrorProps) => import("react/jsx-runtime").JSX.Element;

package/components/LoadingError/LoadingError.js

@@ -1,55 +1,93 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { I as ICONS } from "../areas/icons.js";
-import { l as loadingErrorUtilityClasses } from "./classes/index.js";
-import { L as LoadingErrorRoot } from "./styles.js";
-import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/LinearProgressIndeterminate.js";
+import { L as LoadingErrorRootStyled, a as LoadingErrorStyled, b as LinearProgressIndeterminateStyled, c as LoadingErrorContainerStyled, d as LoadingErrorContentStyled, e as LoadingErrorImageStyled, f as LoadingErrorTextContainerStyled, g as LoadingErrorTitleDescriptionStyled, h as LoadingErrorDividerStyled, i as LoadingErrorButtonContainerStyled, j as LoadingErrorRecommendationTextStyled } from "./slots/LoadingErrorSlots.js";
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { L as LOADING_ERROR_KEY_COMPONENT } from "./constants.js";
+import clsx from "clsx";
+import { d as dictionary } from "./dictionary.js";
+import { useRef, useState, useEffect } from "react";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { L as LoadingErrorSlots } from "./slots/LoadingErrorEnum.js";
 import { T as Typography } from "../mui_extended/Typography/Typography.js";
-import { I as Icon } from "../Icon/Icon.js";
 import { B as Button } from "../mui_extended/Button/Button.js";
 const LoadingError = (props) => {
-  const { status, action, title, description, recommendation, introMessage, errorIcon } = props;
+  const { status, action, title, description, recommendation, introMessage, errorIcon, className, dataTestId, size = "medium" } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
-  const classes = loadingErrorUtilityClasses();
-  return /* @__PURE__ */ jsx(LoadingErrorRoot, { className: classes.root, children: status !== "error" ? /* @__PURE__ */ jsx("div", { className: classes.loadingErrorLoading, children: /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}) }) : /* @__PURE__ */ jsxs("div", { className: classes.loadingError, children: [
-    /* @__PURE__ */ jsx(
-      Icon,
-      {
-        className: classes.loadingErrorIcon,
-        src: errorIcon ? errorIcon : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NAVIGATE_ERROR}`
+  const { currentSize } = useComponentSize(size);
+  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
+  const ownerState = {
+    size: normalizedSize
+  };
+  const containerRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(true);
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setIsVisible(entry.contentRect.height >= 200);
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: classes.titleDescription, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h3", skeletonWidth: "100px", className: classes.loadingErrorTitle, children: title ? title : getLabel("loading_error.label_error_title") }),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "subtitle",
-          skeletonWidth: "100px",
-          className: classes.loadingErrorDescription,
-          children: description ? description : getLabel("loading_error.label_error_description")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: classes.loadingErrorDivider }),
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "paragraph",
-        skeletonWidth: "100px",
-        className: classes.loadingErrorTextAction,
-        children: recommendation ? recommendation : getLabel("loading_error.label_error_recommendation")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: action,
-        label: introMessage ? introMessage : getLabel("loading_error.label_error_intro")
-      }
-    )
-  ] }) });
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    LoadingErrorRootStyled,
+    {
+      ref: containerRef,
+      ownerState,
+      className: clsx(getComponentSlotRoot(LOADING_ERROR_KEY_COMPONENT), className),
+      ...getPropDataTestId(LOADING_ERROR_KEY_COMPONENT, LoadingErrorSlots.root, dataTestId),
+      children: status !== "error" ? /* @__PURE__ */ jsx(LoadingErrorStyled, { children: /* @__PURE__ */ jsx(LinearProgressIndeterminateStyled, {}) }) : /* @__PURE__ */ jsx(LoadingErrorContainerStyled, { children: /* @__PURE__ */ jsxs(LoadingErrorContentStyled, { children: [
+        isVisible && /* @__PURE__ */ jsx(
+          LoadingErrorImageStyled,
+          {
+            size,
+            src: errorIcon ? errorIcon : `${host_static_assets}/${environment_assets}/frontend/components/loading_error/assets/icons/LoadingError.svg`
+          }
+        ),
+        /* @__PURE__ */ jsxs(LoadingErrorTextContainerStyled, { children: [
+          /* @__PURE__ */ jsxs(LoadingErrorTitleDescriptionStyled, { children: [
+            /* @__PURE__ */ jsx(Typography, { size, variant: "h5", skeletonWidth: "100px", children: title ? title : getLabel(dictionary.LABEL_ERROR_TITLE) }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                size,
+                variant: "paragraph",
+                skeletonWidth: "100px",
+                children: description ? description : getLabel(dictionary.LABEL_ERROR_DESCRIPTION)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(LoadingErrorDividerStyled, {}),
+          /* @__PURE__ */ jsxs(LoadingErrorButtonContainerStyled, { children: [
+            /* @__PURE__ */ jsx(
+              LoadingErrorRecommendationTextStyled,
+              {
+                size,
+                variant: "paragraph",
+                skeletonWidth: "100px",
+                children: recommendation ? recommendation : getLabel(dictionary.LABEL_ERROR_RECOMMENDATION)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size,
+                variant: "contained",
+                color: "primary",
+                startIcon: `${host_static_assets}/${environment_assets}/frontend/components/loading_error/assets/icons/refresh.svg`,
+                onClick: action,
+                label: introMessage ? introMessage : getLabel(dictionary.LABEL_ERROR_INTRO)
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
 };
 export {
   LoadingError as L

package/components/LoadingError/LoadingError.styles.d.ts

@@ -0,0 +1,2 @@
+import { LoadingErrorStyles } from './types';
+export declare const loadingErrorStyles: LoadingErrorStyles;

package/components/LoadingError/LoadingError.styles.js

@@ -0,0 +1,121 @@
+const loadingErrorStyles = {
+  /**
+   * Styles for Root.
+   */
+  root: () => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    inset: "0",
+    overflow: "hidden",
+    width: "100%",
+    height: "100%"
+  }),
+  /**
+   * Styles for LoadingError.
+   */
+  loadingError: ({ theme }) => ({
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    minHeight: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Styles for LoadingErrorContent.
+   */
+  loadingErrorContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "268px",
+    gap: theme.vars.size.baseSpacings.sp5,
+    padding: theme.vars.size.baseSpacings.sp3,
+    alignContent: "center",
+    justifyContent: "center",
+    alignItems: "center",
+    flexShrink: 0,
+    height: "100%"
+  }),
+  /**
+   * Styles for LoadingErrorTitleDescription.
+   */
+  loadingErrorTitleDescription: ({ theme }) => ({
+    textAlign: "center",
+    flexDirection: "column",
+    display: "flex",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Styles for loadingErrorImage.
+   */
+  loadingErrorImage: () => ({
+    width: "auto",
+    height: "114px",
+    maxHeight: "114px",
+    minHeight: "60px"
+  }),
+  /**
+   * Styles for LoadingErrorDivider.
+   */
+  loadingErrorDivider: ({ theme }) => ({
+    width: "100%",
+    height: "1px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp3,
+    alignSelf: "stretch",
+    backgroundColor: theme.vars.palette.border.secondary
+  }),
+  /**
+   * Styles for LoadingErrorContainer.
+   */
+  loadingErrorContainer: () => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%"
+  }),
+  /**
+   * Styles for LoadingErrorTextContainerStyled.
+   */
+  loadingErrorTextContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Styles for LoadingErrorButtonContainerStyled.
+   */
+  loadingErrorButtonContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    alignSelf: "stretch"
+  }),
+  /**
+   * Styles for LoadingErrorRecommendationTextStyled.
+   */
+  loadingErrorRecommendationText: ({ theme }) => ({
+    color: `${theme.vars.palette.text.secondary} !important`
+  }),
+  /**
+   * Styles for LinearProgressIndeterminateStyled.
+   */
+  linearProgressIndeterminate: () => ({
+    top: "unset"
+  })
+};
+export {
+  loadingErrorStyles as l
+};

package/components/LoadingError/constants.d.ts

@@ -0,0 +1 @@
+export declare const LOADING_ERROR_KEY_COMPONENT = "M4LLoadingError";