@m4l/components 9.2.61 → 9.2.62

package/components/DynamicSort/slots/DynamicSortSlots.js

@@ -4,7 +4,6 @@ import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../constants.js";
 import { D as DynamicSortSlots } from "./SlotsEnum.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
-import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { P as Popover } from "../../mui_extended/Popover/Popover.js";
 const RootStyled = styled("div", {
@@ -55,29 +54,16 @@ const PopoverContainerFieldsStyled = styled("div", {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.popoverSortContainerFields
 })(dynamicSortStyles?.popoverSortContainerFields);
-const PopoverHeaderStyled = styled("div", {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.popoverSortHeader
-})(dynamicSortStyles?.popoverSortHeader);
-const ContentSortStyled = styled("div", {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.contentSort
-})(dynamicSortStyles?.contentSort);
-const PopoverHeaderTitleStyled = styled(Typography, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.popoverSortHeaderTitle
-})(dynamicSortStyles?.popoverSortHeaderTitle);
 const PopoverHeaderActionsStyled = styled(ActionsContainer, {
   name: DYNAMIC_SORT_KEY_COMPONENT,
   slot: DynamicSortSlots.popoverSortActions
 })(dynamicSortStyles?.popoverSortActions);
 const InputSortInputSkeletonStyled = styled(Skeleton, {
   name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: DynamicSortSlots.inputSortInputSkeleton
-})(dynamicSortStyles?.inputSortInputSkeleton);
+  slot: DynamicSortSlots.inputSortSkeleton
+})(dynamicSortStyles?.inputSortSkeleton);
 export {
   AppliedSortsStyled as A,
-  ContentSortStyled as C,
   InnerContainerStyled as I,
   PopoverMenuStyled as P,
   RootStyled as R,
@@ -86,11 +72,9 @@ export {
   InputSortInputSkeletonStyled as c,
   InputSortInputStyled as d,
   PopoverStyled as e,
-  PopoverHeaderStyled as f,
-  PopoverHeaderTitleStyled as g,
-  PopoverContainerFieldsStyled as h,
-  PopoverHeaderActionsStyled as i,
-  ActionsStyled as j,
-  ActionsClearButtonStyled as k,
-  ActionsSubmitButtonStyled as l
+  PopoverContainerFieldsStyled as f,
+  PopoverHeaderActionsStyled as g,
+  ActionsStyled as h,
+  ActionsClearButtonStyled as i,
+  ActionsSubmitButtonStyled as j
 };

package/components/DynamicSort/slots/SlotsEnum.d.ts

@@ -11,9 +11,6 @@ export declare enum DynamicSortSlots {
     popoverMenu = "popoverMenu",
     popoverSort = "popoverSort",
     popoverSortContainerFields = "popoverSortContainerFields",
-    popoverSortHeader = "popoverSortHeader",
-    contentSort = "contentSort",
-    popoverSortHeaderTitle = "popoverSortHeaderTitle",
     popoverSortActions = "popoverSortActions",
-    inputSortInputSkeleton = "inputSortInputSkeleton"
+    inputSortSkeleton = "inputSortSkeleton"
 }

package/components/DynamicSort/slots/SlotsEnum.js

@@ -11,11 +11,8 @@ var DynamicSortSlots = /* @__PURE__ */ ((DynamicSortSlots2) => {
   DynamicSortSlots2["popoverMenu"] = "popoverMenu";
   DynamicSortSlots2["popoverSort"] = "popoverSort";
   DynamicSortSlots2["popoverSortContainerFields"] = "popoverSortContainerFields";
-  DynamicSortSlots2["popoverSortHeader"] = "popoverSortHeader";
-  DynamicSortSlots2["contentSort"] = "contentSort";
-  DynamicSortSlots2["popoverSortHeaderTitle"] = "popoverSortHeaderTitle";
   DynamicSortSlots2["popoverSortActions"] = "popoverSortActions";
-  DynamicSortSlots2["inputSortInputSkeleton"] = "inputSortInputSkeleton";
+  DynamicSortSlots2["inputSortSkeleton"] = "inputSortSkeleton";
   return DynamicSortSlots2;
 })(DynamicSortSlots || {});
 export {

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/index.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useMemo } from "react";
 import { S as SORT_ICONS } from "../../../icons.js";
@@ -25,7 +25,7 @@ function StringSort() {
     ],
     [getLabel, host_static_assets, environment_assets]
   );
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     RHFSelect,
     {
       size,

package/components/DynamicSort/subcomponents/InputSort/InputSort.js

@@ -33,6 +33,8 @@ const InputSort = () => {
         value: inputData,
         placeholder: inputPlaceHolder,
         ownerState: { ...ownerState },
+        role: "searchbox",
+        "aria-label": "searchbox",
         ...inputHandlersProps
       }
     ),

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Icon } from "../../../Icon/Icon.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverSort } from "./usePopoverSort.js";
-import { e as PopoverStyled, f as PopoverHeaderStyled, g as PopoverHeaderTitleStyled, C as ContentSortStyled, h as PopoverContainerFieldsStyled, i as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
+import { e as PopoverStyled, f as PopoverContainerFieldsStyled, g as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
+import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
 function PopoverSort() {
@@ -22,7 +22,7 @@ function PopoverSort() {
     statusLoad,
     canRender
   } = usePopoverSort();
-  const { ownerState, size } = useDynamicSortBase();
+  const { size } = useDynamicSortBase();
   if (!canRender) {
     return null;
   }
@@ -38,26 +38,31 @@ function PopoverSort() {
       anchorEl,
       onKeyDown: handleKeyDownPopper,
       onClose: handleClosePopover,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         RHFormProvider,
         {
           onSubmit,
           values: sortFormValue,
           validationSchema: popupValidationSchema,
           statusLoad,
-          children: [
-            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: { ...ownerState }, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(Icon, { src: field.urlIcon, size }),
-              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", size, children: labelField })
-            ] }),
-            /* @__PURE__ */ jsxs(ContentSortStyled, { children: [
-              /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
-              /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
-                /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
-                /* @__PURE__ */ jsx(ActionIntro, { size })
-              ] })
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxs(
+            WindowBase,
+            {
+              title: labelField,
+              iconUrl: field.urlIcon,
+              variant: "text",
+              type: "popup",
+              selected: true,
+              draggable: false,
+              children: [
+                /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
+                /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
+                  /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
+                  /* @__PURE__ */ jsx(ActionIntro, { size, "aria-label": "applySort" })
+                ] })
+              ]
+            }
+          )
         }
       )
     }

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

@@ -3,7 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { u as useSortActions } from "./useSortActions.js";
-import { j as ActionsStyled, k as ActionsClearButtonStyled, l as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
+import { h as ActionsStyled, i as ActionsClearButtonStyled, j as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
 function SortActions() {
   const {
     sortIconUrl,
@@ -16,7 +16,7 @@ function SortActions() {
   } = useSortActions();
   const { size, visibleRefresh, ownerState: { isDirty } } = useDynamicSortBase();
   const { getLabel } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh }, children: [
+  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { ...ownerState, isDirty: canShowRemoveAction, visibleRefresh }, children: [
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {

package/components/DynamicSort/subcomponents/SortActions/useSortActions.d.ts

@@ -11,6 +11,8 @@ declare function useSortActions(): {
     sortButtonDictionaryTooltip: string;
     ownerState: {
         isValid: boolean;
+        isDirty: boolean;
+        inEdition: boolean;
     };
 };
 export default useSortActions;

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

@@ -9,6 +9,7 @@ function useSortActions() {
   const isValid = useDynamicSortStore((state) => state.ownerState?.isValid);
   const isDirty = useDynamicSortStore((state) => state.ownerState?.isDirty);
   const appliedSorts = useDynamicSortStore((state) => state.appliedSorts);
+  const inEdition = useDynamicSortStore((state) => state.ownerState?.inEdition);
   const { hidePopoverSort, clearSorts, fireOnChangeSorts } = useDynamicSortStore(
     (state) => state.actions
   );
@@ -31,7 +32,7 @@ function useSortActions() {
     onClickClearSorts,
     onClickSort: fireOnChangeSorts,
     sortButtonDictionaryTooltip,
-    ownerState: { isValid }
+    ownerState: { isValid, isDirty, inEdition }
   };
 }
 export {

package/components/LanguagePopover/LanguagePopover.js

@@ -5,17 +5,16 @@ import { useEnvironment, useNetwork } from "@m4l/core";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { I as Image } from "../Image/Image.js";
-import { L as LanguagePopoverRootStyled, P as PaperStyled, I as ImageStyled } from "./slots/LanguagePopoverSlots.js";
+import { L as LanguagePopoverRootStyled, P as PaperStyled } from "./slots/LanguagePopoverSlots.js";
 import { L as LANGUAGE_POPOVER_KEY_COMPONENT } from "./constants.js";
 import { L as LanguagePopoverSlots } from "./slots/LanguagePopoverEnum.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 function LanguagePopover(props) {
   const {
     disabled,
-    size = "medium"
+    size
   } = props;
   const { currentSize } = useComponentSize(size);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const isFirstRender = useFirstRender();
   const { currentLocale, onChangeLocale } = useLocales();
   const { domain_token } = useEnvironment();
@@ -68,11 +67,14 @@ function LanguagePopover(props) {
   return /* @__PURE__ */ jsx(
     LanguagePopoverRootStyled,
     {
-      size: adjustedSize,
+      ownerState: {
+        size: currentSize
+      },
+      size: currentSize,
       className: classRoot,
       ...getPropDataTestId(LANGUAGE_POPOVER_KEY_COMPONENT, LanguagePopoverSlots.root),
       disabled,
-      icon: /* @__PURE__ */ jsx(ImageStyled, { src: currentLocale?.urlIcon, enableIntersectionObserver: false }),
+      icon: /* @__PURE__ */ jsx(Image, { src: currentLocale?.urlIcon, enableIntersectionObserver: false }),
       menuActions: getMenuActionsOptions(),
       onOpen: handleMenuOpenChange,
       slots: {

package/components/LanguagePopover/LanguagePopover.styles.js

@@ -1,8 +1,36 @@
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const languagePopoverStyles = {
-  root: {},
-  image: {
-    height: "100%"
-  },
+  /**
+   * Estilos del root
+   */
+  root: ({ theme, ownerState }) => ({
+    "&": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "action",
+        (size) => ({
+          width: size,
+          height: size
+        })
+      ),
+      "& .MuiButtonBase-root .M4LImage-root": {
+        ...getSizeStyles(
+          theme,
+          ownerState?.size || "medium",
+          "base",
+          (size) => ({
+            width: `${size}!important`,
+            height: `${size}!important`
+          })
+        )
+      }
+    }
+  }),
+  image: {},
   /**
    *  Estilos del paper
    */

package/components/LanguagePopover/slots/LanguagePopoverSlots.d.ts

@@ -1,5 +1,11 @@
-export declare const LanguagePopoverRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuActions/types').MenuActionsProps, keyof import('../../MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
-export declare const ImageStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const LanguagePopoverRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuActions/types').MenuActionsProps, keyof import('../../MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const ImageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PaperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PaperOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "style" | "square" | "variant" | "className" | "classes" | "sx" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "variant" | "translate" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+}, "children" | "style" | "square" | "variant" | "className" | "classes" | "sx" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "variant" | "translate" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/LanguagePopover/slots/LanguagePopoverSlots.js

@@ -1,5 +1,4 @@
 import { styled } from "@mui/material/styles";
-import { I as Image } from "../../Image/Image.js";
 import { M as MenuActions } from "../../MenuActions/MenuActions.js";
 import { L as LANGUAGE_POPOVER_KEY_COMPONENT } from "../constants.js";
 import { l as languagePopoverStyles } from "../LanguagePopover.styles.js";
@@ -9,7 +8,7 @@ const LanguagePopoverRootStyled = styled(MenuActions, {
   name: LANGUAGE_POPOVER_KEY_COMPONENT,
   slot: LanguagePopoverSlots.root
 })(languagePopoverStyles.root);
-const ImageStyled = styled(Image, {
+styled("div", {
   name: LANGUAGE_POPOVER_KEY_COMPONENT,
   slot: LanguagePopoverSlots.image
 })(languagePopoverStyles.image);
@@ -18,7 +17,6 @@ const PaperStyled = styled(Paper, {
   slot: LanguagePopoverSlots.paper
 })(languagePopoverStyles.paper);
 export {
-  ImageStyled as I,
   LanguagePopoverRootStyled as L,
   PaperStyled as P
 };

package/components/LanguagePopover/types.d.ts

@@ -17,4 +17,9 @@ export interface LanguagePopoverProps {
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
 }
-export type LanguagePopoverStyles = M4LOverridesStyleRules<keyof typeof Slots, typeof LANGUAGE_POPOVER_KEY_COMPONENT, Theme>;
+export type LanguagePopoverSlotsType = keyof typeof Slots;
+export interface LanguagePopoverOwnerState {
+    size: LanguagePopoverProps['size'];
+    image?: string;
+}
+export type LanguagePopoverStyles = M4LOverridesStyleRules<LanguagePopoverSlotsType, typeof LANGUAGE_POPOVER_KEY_COMPONENT, Theme>;

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,9 +56,11 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/PaperForm/styles.js

@@ -13,7 +13,8 @@ const paperFormStyles = {
     borderColor: theme.vars.palette.border.default,
     overflow: "hidden",
     width: "100%",
-    height: "auto"
+    height: "auto",
+    container: "container / inline-size"
   }),
   /**
    * ************************************************************

package/components/PropertyValue/PropertyValue.js

@@ -36,7 +36,8 @@ function PropertyValue(props) {
     disabled: isForm && disabled ? disabled : false,
     isForm: isForm ? true : false,
     semanticWidth,
-    valueHeight
+    valueHeight,
+    size: currentSize
   };
   const renderIcon = () => {
     if (!startAdornment) {

package/components/PropertyValue/PropertyValue.styles.js

@@ -9,7 +9,8 @@ const propertyValueStyles = {
       minWidth: `${maxWidth}px`,
       [`@container ${CONTAINER_QUERY_NAME} (max-width: ${maxWidth - 1}px)`]: {
         minWidth: "100px",
-        maxWidth: "100%"
+        maxWidth: "100%",
+        width: "100%"
       }
     });
     const semanticStylesMap = {
@@ -44,11 +45,11 @@ const propertyValueStyles = {
       display: "flex",
       flexDirection: ownerState?.isForm ? "column" : "row",
       justifyContent: ownerState?.isForm ? "space-between" : "left",
-      alignItems: "flex-start",
+      alignItems: "center",
       gap: theme.vars.size.baseSpacings["sp1"],
       width: ownerState?.semanticWidth ? "auto" : "200px",
       overflow: "hidden",
-      color: theme.palette.text.primary,
+      color: theme.vars.palette.text.primary,
       paddingTop: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
       paddingBottom: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
       borderBottom: !ownerState?.isForm ? `${theme.vars.palette.border.disabled} solid 1px` : "none",
@@ -61,6 +62,7 @@ const propertyValueStyles = {
       ...theme.generalSettings.isMobile && {
         flexDirection: "column"
       },
+      minHeight: theme.vars.size.baseSpacings.sp5,
       ...semanticStyle
     };
   },
@@ -71,7 +73,7 @@ const propertyValueStyles = {
     display: "flex",
     alignItems: "center",
     fontSize: theme.typography.body2.fontSize,
-    color: theme.palette.text.primary,
+    color: theme.vars.palette.text.primary,
     gap: theme.vars.size.baseSpacings["sp1"],
     overflow: "hidden",
     width: "100%"
@@ -83,6 +85,7 @@ const propertyValueStyles = {
     width: "100%",
     display: "flex",
     justifyContent: "flex-start",
+    alignItems: "center",
     overflow: "hidden",
     height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
     ...ownerState?.isForm && {

package/components/PropertyValue/types.d.ts

@@ -91,6 +91,10 @@ export interface PropertyVaLueOwnerState extends Pick<PropertyValueProps, 'disab
      * Indica si el componente está en modo formulario.
      */
     isForm: boolean;
+    /**
+     * Tamaño del componente.
+     */
+    size?: PropertyValueProps['size'];
     /**
      * Propiedades adicionales para estilos o comportamientos personalizados.
      */

package/components/SideBar/SideBar.js

@@ -23,7 +23,8 @@ const SideBar = memo((props) => {
     expandedWidth = "230px",
     companyName,
     companySlogan,
-    urlIconPrefix = `${host_static_assets}/${environment_assets}${PATH_ICONS}`
+    urlIconPrefix = `${host_static_assets}/${environment_assets}${PATH_ICONS}`,
+    promotion
   } = props;
   const menuDataWithState = useMemo(() => getMenuDataWithState({ menuData: menuData ?? getDataToSkeleton(), moduleSelectedId }), [menuData, moduleSelectedId]);
   const isMobile = useIsMobile();
@@ -44,7 +45,8 @@ const SideBar = memo((props) => {
         expandedWidth,
         companyName,
         companySlogan,
-        urlIconPrefix
+        urlIconPrefix,
+        promotion
       },
       children: !isMobile ? /* @__PURE__ */ jsx(SideBarDesktop, {}) : /* @__PURE__ */ jsx(SideBarMobile, {})
     }

package/components/SideBar/constants.d.ts

@@ -1,8 +1,32 @@
+import { HeaderSidebarSlots, ContentGroupsSlots, SideBarDesktopSlots, SideBarFooterSlots, SideBarMobileSlots, ContentComponentSlots } from './slots/SideBarEnum';
 export declare const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
 export declare const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
 export declare const LIST_MENU_ITEM = "M4LListMenuItem";
-export declare const ITEM_ACTIVE = "M4LItemActive";
-export declare const ITEM_IN_TREE_ACTIVE = "M4LItemInTreeActive";
 export declare const PATH_ICONS = "/frontend/domain/microfrontends/";
 export declare const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
 export declare const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
+export declare const ALL_SIDEBAR_SLOTS: {
+    contentComponentRoot: ContentComponentSlots.contentComponentRoot;
+    contentComponentHide: ContentComponentSlots.contentComponentHide;
+    containerTreeItemsAndPromotion: ContentComponentSlots.containerTreeItemsAndPromotion;
+    containerNodeMenuItem: ContentComponentSlots.containerNodeMenuItem;
+    containerNodeMenuItemMain: ContentComponentSlots.containerNodeMenuItemMain;
+    menuItemMain: ContentComponentSlots.menuItemMain;
+    containerFooter: SideBarFooterSlots.containerFooter;
+    containerHeaderSidebarRoot: HeaderSidebarSlots.containerHeaderSidebarRoot;
+    containerTitleSubtitle: HeaderSidebarSlots.containerTitleSubtitle;
+    containerTreeGroupItems: ContentGroupsSlots.containerTreeGroupItems;
+    containerContentGroups: ContentGroupsSlots.containerContentGroups;
+    containerContentTitle: ContentGroupsSlots.containerContentTitle;
+    containerContentNavItems: ContentGroupsSlots.containerContentNavItems;
+    containerContentItem: ContentGroupsSlots.containerContentItem;
+    containerArrowIconRoot: ContentGroupsSlots.containerArrowIconRoot;
+    containerSideBarMobile: SideBarMobileSlots.containerSideBarMobile;
+    containerDesktopRoot: SideBarDesktopSlots.containerDesktopRoot;
+    containerDesktopContent: SideBarDesktopSlots.containerDesktopContent;
+    containerBtnAnchored: SideBarDesktopSlots.containerBtnAnchored;
+};
+export declare const CLASS_NAME_IS_ROOT = "is-root";
+export declare const CLASS_NAME_MENU_ACTIVE = "menu-active";
+export declare const CLASS_NAME_ITEM_IN_TREE_ACTIVE = "item-in-tree-active";
+export declare const CLASS_NAME_HAS_CHILDREN = "has-children";

package/components/SideBar/constants.js

@@ -1,18 +1,30 @@
+import { C as ContentComponentSlots, S as SideBarFooterSlots, H as HeaderSidebarSlots, a as ContentGroupsSlots, b as SideBarMobileSlots, c as SideBarDesktopSlots } from "./slots/SideBarEnum.js";
 const SIDEBAR_KEY_COMPONENT = "M4LSideBar";
 const CONTAINER_BTN_ANCHORED = "M4LSideBarButtonAnchored";
-const LIST_MENU_ITEM = "M4LListMenuItem";
-const ITEM_ACTIVE = "M4LItemActive";
-const ITEM_IN_TREE_ACTIVE = "M4LItemInTreeActive";
 const PATH_ICONS = "/frontend/domain/microfrontends/";
 const PATH_ARROW_DOWN_ICON = "frontend/components/sidebar/assets/icons/ChevronRight.svg";
 const PATH_ARROW_RIGHT_ICON = "frontend/components/sidebar/assets/icons/arrow_right.svg";
+const ALL_SIDEBAR_SLOTS = {
+  ...SideBarDesktopSlots,
+  ...SideBarMobileSlots,
+  ...ContentGroupsSlots,
+  ...HeaderSidebarSlots,
+  ...SideBarFooterSlots,
+  ...ContentComponentSlots
+};
+const CLASS_NAME_IS_ROOT = "is-root";
+const CLASS_NAME_MENU_ACTIVE = "menu-active";
+const CLASS_NAME_ITEM_IN_TREE_ACTIVE = "item-in-tree-active";
+const CLASS_NAME_HAS_CHILDREN = "has-children";
 export {
+  ALL_SIDEBAR_SLOTS as A,
   CONTAINER_BTN_ANCHORED as C,
-  ITEM_ACTIVE as I,
-  LIST_MENU_ITEM as L,
   PATH_ICONS as P,
   SIDEBAR_KEY_COMPONENT as S,
   PATH_ARROW_RIGHT_ICON as a,
-  ITEM_IN_TREE_ACTIVE as b,
-  PATH_ARROW_DOWN_ICON as c
+  CLASS_NAME_IS_ROOT as b,
+  CLASS_NAME_MENU_ACTIVE as c,
+  CLASS_NAME_ITEM_IN_TREE_ACTIVE as d,
+  CLASS_NAME_HAS_CHILDREN as e,
+  PATH_ARROW_DOWN_ICON as f
 };

package/components/SideBar/context/sideBarContext/index.js

@@ -1,5 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext } from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useState, createContext } from "react";
+import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
+import { A as ALL_SIDEBAR_SLOTS, S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
+const classes = getComponentClasses(SIDEBAR_KEY_COMPONENT, ALL_SIDEBAR_SLOTS);
 const initialState = {
   anchored: false,
   visible: true,
@@ -14,11 +17,17 @@ const initialState = {
   },
   expandedWidth: "",
   companyName: "",
-  companySlogan: ""
+  companySlogan: "",
+  classes,
+  promotion: /* @__PURE__ */ jsx(Fragment, {}),
+  isHover: false,
+  setIsHover: (_isHover) => {
+  }
 };
 const SideBarContext = createContext(initialState);
 const SideBarProvider = (props) => {
   const { value, children } = props;
+  const [isHover, setIsHover] = useState(false);
   const {
     anchored,
     visible,
@@ -32,7 +41,8 @@ const SideBarProvider = (props) => {
     moduleSelectedId,
     companyName,
     companySlogan,
-    urlIconPrefix
+    urlIconPrefix,
+    promotion
   } = value;
   return (
     // Proporcionar el contexto con las propiedades desestructuradas
@@ -52,7 +62,11 @@ const SideBarProvider = (props) => {
           expandedWidth,
           companyName,
           companySlogan,
-          urlIconPrefix
+          urlIconPrefix,
+          classes,
+          promotion,
+          isHover,
+          setIsHover
         },
         children
       }